Updates

geomatico · Aug 13, 2024 · 023b92d · 023b92d
1 parent c970d9c
commit 023b92d
Show file tree

Hide file tree

Showing 8 changed files with 142 additions and 24 deletions.
diff --git a/color.html b/color.html
@@ -7,15 +7,30 @@
   <script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
   <script src="dist/index.js"></script>
   <style>
-    html, body, #map {
-      margin:0;
-      width: 100%;
-      height: 100%;
-    }
+      html, body, #map {
+          margin: 0;
+          width: 100%;
+          height: 100%;
+      }
+
+      #info {
+          display: none;
+          position: absolute;
+          top: 0;
+          left: 0;
+          background: #2d2d2d;
+          border: 1px solid #bbbbbb;
+          color: #bbbbbb;
+          padding: 6px;
+          border-radius: 5px;
+          font-family: monospace;
+          font-size: 18px;
+      }
   </style>
 </head>
 <body>
 <div id="map"></div>
+<div id="info"></div>
 <script>
   let map = new maplibregl.Map({
     container: 'map',
@@ -31,7 +46,7 @@
     map.addSource('imageSource', {
       type: 'raster',
       url: 'cog://./data/kriging.tif#color:BrewerSpectral7,1.7084054885838,1.7919403772937,c',
-      tileSize: 256,
+      tileSize: 256
     });
 
     map.addLayer({
@@ -41,6 +56,29 @@
     });
   });
 
+  map.on('drag', () => document.getElementById('info').style.display = 'none');
+
+  map.on('mousemove', (e) => {
+    const {lngLat: {lat: latitude, lng: longitude}, point: {x, y}} = e;
+    const zoom = map.getZoom();
+
+    document.getElementById('info').style.left = x + 10 + 'px';
+    document.getElementById('info').style.top = y + 20 + 'px';
+
+    MaplibreCOGProtocol.locationValues('./data/kriging.tif', {latitude, longitude}, zoom)
+      .then(result => {
+        const value = Math.round(result[0] * 1000) / 1000;
+        if (isNaN(value)) {
+          map.getCanvas().style.cursor = '';
+          document.getElementById('info').style.display = 'none';
+        } else {
+          map.getCanvas().style.cursor = 'default';
+          document.getElementById('info').style.display = 'block';
+          document.getElementById('info').innerHTML = `Value: <b>${value}</b>`;
+        }
+      });
+  });
+
 </script>
 </body>
 </html>
diff --git a/dem.html b/dem.html
@@ -7,15 +7,30 @@
   <script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
   <script src="dist/index.js"></script>
   <style>
-    html, body, #map {
-      margin:0;
-      width: 100%;
-      height: 100%;
-    }
+      html, body, #map {
+          margin: 0;
+          width: 100%;
+          height: 100%;
+      }
+
+      #info {
+          display: none;
+          position: absolute;
+          top: 0;
+          left: 0;
+          background: #2d2d2d;
+          border: 1px solid #bbbbbb;
+          color: #bbbbbb;
+          padding: 6px;
+          border-radius: 5px;
+          font-family: monospace;
+          font-size: 18px;
+      }
   </style>
 </head>
 <body>
 <div id="map"></div>
+<div id="info"></div>
 <script>
   let map = new maplibregl.Map({
     container: 'map',
@@ -33,14 +48,37 @@
     map.addSource('demSource', {
       type: 'raster-dem',
       url: 'cog://https://cdn.geomatico.es/met2_cat_cog.tiff#dem',
-      tileSize: 256,
+      tileSize: 256
     });
 
     map.setTerrain({
       source: 'demSource'
     });
   });
 
+  map.on('drag', () => document.getElementById('info').style.display = 'none');
+
+  map.on('mousemove', (e) => {
+    const {lngLat: {lat: latitude, lng: longitude}, point: {x, y}} = e;
+    const zoom = map.getZoom();
+
+    document.getElementById('info').style.left = x + 10 + 'px';
+    document.getElementById('info').style.top = y + 20 + 'px';
+
+    MaplibreCOGProtocol.locationValues('https://cdn.geomatico.es/met2_cat_cog.tiff', {latitude, longitude}, zoom)
+      .then(values => {
+        const height = Math.round(values[0]);
+        if (isNaN(height)) {
+          map.getCanvas().style.cursor = '';
+          document.getElementById('info').style.display = 'none';
+        } else {
+          map.getCanvas().style.cursor = 'default';
+          document.getElementById('info').style.display = 'block';
+          document.getElementById('info').innerHTML = `Height: <b> ${height} m</b>`;
+        }
+      });
+  });
+
 </script>
 </body>
 </html>
