fix: refit Mol map after responsive resize

backend/tests/test_sprint186_map_first_geographic_explorer.py

@@ -42,6 +42,8 @@ def test_map_rectangle_drag_is_wired_to_automatic_analysis() -> None:
     assert "onMapBboxSelectRef.current?.(bbox)" in geomap
     assert "new ResizeObserver" in geomap
     assert "resizeObserver.observe(containerRef.current)" in geomap
+    assert "fitDataOnChangeRef.current" in geomap
+    assert "map.fitBounds(bounds, { padding: 40, duration: 0 })" in geomap
     assert "resizeObserver.disconnect()" in geomap
 
 

frontend/src/components/GeoMap.tsx

@@ -128,9 +128,16 @@ function GeoMap({
   const onMapBboxSelectRef = useRef<GeoMapProps['onMapBboxSelect']>(onMapBboxSelect)
   const onViewportChangeRef = useRef<GeoMapProps['onViewportChange']>(onViewportChange)
   const bboxSelectionModeRef = useRef(bboxSelectionMode)
+  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 [mapStyleReady, setMapStyleReady] = useState(false)
 
+  areaDataRef.current = areaData
+  dataRef.current = data
+  fitDataOnChangeRef.current = fitDataOnChange
+
   useEffect(() => {
     onFeatureSelectRef.current = onFeatureSelect
   }, [onFeatureSelect])
@@ -177,6 +184,13 @@ function GeoMap({
     })
     const resizeObserver = new ResizeObserver(() => {
       map.resize()
+      const fitCollection = fitDataOnChangeRef.current
+        ? mergeFeatureCollections([areaDataRef.current, dataRef.current])
+        : areaDataRef.current
+      const bounds = fitCollection ? collectCoordinates(fitCollection) : null
+      if (bounds && map.isStyleLoaded()) {
+        map.fitBounds(bounds, { padding: 40, duration: 0 })
+      }
     })
     resizeObserver.observe(containerRef.current)
     map.addControl(new maplibregl.NavigationControl(), 'top-right')