Fix map switches

2 files changed, 21 insertions, 17 deletions

diff --git a/modern/src/map/Map.js b/modern/src/map/Map.js
index c2861ed..3afa48d 100644
--- a/modern/src/map/Map.js
+++ b/modern/src/map/Map.js
@@ -40,21 +40,23 @@ const updateReadyValue = (value) => {
 
 const initMap = async () => {
   if (ready) return;
-  const background = await loadImage('images/background.svg');
-  map.addImage('background', await prepareIcon(background), {
-    pixelRatio: window.devicePixelRatio,
-  });
-  await Promise.all(deviceCategories.map(async (category) => {
-    const results = [];
-    ['green', 'red', 'gray'].forEach((color) => {
-      results.push(loadImage(`images/icon/${category}.svg`).then((icon) => {
-        map.addImage(`${category}-${color}`, prepareIcon(background, icon, palette.common[color]), {
-          pixelRatio: window.devicePixelRatio,
-        });
-      }));
+  if (!map.hasImage('background')) {
+    const background = await loadImage('images/background.svg');
+    map.addImage('background', await prepareIcon(background), {
+      pixelRatio: window.devicePixelRatio,
     });
-    await Promise.all(results);
-  }));
+    await Promise.all(deviceCategories.map(async (category) => {
+      const results = [];
+      ['green', 'red', 'gray'].forEach((color) => {
+        results.push(loadImage(`images/icon/${category}.svg`).then((icon) => {
+          map.addImage(`${category}-${color}`, prepareIcon(background, icon, palette.common[color]), {
+            pixelRatio: window.devicePixelRatio,
+          });
+        }));
+      });
+      await Promise.all(results);
+    }));
+  }
   updateReadyValue(true);
 };
 
diff --git a/modern/src/map/switcher/switcher.js b/modern/src/map/switcher/switcher.js
index 643b6ec..a3805f6 100644
--- a/modern/src/map/switcher/switcher.js
+++ b/modern/src/map/switcher/switcher.js
@@ -30,15 +30,17 @@ export class SwitcherControl {
       styleElement.type = 'button';
       styleElement.innerText = style.title;
       styleElement.classList.add(style.title.replace(/[^a-z0-9-]/gi, '_'));
-      styleElement.dataset.uri = style.uri;
+      styleElement.dataset.uri = JSON.stringify(style.uri);
       styleElement.addEventListener('click', (event) => {
         const { srcElement } = event;
         if (srcElement.classList.contains('active')) {
           return;
         }
         this.beforeSwitch();
-        let uri = srcElement.dataset.uri;
-        Object.entries(this.variables).forEach(([key, value]) => uri = uri.replaceAll(`$\{${key}}`, value));
+        let uri = JSON.parse(srcElement.dataset.uri);
+        if (typeof uri === 'string') {
+          Object.entries(this.variables).forEach(([key, value]) => uri = uri.replaceAll(`$\{${key}}`, value));
+        }
         this.map.setStyle(uri);
         this.afterSwitch();
         this.mapStyleContainer.style.display = 'none';