Complete regional raster exploration

frontend/src/components/GeoMap.tsx

@@ -13,7 +13,7 @@ interface GeoMapProps {
   selectedFeature?: GeoJSON.Feature | null
   selectionData?: GeoJSON.FeatureCollection | null
   qaEvidenceData?: GeoJSON.FeatureCollection | null
-  imageOverlay?: MapImageOverlay | null
+  imageOverlays?: MapImageOverlay[]
   selectionBbox?: { min_x: number; min_y: number; max_x: number; max_y: number } | null
   bboxSelectionMode?: boolean
   visible?: boolean
@@ -154,7 +154,7 @@ function GeoMap({
   selectedFeature = null,
   selectionData = null,
   qaEvidenceData = null,
-  imageOverlay = null,
+  imageOverlays = [],
   selectionBbox = null,
   bboxSelectionMode = false,
   visible = true,
@@ -180,6 +180,7 @@ function GeoMap({
   const dataRef = useRef<GeoJSON.FeatureCollection | null>(data)
   const fitDataOnChangeRef = useRef(fitDataOnChange)
   const lastFittedAreaRef = useRef<GeoJSON.FeatureCollection | null>(null)
+  const imageOverlayIdsRef = useRef<string[]>([])
   const [mapStyleReady, setMapStyleReady] = useState(false)
 
   areaDataRef.current = areaData
@@ -353,37 +354,38 @@ function GeoMap({
     if (!map || !mapStyleReady || !map.isStyleLoaded()) {
       return
     }
-    if (map.getLayer('bounded-orthophoto')) {
-      map.removeLayer('bounded-orthophoto')
+    for (const overlayId of [...imageOverlayIdsRef.current].reverse()) {
+      if (map.getLayer(overlayId)) {
+        map.removeLayer(overlayId)
+      }
+      if (map.getSource(overlayId)) {
+        map.removeSource(overlayId)
+      }
     }
-    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],
-      ],
-    })
+    imageOverlayIdsRef.current = []
     const beforeLayer = ['area-fill', 'dataset-fill', 'selection-bbox-fill'].find((layerId) => map.getLayer(layerId))
-    map.addLayer(
-      {
-        id: 'bounded-orthophoto',
+    imageOverlays.forEach((imageOverlay, index) => {
+      const overlayId = `bounded-raster-${index}`
+      const [minX, minY, maxX, maxY] = imageOverlay.bbox
+      map.addSource(overlayId, {
+        type: 'image',
+        url: imageOverlay.url,
+        coordinates: [
+          [minX, maxY],
+          [maxX, maxY],
+          [maxX, minY],
+          [minX, minY],
+        ],
+      })
+      map.addLayer({
+        id: overlayId,
         type: 'raster',
-        source: 'bounded-orthophoto',
+        source: overlayId,
         paint: { 'raster-opacity': imageOverlay.opacity ?? 0.88 },
-      },
-      beforeLayer,
-    )
-  }, [imageOverlay, mapStyleReady])
+      }, beforeLayer)
+      imageOverlayIdsRef.current.push(overlayId)
+    })
+  }, [imageOverlays, mapStyleReady])
 
   useEffect(() => {
     const map = mapRef.current