fix(POI Maps): add map resize observer

opendatasoft · Sep 21, 2023 · 3345da0 · 3345da0
1 parent 4e7b43d
commit 3345da0
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 2 deletions.
diff --git a/packages/visualizations/src/components/MapPoi/Map.ts b/packages/visualizations/src/components/MapPoi/Map.ts
@@ -1,4 +1,5 @@
 import type { BBox } from 'geojson';
+import { debounce } from 'lodash';
 import maplibregl, {
     LngLatBoundsLike,
     LngLatLike,
@@ -13,6 +14,8 @@ const DEFAULT_CENTER: LngLatLike = [3.5, 46];
 export default class MapPOI {
     private map: maplibregl.Map | null = null;
 
+    private mapResizeObserver: ResizeObserver | null = null;
+
     private isReady = false;
 
     private baseStyle: StyleSpecification | null = null;
@@ -31,12 +34,25 @@ export default class MapPOI {
         this.queuedFunctions = [];
     }
 
+    private initializeMapResizer(map: maplibregl.Map, container: HTMLElement) {
+        // Set a resizeObserver to resize map on container size changes
+        this.mapResizeObserver = new ResizeObserver(
+            debounce(() => {
+                map.resize();
+            }, 100)
+        );
+        this.mapResizeObserver.observe(container);
+    }
+
     initialize(
         style: MapOptions['style'],
         container: HTMLElement,
         options: Omit<MapOptions, 'style' | 'container'>
     ) {
         this.map = new maplibregl.Map({ style, container, center: DEFAULT_CENTER, ...options });
+
+        this.queue((map) => this.initializeMapResizer(map, container));
+
         this.map.on('load', () => {
             this.isReady = true;
             // Store base style after the first loads
@@ -47,8 +63,9 @@ export default class MapPOI {
         });
     }
 
-    remove() {
+    destroy() {
         this.queue((map) => map.remove());
+        this.mapResizeObserver?.disconnect();
     }
 
     // TODO: add tests to check that layers are at the end of the array

diff --git a/packages/visualizations/src/components/MapPoi/MapRender.svelte b/packages/visualizations/src/components/MapPoi/MapRender.svelte
@@ -27,7 +27,7 @@
 
     // Lifecycle
     onMount(() => map.initialize(style, container, { bounds: bbox as LngLatBoundsLike }));
-    onDestroy(() => map.remove());
+    onDestroy(() => map.destroy());
 </script>
 
 <figure class="map-card maps-container" style={cssVarStyles}>