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

2 files changed, 8 insertions, 2 deletions

diff --git a/modern/src/map/Map.js b/modern/src/map/Map.js
index 5e182a4..dcf5a92 100644
--- a/modern/src/map/Map.js
+++ b/modern/src/map/Map.js
@@ -8,7 +8,7 @@ import { SwitcherControl } from './switcher/switcher';
 import deviceCategories from '../common/deviceCategories';
 import { prepareIcon, loadImage } from './mapUtil';
 import {
-  styleCarto, styleMapbox, styleMapTiler, styleOsm,
+  styleCarto, styleLocationIq, styleMapbox, styleMapTiler, styleOsm,
 } from './mapStyles';
 import { useAttributePreference } from '../common/preferences';
 import palette from '../theme/palette';
@@ -89,6 +89,7 @@ const Map = ({ children }) => {
 
   const mapboxAccessToken = useAttributePreference('mapboxAccessToken');
   const mapTilerKey = useAttributePreference('mapTilerKey');
+  const locationIqKey = useAttributePreference('locationIqKey', 'pk.0f147952a41c555a5b70614039fd148b');
 
   useEffect(() => {
     maplibregl.accessToken = mapboxAccessToken;
@@ -96,6 +97,9 @@ const Map = ({ children }) => {
 
   useEffect(() => {
     switcher.updateStyles([
+      { id: 'locationIqStreets', title: t('mapLocationIqStreets'), uri: styleLocationIq('streets', locationIqKey) },
+      { id: 'locationIqEarth', title: t('mapLocationIqEarth'), uri: styleLocationIq('earth', locationIqKey) },
+      { id: 'locationIqHybrid', title: t('mapLocationIqHybrid'), uri: styleLocationIq('hybrid', locationIqKey) },
       { id: 'osm', title: t('mapOsm'), uri: styleOsm() },
       { id: 'carto', title: t('mapCarto'), uri: styleCarto() },
       { id: 'mapboxStreets', title: t('mapMapboxStreets'), uri: styleMapbox('streets-v11') },
@@ -103,7 +107,7 @@ const Map = ({ children }) => {
       { id: 'mapboxSatellite', title: t('mapMapboxSatellite'), uri: styleMapbox('satellite-v9') },
       { id: 'mapTilerBasic', title: t('mapMapTilerBasic'), uri: styleMapTiler('basic', mapTilerKey) },
       { id: 'mapTilerHybrid', title: t('mapMapTilerHybrid'), uri: styleMapTiler('hybrid', mapTilerKey) },
-    ], 'osm');
+    ], 'locationIqStreets');
   }, [mapTilerKey]);
 
   useEffect(() => {
diff --git a/modern/src/map/mapStyles.js b/modern/src/map/mapStyles.js
index 9650ead..86813a1 100644
--- a/modern/src/map/mapStyles.js
+++ b/modern/src/map/mapStyles.js
@@ -51,3 +51,5 @@ export const styleCarto = () => ({
 export const styleMapbox = (style) => `mapbox://styles/mapbox/${style}`;
 
 export const styleMapTiler = (style, key) => `https://api.maptiler.com/maps/${style}/style.json?key=${key}`;
+
+export const styleLocationIq = (style, key) => `https://tiles.locationiq.com/v3/${style}/vector.json?key=${key}`;