diff --git a/backend/tests/test_sprint186_map_first_geographic_explorer.py b/backend/tests/test_sprint186_map_first_geographic_explorer.py index 77096d6e..e2f562a6 100644 --- a/backend/tests/test_sprint186_map_first_geographic_explorer.py +++ b/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: diff --git a/frontend/src/components/GeoMap.tsx b/frontend/src/components/GeoMap.tsx index 621218a8..7384851d 100644 --- a/frontend/src/components/GeoMap.tsx +++ b/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)