initial work to get inspection into viewer

src/components/ogm-viewer/ogm-viewer.tsx

@@ -4,6 +4,7 @@ import maplibregl from 'maplibre-gl';
 import { cogProtocol } from '@geomatico/maplibre-cog-protocol';
 
 import { OgmRecord } from '../../utils/record';
+import { addLayerInspection } from '../../utils/inspection';
 import { getPreviewSource, getPreviewLayers, getBoundsPreviewSource, getBoundsPreviewLayers } from '../../utils/sources';
 
 // Only need to call this once, at the top level
@@ -149,7 +150,7 @@ export class OgmViewer {
       const previewLayers = getPreviewLayers(this.record, previewSource);
       if (previewLayers && !this.record.restricted) {
         this.previewLayerIds = previewLayers.map(layer => layer.id);
-        previewLayers.forEach(layer => this.map.addLayer(layer));
+        previewLayers.forEach(layer => this.addLayerInspection(layer, previewSource.infoUrl));
       }
     }
 
@@ -170,6 +171,11 @@ export class OgmViewer {
     if (bounds) this.map.fitBounds(bounds, { padding: 40 });
   }
 
+  addLayerInspection(layer, infoUrl){
+    this.map.addLayer(layer)
+    addLayerInspection(layer.source, infoUrl, this.record.references, this.map)
+  }
+
   // Style the preview layers based on the current theme (vectors only)
   setPreviewFill() {
     const layerIds = this.boundsLayerIds.concat(this.previewLayerIds);

src/utils/inspection.ts

@@ -0,0 +1,55 @@
+import { LngLat } from "maplibre-gl"
+import { References } from "./references";
+import maplibregl from 'maplibre-gl';
+
+export const addLayerInspection = (layer_id: string, infoUrl: string, references: References, map: maplibregl.Map) => {
+  map.on('click', (e) => {
+    if (references.wms) recordWMSInspection(layer_id, infoUrl, map, e.lngLat)
+  })
+}
+
+const recordWMSInspection = (layer_id: string, infoUrl: String, map: maplibregl.Map, lngLat: LngLat) => {
+  const bbox = map.getBounds();
+  const width = map.getCanvas().width;
+  const height = map.getCanvas().height;
+
+  const point = map.project(lngLat);
+  const params = new URLSearchParams([
+    ['SERVICE', 'WMS'],
+    ['REQUEST', 'GetFeatureInfo'],
+    ['VERSION', '1.1.1'],
+    ['LAYERS', layer_id.split('-').slice(-1)[0]],
+    ['QUERY_LAYERS', layer_id.split('-').slice(-1)[0]],
+    ['STYLES', ''],
+    ['SRS', 'EPSG:4326'],
+    ['BBOX', `${bbox.getWest()},${bbox.getSouth()},${bbox.getEast()},${bbox.getNorth()}`],
+    ['WIDTH', width.toString()],
+    ['HEIGHT', height.toString()],
+    ['FORMAT', 'image/png'],
+    ['INFO_FORMAT', 'application/json'],
+    ['X', Math.round(point.x).toString()],
+    ['Y', Math.round(point.y).toString()],
+  ]);
+
+  const url = `${infoUrl}?${params.toString()}`;
+
+  fetch(url)
+    .then(r => r.json()) // adjust if you use text/html
+    .then(data => {
+      new maplibregl.Popup({className: 'my-class'})
+        .setLngLat(lngLat)
+        .setHTML(`<div>${mapFeatureContent(data.features)}</div>`)
+        .setMaxWidth("300px")
+        .addTo(map);
+    })
+}
+
+const mapFeatureContent = (features: any[]) => {
+  let html = ''
+  features.forEach((feature) => {
+    for (const [key, value] of Object.entries(feature.properties)) {
+    html += `<div class="line-container"><div class="label">${key}</div><div class="value">${value}</div></div>`
+    }
+  });
+  return html
+}

src/utils/sources.ts

@@ -1,7 +1,7 @@
 import type { SourceSpecification, AddLayerObject } from 'maplibre-gl';
 import type { OgmRecord } from './record';
 
-type AddSourceObject = { id: string; source: SourceSpecification };
+type AddSourceObject = { id: string; source: SourceSpecification, infoUrl?: string };
 type LayerType = Exclude<AddLayerObject['type'], 'custom'>;
 
 // Given a record, generate the appropriate source for previewing the data
@@ -178,7 +178,7 @@ const recordWMSSource = (record: OgmRecord): AddSourceObject => {
   // Generate the source spec with a unique ID based on the record
   const source = createWMSSource({ wmsUrl, layerIds, attribution: record.attribution });
   const id = record.id;
-  return { id, source };
+  return { id, source, infoUrl: wmsUrl };
 };
 
 // Create a MapLibre raster source specification object for a WMS layer