Reload images when the map style changes (#132)

dimfeld · Mar 3, 2024 · a66a3df · a66a3df
1 parent f5bfbb4
commit a66a3df
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 9 deletions.
diff --git a/.changeset/pink-cars-sit.md b/.changeset/pink-cars-sit.md
@@ -0,0 +1,5 @@
+---
+"svelte-maplibre": patch
+---
+
+Reload images when the map style changes
diff --git a/src/lib/MapLibre.svelte b/src/lib/MapLibre.svelte
@@ -77,8 +77,12 @@
   $: map = $mapInstance;
 
   let loadingImages = new Set();
-  async function loadImage(image: CustomImageSpec) {
-    if (!$mapInstance?.loaded()) {
+  async function loadImage(image: CustomImageSpec, force = false) {
+    if (!$mapInstance) {
+      return;
+    }
+
+    if (!$mapInstance.loaded() && !force) {
       return;
     }
 
@@ -103,7 +107,11 @@
 
   $: if (loaded && $mapInstance?.loaded()) {
     for (let image of images) {
-      if (!loadingImages.has(image.id) && !$mapInstance.hasImage(image.id)) {
+      if (
+        !$loadedImages.has(image.id) &&
+        !loadingImages.has(image.id) &&
+        !$mapInstance.hasImage(image.id)
+      ) {
         loadImage(image);
       }
     }
@@ -158,7 +166,7 @@
 
     $mapInstance.on('load', (e) => {
       loaded = true;
-      dispatch('load', $mapInstance);
+      dispatch('load', $mapInstance!);
     });
 
     $mapInstance.on('error', (e) => dispatch('error', { ...e, map: $mapInstance }));
@@ -205,6 +213,13 @@
             $mapInstance.addLayer(layer);
           }
         }
+
+        // Need to reload images as well when the style is changed.
+        for (const image of images) {
+          // Force the image to reload, since when this runs $mapInstance.loaded() == false
+          // but it's actually safe to do so.
+          loadImage(image, true);
+        }
       }
     });
 
@@ -262,6 +277,10 @@
     }
     lastStyle = style;
     $mapInstance.setStyle(style, { diff: diffStyleUpdates });
+
+    // Changing the style unloads the images. We'll reload them after the map finishes loading the new style.
+    $loadedImages = new Set();
+    loadingImages = new Set();
   }
 
   $: if (center && !compare(center, $mapInstance?.getCenter())) $mapInstance?.panTo(center);

diff --git a/src/routes/examples/changing_basemap_style/+page.svelte b/src/routes/examples/changing_basemap_style/+page.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
-  import MapLibre from '$lib/MapLibre.svelte';
-  import GeoJSON from '$lib/GeoJSON.svelte';
-  import FillLayer from '$lib/FillLayer.svelte';
-  import LineLayer from '$lib/LineLayer.svelte';
+  import { SymbolLayer, MapLibre, GeoJSON, FillLayer, LineLayer } from '$lib';
   import { mapClasses } from '../styles.js';
   import code from './+page.svelte?raw';
   import CodeSample from '$site/CodeSample.svelte';
   import states from '$site/states.json?url';
   import type { FeatureCollection } from 'geojson';
+  import quakeImageUrl from '$site/earthquake.png';
+  import tsunamiImageUrl from '$site/tsunami.png';
 
   let showBorder = true;
   let showFill = true;
@@ -41,6 +40,28 @@
     ],
   } as FeatureCollection;
 
+  const pointsData = {
+    type: 'FeatureCollection',
+    features: [
+      {
+        type: 'Feature',
+        properties: { image: 'quake' },
+        geometry: {
+          type: 'Point',
+          coordinates: [-127.5, 45.5],
+        },
+      },
+      {
+        type: 'Feature',
+        properties: { image: 'tsunami' },
+        geometry: {
+          type: 'Point',
+          coordinates: [-91.6, 28.7],
+        },
+      },
+    ],
+  } as FeatureCollection;
+
   let dataOption: 'states' | 'colorado' = 'states';
   $: dataset = dataOption === 'states' ? states : coloradoPolygon;
 </script>
@@ -57,7 +78,17 @@
   </select>
 </div>
 
-<MapLibre {style} class={mapClasses} standardControls center={[-98.137, 40.137]} zoom={4}>
+<MapLibre
+  {style}
+  class={mapClasses}
+  standardControls
+  center={[-98.137, 40.137]}
+  zoom={3}
+  images={[
+    { id: 'quake', url: quakeImageUrl },
+    { id: 'tsunami', url: tsunamiImageUrl },
+  ]}
+>
   <GeoJSON id="states" data={dataset} promoteId="STATEFP">
     {#if showFill}
       <FillLayer
@@ -76,6 +107,14 @@
       />
     {/if}
   </GeoJSON>
+
+  <GeoJSON data={pointsData}>
+    <SymbolLayer
+      layout={{
+        'icon-image': ['get', 'image'],
+      }}
+    />
+  </GeoJSON>
 </MapLibre>
 
 <CodeSample {code} />