aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAnton Tananaev <anton.tananaev@gmail.com>2021-08-21 16:12:32 -0700
committerAnton Tananaev <anton.tananaev@gmail.com>2021-08-21 16:12:32 -0700
commitbe69f7ea8f58b65cfe164ac77ec5feb74755fb76 (patch)
treefff3971932d3bd1361bb66d7e32e93c9f76837e7
parent946b6d807dc7625b02d4bd48de8da8682e3a3584 (diff)
downloadtrackermap-web-be69f7ea8f58b65cfe164ac77ec5feb74755fb76.tar.gz
trackermap-web-be69f7ea8f58b65cfe164ac77ec5feb74755fb76.tar.bz2
trackermap-web-be69f7ea8f58b65cfe164ac77ec5feb74755fb76.zip
Support MapTiler maps
-rw-r--r--modern/src/map/Map.js15
-rw-r--r--modern/src/map/switcher/switcher.js11
-rw-r--r--web/l10n/en.json1
3 files changed, 22 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';
diff --git a/web/l10n/en.json b/web/l10n/en.json
index 617a7e95..af20b1a4 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",