From 0aecbc3bf856b17f42e363eff2bac4fb0ce1f7ed Mon Sep 17 00:00:00 2001
From: Anton Tananaev <anton@traccar.org>
Date: Sat, 11 Jun 2022 16:51:50 -0700
Subject: Preference for map layers

---
 modern/src/map/core/MapView.js         | 11 ++++++-----
 modern/src/map/switcher/switcher.js    |  2 +-
 modern/src/settings/PreferencesPage.js | 17 +++++++++++++++++
 web/l10n/en.json                       |  1 +
 4 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/modern/src/map/core/MapView.js b/modern/src/map/core/MapView.js
index 1e16e4dc..20e84185 100644
--- a/modern/src/map/core/MapView.js
+++ b/modern/src/map/core/MapView.js
@@ -52,7 +52,7 @@ map.addControl(new maplibregl.NavigationControl());
 
 const switcher = new SwitcherControl(
   () => updateReadyValue(false),
-  (layerId) => savePersistedState('mapLayer', layerId),
+  (styleId) => savePersistedState('selectedMapStyle', styleId),
   () => {
     map.once('styledata', () => {
       const waiting = () => {
@@ -75,7 +75,8 @@ const MapView = ({ children }) => {
   const [mapReady, setMapReady] = useState(false);
 
   const mapStyles = useMapStyles();
-  const [defaultMapLayer] = usePersistedState('mapLayer', 'locationIqStreets');
+  const [activeMapStyles] = usePersistedState('activeMapStyles', ['locationIqStreets', 'osm', 'carto']);
+  const [defaultMapStyle] = usePersistedState('selectedMapStyle', 'locationIqStreets');
   const mapboxAccessToken = useAttributePreference('mapboxAccessToken');
 
   useEffect(() => {
@@ -83,9 +84,9 @@ const MapView = ({ children }) => {
   }, [mapboxAccessToken]);
 
   useEffect(() => {
-    const filteredStyles = mapStyles.filter((style) => style.available);
-    switcher.updateStyles(filteredStyles, defaultMapLayer);
-  }, [mapStyles, defaultMapLayer]);
+    const filteredStyles = mapStyles.filter((style) => style.available && activeMapStyles.includes(style.id));
+    switcher.updateStyles(filteredStyles, defaultMapStyle);
+  }, [mapStyles, defaultMapStyle]);
 
   useEffect(() => {
     const listener = (ready) => setMapReady(ready);
diff --git a/modern/src/map/switcher/switcher.js b/modern/src/map/switcher/switcher.js
index d96f7ffc..848abc40 100644
--- a/modern/src/map/switcher/switcher.js
+++ b/modern/src/map/switcher/switcher.js
@@ -24,7 +24,7 @@ export class SwitcherControl {
       }
     }
     if (!selectedStyle) {
-      this.styles[0].id;
+      selectedStyle = this.styles[0].id;
     }
 
     while (this.mapStyleContainer.firstChild) {
diff --git a/modern/src/settings/PreferencesPage.js b/modern/src/settings/PreferencesPage.js
index 0b5cd466..c128e5e4 100644
--- a/modern/src/settings/PreferencesPage.js
+++ b/modern/src/settings/PreferencesPage.js
@@ -22,6 +22,7 @@ import SettingsMenu from './components/SettingsMenu';
 import usePositionAttributes from '../common/attributes/usePositionAttributes';
 import { prefixString, unprefixString } from '../common/util/stringUtils';
 import SelectField from '../common/components/SelectField';
+import useMapStyles from '../map/core/useMapStyles';
 
 const useStyles = makeStyles((theme) => ({
   container: {
@@ -42,6 +43,9 @@ const PreferencesPage = () => {
   const { languages, language, setLanguage } = useLocalization();
   const languageList = Object.entries(languages).map((values) => ({ code: values[0], name: values[1].name }));
 
+  const mapStyles = useMapStyles();
+  const [activeMapStyles, setActiveMapStyles] = usePersistedState('activeMapStyles', ['locationIqStreets', 'osm', 'carto']);
+
   const positionAttributes = usePositionAttributes(t);
   const [positionItems, setPositionItems] = usePersistedState('positionItems', ['speed', 'address', 'totalDistance', 'course']);
 
@@ -87,6 +91,19 @@ const PreferencesPage = () => {
             </Typography>
           </AccordionSummary>
           <AccordionDetails className={classes.details}>
+            <FormControl>
+              <InputLabel>{t('mapActive')}</InputLabel>
+              <Select
+                label={t('mapActive')}
+                value={activeMapStyles}
+                onChange={(e) => setActiveMapStyles(e.target.value)}
+                multiple
+              >
+                {mapStyles.map((style) => (
+                  <MenuItem key={style.id} value={style.id}>{style.title}</MenuItem>
+                ))}
+              </Select>
+            </FormControl>
             <FormControl>
               <InputLabel>{t('sharedAttributes')}</InputLabel>
               <Select
diff --git a/web/l10n/en.json b/web/l10n/en.json
index 8d851911..e10bba61 100644
--- a/web/l10n/en.json
+++ b/web/l10n/en.json
@@ -251,6 +251,7 @@
     "serverForceSettings": "Force Settings",
     "serverAnnouncement": "Announcement",
     "mapTitle": "Map",
+    "mapActive": "Active Maps",
     "mapLayer": "Map Layer",
     "mapCustom": "Custom (XYZ)",
     "mapCustomArcgis": "Custom (ArcGIS)",
-- 
cgit v1.2.3