Fix/map point query mosaic (#1338)

* fix: make point query work for mosaic factory in map.html

* fix: do not render asset name

* fix: gracefully handle 204/nodata responses

* chore: update changelog

Author: hrodmn

CHANGES.md

@@ -13,6 +13,7 @@
 ### titiler.mosaic
 
 * fix: `pixel-selection` method initialization to avoid FastAPI caching (author @raster-blaster, https://github.com/developmentseed/titiler/pull/1334)
+* fix: make the point query feature in map.html work for MosaicTilerFactory (https://github.com/developmentseed/titiler/pull/1338)
 
 ## 2.0.0b2 (2026-02-22)
 

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

@@ -249,6 +249,7 @@
 
         fetch(`{{ point_endpoint|safe }}`.replace('{lat}', lat).replace('{lon}', lng))
           .then(res => {
+            if (res.status === 204) return null;
             if (res.ok) return res.json();
 
             return res.json().then(errorData => {
@@ -259,31 +260,44 @@
             })
           })
           .then(data => {
-            const formatPopupContent = (data) => {
-              let html = '<div style="max-width: 250px;">';
-
-              html += `<p><strong>Coordinates:</strong> ${lat}, ${lng}</p>`;
+            if (data === null) {
+              popup.setContent(`<p>No data at ${lat}, ${lng}</p>`);
+              return;
+            }
 
-              // 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>`;
+            const renderBandTable = (bandNames, values) => {
+              if (bandNames.length === 1) {
+                const value = values[0] !== null ? values[0] : 'No data';
+                return `<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>`;
-                }
+              let 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 < bandNames.length; i++) {
+                const value = values[i] !== null ? values[i] : 'No data';
+                html += `<tr>
+                  <td style="text-align: left; padding: 1px;">${bandNames[i]}</td>
+                  <td style="text-align: right; padding: 1px;">${value}</td>
+                </tr>`;
+              }
+              html += '</table>';
+              return html;
+            };
 
-                html += '</table>';
+            const formatPopupContent = (data) => {
+              let html = `<div style="max-width: 250px;">
+    <p><strong>Coordinates:</strong> ${lat}, ${lng}</p>`;
+
+              if (data.values !== undefined) {
+                // TilerFactory shape: flat band list
+                html += renderBandTable(data.band_names, data.values);
+              } else if (data.assets !== undefined) {
+                // MosaicTilerFactory shape: one entry per asset
+                for (const asset of data.assets) {
+                  html += renderBandTable(asset.band_names, asset.values);
+                }
               }
 
               html += '</div>';

src/titiler/mosaic/titiler/mosaic/factory.py

@@ -836,12 +836,33 @@ def map_viewer(
 
             tilejson_url += f"?{urlencode(qs)}"
 
+            point_url = self.url_for(request, "point", lon="{lon}", lat="{lat}")
+            if request.query_params._list:
+                qs_key_to_remove = [
+                    "tilesize",
+                    "tile_format",
+                    "minzoom",
+                    "maxzoom",
+                    "buffer",
+                    "padding",
+                    "colormap",
+                    "colormap_name",
+                ]
+                qs = [
+                    (key, value)
+                    for (key, value) in request.query_params._list
+                    if key.lower() not in qs_key_to_remove
+                ]
+                if qs:
+                    point_url += f"?{urlencode(qs)}"
+
             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],
                 },