aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
authorrahighi <rahighi>2021-08-26 13:18:03 +0430
committerrahighi <rahighi>2021-08-26 13:18:03 +0430
commit9c8bd2089e2be7ebc0e504f21bc5e7c2a8ef0292 (patch)
tree15bcf21947d7efc42276c24a33a47472267f298e /modern
parentd4c38aa96f8404f3178031592e773a72b30df533 (diff)
parente83a51c9f14b7ddb45e4de155741e37df3e25c25 (diff)
downloadtrackermap-web-9c8bd2089e2be7ebc0e504f21bc5e7c2a8ef0292.tar.gz
trackermap-web-9c8bd2089e2be7ebc0e504f21bc5e7c2a8ef0292.tar.bz2
trackermap-web-9c8bd2089e2be7ebc0e504f21bc5e7c2a8ef0292.zip
Merge branch 'master' of https://github.com/traccar/traccar-web
Diffstat (limited to 'modern')
-rw-r--r--modern/src/map/Map.js47
1 files changed, 28 insertions, 19 deletions
diff --git a/modern/src/map/Map.js b/modern/src/map/Map.js
index bcd9b9f0..4ba36554 100644
--- a/modern/src/map/Map.js
+++ b/modern/src/map/Map.js
@@ -7,8 +7,10 @@ import React, {
import { SwitcherControl } from './switcher/switcher';
import deviceCategories from '../common/deviceCategories';
import { prepareIcon, loadImage } from './mapUtil';
-import { styleCarto, styleMapbox, styleOsm } from './mapStyles';
import t, { useLocalization } from '../common/localization';
+import {
+ styleCarto, styleMapbox, styleMapTiler, styleOsm,
+} from './mapStyles';
import { useAttributePreference } from '../common/preferences';
import palette from '../theme/palette';
@@ -40,21 +42,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);
};
@@ -67,6 +71,8 @@ const switcher = new SwitcherControl(
{ 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}') },
+ { title: t('mapMapTilerHybrid'), uri: styleMapTiler('hybrid', '{mapTilerKey}') },
],
t('mapOsm'),
() => updateReadyValue(false),
@@ -82,10 +88,6 @@ const switcher = new SwitcherControl(
},
);
-const navigationControl = new maplibregl.NavigationControl({
- showCompass: false,
-})
-
const addPrimaryControls = position => {
map.addControl(navigationControl, position);
map.addControl(switcher, position);
@@ -97,6 +99,7 @@ const removePrimaryControls =()=> {
}
+map.addControl(switcher);
const Map = ({ children }) => {
const containerEl = useRef(null);
@@ -115,6 +118,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);