Update maplibre to v3.6.2 (#190)

CHANGELOG.md

@@ -1,5 +1,7 @@
 ## Unreleased
 
+- Update Maplibre GL to `v3.6.2`
+
 ## 0.15.0
 
 - Switch to module for Stamen attribution

package.json

@@ -45,7 +45,7 @@
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
     "mapbox-gl": "^2.14.1",
-    "maplibre-gl": "^2.4.0",
+    "maplibre-gl": "^3.6.2",
     "postcss": "^8.4.23",
     "sirv-cli": "^1.0.0",
     "stamen-attribution": "github:stamen/stamen-attribution#v0.1.0",

src/components/GlMap.svelte

@@ -121,9 +121,9 @@
 
   onMount(async () => {
     await importRenderer();
-    const mapRenderer = renderer;
+    const glLibrary = renderer;
 
-    map = new mapRenderer.Map({
+    map = new glLibrary.Map({
       container: id,
       style: url,
       preserveDrawingBuffer: true,
@@ -156,7 +156,7 @@
       let renderedFeatures = map.queryRenderedFeatures(e.point);
       if (!renderedFeatures.length) return;
       if (!isPopupOpen) {
-        popup = new mapRenderer.Popup()
+        popup = new glLibrary.Popup()
           .setLngLat(e.lngLat)
           .setHTML(getPopupHtmlString(renderedFeatures))
           .setMaxWidth(360)
@@ -194,15 +194,18 @@
 
   // Resize the map when adding more maps and changing container size
   $: if (map && numberOfMaps) {
-    map.once('render', () => {
-      const container = document.getElementById(id);
-      if (container) {
-        const resizeObserver = new ResizeObserver(() => {
-          map.resize({ resize: true });
-        });
-        resizeObserver.observe(container);
-      }
-    });
+    // As of `v3.0.0` maplibre no longer needs this resizing: https://github.com/maplibre/maplibre-gl-js/blob/main/CHANGELOG.md#potentially-breaking-changes
+    if (mapRenderer !== 'maplibre-gl') {
+      map.once('render', () => {
+        const container = document.getElementById(id);
+        if (container) {
+          const resizeObserver = new ResizeObserver(() => {
+            map.resize({ resize: true });
+          });
+          resizeObserver.observe(container);
+        }
+      });
+    }
   }
 </script>
 

src/components/Map.svelte

@@ -43,6 +43,7 @@
       mapStyle: map,
       numberOfMaps: num,
     };
+    setMapComponent(mapRenderer);
   };
 
   const setMapComponent = mapRenderer => {