Preference for map layers

1 files changed, 17 insertions, 0 deletions

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')}