feat: add governed hydrology and historical imagery

frontend/src/components/GeoMap.tsx

@@ -3,7 +3,7 @@ import maplibregl from 'maplibre-gl'
 import 'maplibre-gl/dist/maplibre-gl.css'
 import { PRIMARY_FOCUS_CENTER } from '../config/primaryFocus'
 import { featureCollectionBounds } from '../lib/geojsonBounds'
-import type { MapViewportState, VectorSelectionBBox } from '../types'
+import type { MapImageOverlay, MapViewportState, VectorSelectionBBox } from '../types'
 
 interface GeoMapProps {
   data: GeoJSON.FeatureCollection | null
@@ -13,6 +13,7 @@ interface GeoMapProps {
   selectedFeature?: GeoJSON.Feature | null
   selectionData?: GeoJSON.FeatureCollection | null
   qaEvidenceData?: GeoJSON.FeatureCollection | null
+  imageOverlay?: MapImageOverlay | null
   selectionBbox?: { min_x: number; min_y: number; max_x: number; max_y: number } | null
   bboxSelectionMode?: boolean
   visible?: boolean
@@ -153,6 +154,7 @@ function GeoMap({
   selectedFeature = null,
   selectionData = null,
   qaEvidenceData = null,
+  imageOverlay = null,
   selectionBbox = null,
   bboxSelectionMode = false,
   visible = true,
@@ -346,6 +348,43 @@ function GeoMap({
     }
   }, [])
 
+  useEffect(() => {
+    const map = mapRef.current
+    if (!map || !mapStyleReady || !map.isStyleLoaded()) {
+      return
+    }
+    if (map.getLayer('bounded-orthophoto')) {
+      map.removeLayer('bounded-orthophoto')
+    }
+    if (map.getSource('bounded-orthophoto')) {
+      map.removeSource('bounded-orthophoto')
+    }
+    if (!imageOverlay) {
+      return
+    }
+    const [minX, minY, maxX, maxY] = imageOverlay.bbox
+    map.addSource('bounded-orthophoto', {
+      type: 'image',
+      url: imageOverlay.url,
+      coordinates: [
+        [minX, maxY],
+        [maxX, maxY],
+        [maxX, minY],
+        [minX, minY],
+      ],
+    })
+    const beforeLayer = ['area-fill', 'dataset-fill', 'selection-bbox-fill'].find((layerId) => map.getLayer(layerId))
+    map.addLayer(
+      {
+        id: 'bounded-orthophoto',
+        type: 'raster',
+        source: 'bounded-orthophoto',
+        paint: { 'raster-opacity': imageOverlay.opacity ?? 0.88 },
+      },
+      beforeLayer,
+    )
+  }, [imageOverlay, mapStyleReady])
+
   useEffect(() => {
     const map = mapRef.current
     if (!map || !mapStyleReady || !map.isStyleLoaded()) {