diff options
Diffstat (limited to 'modern/src/map/core/MapView.js')
-rw-r--r-- | modern/src/map/core/MapView.js | 28 |
1 files changed, 5 insertions, 23 deletions
diff --git a/modern/src/map/core/MapView.js b/modern/src/map/core/MapView.js index eea5827a..7f183346 100644 --- a/modern/src/map/core/MapView.js +++ b/modern/src/map/core/MapView.js @@ -4,15 +4,11 @@ import maplibregl from 'maplibre-gl'; import React, { useRef, useLayoutEffect, useEffect, useState, } from 'react'; -import { useSelector } from 'react-redux'; import { SwitcherControl } from '../switcher/switcher'; -import { - styleCarto, styleCustom, styleLocationIq, styleMapbox, styleMapTiler, styleOsm, -} from './mapStyles'; import { useAttributePreference } from '../../common/util/preferences'; -import { useTranslation } from '../../common/components/LocalizationProvider'; import usePersistedState, { savePersistedState } from '../../common/util/usePersistedState'; import { mapImages } from './preloadImages'; +import useMapStyles from './useMapStyles'; const element = document.createElement('div'); element.style.width = '100%'; @@ -75,35 +71,21 @@ map.addControl(switcher); const MapView = ({ children }) => { const containerEl = useRef(null); - const t = useTranslation(); const [mapReady, setMapReady] = useState(false); const [defaultMapLayer] = usePersistedState('mapLayer', 'locationIqStreets'); const mapboxAccessToken = useAttributePreference('mapboxAccessToken'); - const mapTilerKey = useAttributePreference('mapTilerKey'); - const locationIqKey = useAttributePreference('locationIqKey', 'pk.0f147952a41c555a5b70614039fd148b'); - const customMapUrl = useSelector((state) => state.session.server?.mapUrl); + + const mapStyles = useMapStyles(); useEffect(() => { maplibregl.accessToken = mapboxAccessToken; }, [mapboxAccessToken]); 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') }, - { id: 'mapboxOutdoors', title: t('mapMapboxOutdoors'), uri: styleMapbox('outdoors-v11') }, - { 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) }, - { id: 'custom', title: t('mapCustom'), uri: styleCustom(customMapUrl) }, - ], defaultMapLayer); - }, [t, locationIqKey, mapTilerKey, customMapUrl, defaultMapLayer]); + switcher.updateStyles(mapStyles, defaultMapLayer); + }, [mapStyles, defaultMapLayer]); useEffect(() => { const listener = (ready) => setMapReady(ready); |