add point query on right-click to map viewer (#1100)

Author: hrodmn

CHANGES.md

@@ -6,6 +6,8 @@
 
 * add `output_min` and `output_max` metadata attributes to `slope` algorithm (@tayden, https://github.com/developmentseed/titiler/pull/1089)
 
+* add point value query on right-click to map viewer (@hrodmn, https://github.com/developmentseed/titiler/pull/1100)
+
 ## 0.21.1 (2025-01-29)
 
 ### titiler.core

src/titiler/core/titiler/core/factory.py

@@ -970,15 +970,19 @@ def map_viewer(
             tilejson_url = self.url_for(
                 request, "tilejson", tileMatrixSetId=tileMatrixSetId
             )
+            point_url = self.url_for(request, "point", lon="{lon}", lat="{lat}")
             if request.query_params._list:
-                tilejson_url += f"?{urlencode(request.query_params._list)}"
+                params = f"?{urlencode(request.query_params._list)}"
+                tilejson_url += params
+                point_url += params
 
             tms = self.supported_tms.get(tileMatrixSetId)
             return self.templates.TemplateResponse(
                 request,
                 name="map.html",
                 context={
                     "tilejson_endpoint": tilejson_url,
+                    "point_endpoint": point_url,
                     "tms": tms,
                     "resolutions": [matrix.cellSize for matrix in tms],
                 },

src/titiler/core/titiler/core/templates/map.html

@@ -221,6 +221,71 @@
         .catch(err => {
           console.warn(err);
         });
+      
+      // run point query on right-click
+      map.on('contextmenu', function(e) {
+        const lat = e.latlng.lat.toFixed(3);
+        const lng = e.latlng.lng.toFixed(3);
+
+        const popup = L.popup()
+          .setLatLng(e.latlng)
+          .setContent("<p>Loading point data...</p>")
+          .openOn(map);
+
+        fetch(`{{ point_endpoint|safe }}`.replace('{lat}', lat).replace('{lon}', lng))
+          .then(res => {
+            if (res.ok) return res.json();
+
+            return res.json().then(errorData => {
+              const error = new Error(errorData.detail || `Server error: ${res.status}`);
+              error.status = res.status;
+              error.errorData = errorData;
+              throw error;
+            })
+          })
+          .then(data => {
+            const formatPopupContent = (data) => {
+              let html = '<div style="max-width: 250px;">';
+
+              html += `<p><strong>Coordinates:</strong> ${lat}, ${lng}</p>`;
+
+              // single band case - just show the value
+              if (data.band_names.length === 1) {
+                const value = data.values[0] !== null ? data.values[0] : 'No data';
+                html += `<p><strong>Value:</strong> ${value}</p>`;
+              }
+              // multiple bands case - show in a table
+              else {
+                html += '<table style="width: 100%; border-collapse: collapse;">';
+                html += '<tr><th style="text-align: left; padding: 1px; border-bottom: 1px solid #ddd;">Band</th>' +
+                        '<th style="text-align: right; padding: 1px; border-bottom: 1px solid #ddd;">Value</th></tr>';
+
+                for (let i = 0; i < data.band_names.length; i++) {
+                  const value = data.values[i] !== null ? data.values[i] : 'No data';
+                  html += `<tr>
+                    <td style="text-align: left; padding: 1px;">${data.band_names[i]}</td>
+                    <td style="text-align: right; padding: 1px;">${value}</td>
+                  </tr>`;
+                }
+
+                html += '</table>';
+              }
+
+              html += '</div>';
+              return html;
+            };
+
+          popup.setContent(formatPopupContent(data));
+        })
+        .catch(err => {
+          if (err.errorData && err.errorData.detail) {
+            popup.setContent(`<p>${err.errorData.detail}</p>`);
+          } else {
+            popup.setContent(`<p>Error: ${err.message || 'An unknown error occurred'}</p>`);
+          }
+        });
+      });
+
     </script>
   </body>
 </html>