Keep selected area as map viewport

frontend/src/components/GeoMap.tsx

@@ -110,11 +110,6 @@ function collectCoordinates(featureCollection: GeoJSON.FeatureCollection): mapli
   ]
 }
 
-function mergeFeatureCollections(collections: Array<GeoJSON.FeatureCollection | null | undefined>): GeoJSON.FeatureCollection | null {
-  const features = collections.flatMap((collection) => collection?.features ?? [])
-  return features.length > 0 ? { type: 'FeatureCollection', features } : null
-}
-
 function bboxToFeatureCollection(
   bbox: { min_x: number; min_y: number; max_x: number; max_y: number } | null | undefined,
 ): GeoJSON.FeatureCollection {
@@ -179,7 +174,6 @@ function GeoMap({
   const areaDataRef = useRef<GeoJSON.FeatureCollection | null>(areaData)
   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)
 
@@ -233,9 +227,8 @@ function GeoMap({
     })
     const resizeObserver = new ResizeObserver(() => {
       map.resize()
-      const fitCollection = fitDataOnChangeRef.current
-        ? mergeFeatureCollections([areaDataRef.current, dataRef.current])
-        : areaDataRef.current
+      const fitCollection = areaDataRef.current
+        ?? (fitDataOnChangeRef.current ? dataRef.current : null)
       const bounds = fitCollection ? collectCoordinates(fitCollection) : null
       if (bounds && map.isStyleLoaded()) {
         map.fitBounds(bounds, { padding: 40, duration: 0 })
@@ -428,7 +421,7 @@ function GeoMap({
       })
     }
 
-    if (data && fitDataOnChange) {
+    if (data && fitDataOnChange && !areaData) {
       const collection = data
       if (collection.type === 'FeatureCollection' && collection.features.length > 0) {
         const bounds = collectCoordinates(collection)
@@ -437,7 +430,7 @@ function GeoMap({
         }
       }
     }
-  }, [data, dataFillColor, dataLineColor, fitDataOnChange, mapStyleReady])
+  }, [areaData, data, dataFillColor, dataLineColor, fitDataOnChange, mapStyleReady])
 
   useEffect(() => {
     const map = mapRef.current
@@ -500,20 +493,13 @@ function GeoMap({
       )
     }
 
-    const areaChanged = lastFittedAreaRef.current !== areaData
-    const activeCollection = areaChanged && areaData
-      ? areaData
-      : fitDataOnChange
-        ? mergeFeatureCollections([areaData, data])
-        : areaData
-    const shouldFitArea = fitDataOnChange || areaChanged
-    if (activeCollection && shouldFitArea) {
+    const activeCollection = areaData ?? (fitDataOnChange ? data : null)
+    if (activeCollection) {
       const bounds = collectCoordinates(activeCollection)
       if (bounds) {
         map.fitBounds(bounds, { padding: 40 })
       }
     }
-    lastFittedAreaRef.current = areaData
   }, [areaData, data, fitDataOnChange, mapStyleReady])
 
   useEffect(() => {