3 files changed, 24 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']);
 
@@ -88,6 +92,19 @@ const PreferencesPage = () => {
           </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
                 label={t('sharedAttributes')}