2 files changed, 21 insertions, 5 deletions

diff --git a/modern/src/map/Map.js b/modern/src/map/Map.js
index 7dd1c2a8..c2861ed5 100644
--- a/modern/src/map/Map.js
+++ b/modern/src/map/Map.js
@@ -7,7 +7,7 @@ import React, {
 import { SwitcherControl } from './switcher/switcher';
 import deviceCategories from '../common/deviceCategories';
 import { prepareIcon, loadImage } from './mapUtil';
-import { styleCarto, styleMapbox, styleOsm } from './mapStyles';
+import { styleCarto, styleMapbox, styleMapTiler, styleOsm } from './mapStyles';
 import t from '../common/localization';
 import { useAttributePreference } from '../common/preferences';
 import palette from '../theme/palette';
@@ -64,13 +64,14 @@ map.addControl(new maplibregl.NavigationControl({
   showCompass: false,
 }));
 
-map.addControl(new SwitcherControl(
+const switcher = new SwitcherControl(
   [
     { title: t('mapOsm'), uri: styleOsm() },
     { title: t('mapCarto'), uri: styleCarto() },
     { title: t('mapMapboxStreets'), uri: styleMapbox('streets-v11') },
     { title: t('mapMapboxOutdoors'), uri: styleMapbox('outdoors-v11') },
     { title: t('mapMapboxSatellite'), uri: styleMapbox('satellite-v9') },
+    { title: t('mapMapTilerBasic'), uri: styleMapTiler('basic', '${mapTilerKey}') },
   ],
   t('mapOsm'),
   () => updateReadyValue(false),
@@ -84,7 +85,9 @@ map.addControl(new SwitcherControl(
     };
     waiting();
   },
-));
+);
+
+map.addControl(switcher);
 
 const Map = ({ children }) => {
   const containerEl = useRef(null);
@@ -97,6 +100,12 @@ const Map = ({ children }) => {
     maplibregl.accessToken = mapboxAccessToken;
   }, [mapboxAccessToken]);
 
+  const mapTilerKey = useAttributePreference('mapTilerKey');
+
+  useEffect(() => {
+    switcher.setVariable('mapTilerKey', mapTilerKey);
+  }, [mapTilerKey]);
+
   useEffect(() => {
     const listener = (ready) => setMapReady(ready);
     addReadyListener(listener);
diff --git a/modern/src/map/switcher/switcher.js b/modern/src/map/switcher/switcher.js
index e9076aa6..014a35e0 100644
--- a/modern/src/map/switcher/switcher.js
+++ b/modern/src/map/switcher/switcher.js
@@ -5,12 +5,17 @@ export class SwitcherControl {
     this.beforeSwitch = beforeSwitch;
     this.afterSwitch = afterSwitch;
     this.onDocumentClick = this.onDocumentClick.bind(this);
+    this.variables = {};
   }
 
   getDefaultPosition() {
     return 'top-right';
   }
 
+  setVariable(key, value) {
+    this.variables[key] = value;
+  }
+
   onAdd(map) {
     this.map = map;
     this.controlContainer = document.createElement('div');
@@ -25,14 +30,16 @@ export class SwitcherControl {
       styleElement.type = 'button';
       styleElement.innerText = style.title;
       styleElement.classList.add(style.title.replace(/[^a-z0-9-]/gi, '_'));
-      styleElement.dataset.uri = JSON.stringify(style.uri);
+      styleElement.dataset.uri = style.uri;
       styleElement.addEventListener('click', (event) => {
         const { srcElement } = event;
         if (srcElement.classList.contains('active')) {
           return;
         }
         this.beforeSwitch();
-        this.map.setStyle(JSON.parse(srcElement.dataset.uri));
+        let uri = srcElement.dataset.uri;
+        Object.entries(this.variables).forEach(([key, value]) => uri = uri.replaceAll(`\$\{${key}\}`, value));
+        this.map.setStyle(uri);
         this.afterSwitch();
         this.mapStyleContainer.style.display = 'none';
         this.styleButton.style.display = 'block';