Refactor map styles list

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);