diff options
| -rw-r--r-- | modern/src/map/Map.js | 15 | ||||
| -rw-r--r-- | modern/src/map/switcher/switcher.js | 11 | ||||
| -rw-r--r-- | web/l10n/en.json | 1 |
3 files changed, 22 insertions, 5 deletions
diff --git a/modern/src/map/Map.js b/modern/src/map/Map.js index 7dd1c2a..c2861ed 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 e9076aa..014a35e 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'; diff --git a/web/l10n/en.json b/web/l10n/en.json index 617a7e9..af20b1a 100644 --- a/web/l10n/en.json +++ b/web/l10n/en.json @@ -261,6 +261,7 @@ "mapMapboxStreets": "Mapbox Streets", "mapMapboxOutdoors": "Mapbox Outdoors", "mapMapboxSatellite": "Mapbox Satellite", + "mapMapTilerBasic": "MapTiler Basic", "mapShapePolygon": "Polygon", "mapShapeCircle": "Circle", "mapShapePolyline": "Polyline", |