fix: keep map canvas synchronized with workspace

backend/tests/test_sprint186_map_first_geographic_explorer.py

@@ -40,6 +40,9 @@ def test_map_rectangle_drag_is_wired_to_automatic_analysis() -> None:
     assert "map.on('mousemove'" in geomap
     assert "map.on('mouseup'" in geomap
     assert "onMapBboxSelectRef.current?.(bbox)" in geomap
+    assert "new ResizeObserver" in geomap
+    assert "resizeObserver.observe(containerRef.current)" in geomap
+    assert "resizeObserver.disconnect()" in geomap
 
 
 def test_dataset_detail_responses_cannot_overwrite_the_latest_map_layer() -> None:

frontend/src/components/GeoMap.tsx

@@ -175,6 +175,10 @@ function GeoMap({
       zoom: 11,
       attributionControl: false,
     })
+    const resizeObserver = new ResizeObserver(() => {
+      map.resize()
+    })
+    resizeObserver.observe(containerRef.current)
     map.addControl(new maplibregl.NavigationControl(), 'top-right')
     map.addControl(
       new maplibregl.AttributionControl({
@@ -196,6 +200,7 @@ function GeoMap({
       })
     }
     map.on('load', () => {
+      map.resize()
       setMapStyleReady(true)
       emitViewport()
     })
@@ -274,6 +279,7 @@ function GeoMap({
     mapRef.current = map
 
     return () => {
+      resizeObserver.disconnect()
       map.remove()
       mapRef.current = null
       setMapStyleReady(false)