diff --git a/dist/index.d.ts b/dist/index.d.ts
@@ -1,3 +1,4 @@
 import cogProtocol from '@/cogProtocol';
 import { colorScale, colorSchemeNames } from '@/render/colorScale';
-export { cogProtocol, colorScale, colorSchemeNames };
+import locationValues from '@/read/locationValues';
+export { cogProtocol, colorScale, colorSchemeNames, locationValues };
diff --git a/dist/index.js b/dist/index.js
diff --git a/dist/index.js.map b/dist/index.js.map
diff --git a/dist/read/locationValues.d.ts b/dist/read/locationValues.d.ts
@@ -0,0 +1,3 @@
+import { Location } from '@/types';
+declare const locationValues: (url: string, { latitude, longitude }: Location, zoom?: number) => Promise<Array<number>>;
+export default locationValues;
diff --git a/dist/read/math.d.ts b/dist/read/math.d.ts
@@ -1,4 +1,5 @@
-import { Bbox, TileIndex } from '@/types';
+import { Bbox, LatLonZoom, TileIndex, TilePixel } from '@/types';
 export declare const tileIndexToMercatorBbox: ({ x, y, z }: TileIndex) => Bbox;
 export declare const mercatorBboxToGeographicBbox: ([xMin, yMin, xMax, yMax]: Bbox) => Bbox;
 export declare const zoomFromResolution: (res: number) => number;
+export declare const tilePixelFromLatLonZoom: ({ latitude, longitude, zoom }: LatLonZoom) => TilePixel;
diff --git a/photo.html b/photo.html
@@ -7,15 +7,30 @@
   <script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
   <script src="dist/index.js"></script>
   <style>
-    html, body, #map {
-      margin:0;
-      width: 100%;
-      height: 100%;
-    }
+      html, body, #map {
+          margin: 0;
+          width: 100%;
+          height: 100%;
+      }
+
+      #info {
+          display: none;
+          position: absolute;
+          top: 0;
+          left: 0;
+          background: #2d2d2d;
+          border: 1px solid #bbbbbb;
+          color: #bbbbbb;
+          padding: 6px;
+          border-radius: 5px;
+          font-family: monospace;
+          font-size: 18px;
+      }
   </style>
 </head>
 <body>
 <div id="map"></div>
+<div id="info"></div>
 <script>
   let map = new maplibregl.Map({
     container: 'map',
@@ -31,7 +46,7 @@
     map.addSource('imageSource', {
       type: 'raster',
       url: 'cog://./data/image.tif',
-      tileSize: 256,
+      tileSize: 256
     });
 
     map.addLayer({
@@ -41,6 +56,28 @@
     });
   });
 
+  map.on('drag', () => document.getElementById('info').style.display = 'none');
+
+  map.on('mousemove', (e) => {
+    const {lngLat: {lat: latitude, lng: longitude}, point: {x, y}} = e;
+    const zoom = map.getZoom();
+
+    document.getElementById('info').style.left = x + 10 + 'px';
+    document.getElementById('info').style.top = y + 20 + 'px';
+
+    MaplibreCOGProtocol.locationValues('./data/image.tif', {latitude, longitude}, zoom)
+      .then(([Y, Cb, Cr]) => {
+        if (isNaN(Y) || isNaN(Cb) || isNaN(Cr)) {
+          map.getCanvas().style.cursor = '';
+          document.getElementById('info').style.display = 'none';
+        } else {
+          map.getCanvas().style.cursor = 'default';
+          document.getElementById('info').style.display = 'block';
+          document.getElementById('info').innerHTML = `&nbsp;Y: <b>${Y}</b><br/>Cb: <b>${Cb}</b><br/>Cr: <b>${Cr}</b>`;
+        }
+      });
+  });
+
 </script>
 </body>
 </html>