From 0aecbc3bf856b17f42e363eff2bac4fb0ce1f7ed Mon Sep 17 00:00:00 2001 From: Anton Tananaev 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 = () => { + + {t('mapActive')} + + {t('sharedAttributes')}