Merge branch 'master' of https://github.com/traccar/traccar-web

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);