Persist map layer

3 files changed, 14 insertions, 4 deletions

diff --git a/modern/src/common/usePersistedState.js b/modern/src/common/usePersistedState.js
index 0a7a990e..8bc4401f 100644
--- a/modern/src/common/usePersistedState.js
+++ b/modern/src/common/usePersistedState.js
@@ -1,5 +1,9 @@
 import { useEffect, useState } from 'react';
 
+export const savePersistedState = (key, value) => {
+  window.localStorage.setItem(key, JSON.stringify(value));
+};
+
 export default (key, defaultValue) => {
   const [value, setValue] = useState(() => {
     const stickyValue = window.localStorage.getItem(key);
@@ -7,7 +11,7 @@ export default (key, defaultValue) => {
   });
 
   useEffect(() => {
-    window.localStorage.setItem(key, JSON.stringify(value));
+    savePersistedState(key, value);
   }, [key, value]);
 
   return [value, setValue];
diff --git a/modern/src/map/Map.js b/modern/src/map/Map.js
index 2555e23f..d796c323 100644
--- a/modern/src/map/Map.js
+++ b/modern/src/map/Map.js
@@ -13,6 +13,7 @@ import {
 import { useAttributePreference } from '../common/preferences';
 import palette from '../theme/palette';
 import { useTranslation } from '../LocalizationProvider';
+import usePersistedState, { savePersistedState } from '../common/usePersistedState';
 
 const element = document.createElement('div');
 element.style.width = '100%';
@@ -67,6 +68,7 @@ map.addControl(new maplibregl.NavigationControl({
 
 const switcher = new SwitcherControl(
   () => updateReadyValue(false),
+  (layerId) => savePersistedState('mapLayer', layerId),
   () => {
     map.once('styledata', () => {
       const waiting = () => {
@@ -89,6 +91,7 @@ const Map = ({ children }) => {
 
   const [mapReady, setMapReady] = useState(false);
 
+  const [defaultMapLayer] = usePersistedState('mapLayer', 'locationIqStreets');
   const mapboxAccessToken = useAttributePreference('mapboxAccessToken');
   const mapTilerKey = useAttributePreference('mapTilerKey');
   const locationIqKey = useAttributePreference('locationIqKey', 'pk.0f147952a41c555a5b70614039fd148b');
@@ -109,8 +112,8 @@ const Map = ({ children }) => {
       { 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) },
-    ], 'locationIqStreets');
-  }, [t, locationIqKey, mapTilerKey]);
+    ], defaultMapLayer);
+  }, [t, locationIqKey, mapTilerKey, defaultMapLayer]);
 
   useEffect(() => {
     const listener = (ready) => setMapReady(ready);
diff --git a/modern/src/map/switcher/switcher.js b/modern/src/map/switcher/switcher.js
index 2c89faea..22ff9488 100644
--- a/modern/src/map/switcher/switcher.js
+++ b/modern/src/map/switcher/switcher.js
@@ -1,7 +1,8 @@
 export class SwitcherControl {
 
-  constructor(onBeforeSwitch, onAfterSwitch) {
+  constructor(onBeforeSwitch, onSwitch, onAfterSwitch) {
     this.onBeforeSwitch = onBeforeSwitch;
+    this.onSwitch = onSwitch;
     this.onAfterSwitch = onAfterSwitch;
     this.onDocumentClick = this.onDocumentClick.bind(this);
     this.styles = [];
@@ -52,6 +53,8 @@ export class SwitcherControl {
       diff: false,
     });
 
+    this.onSwitch(target.dataset.id);
+
     this.mapStyleContainer.style.display = 'none';
     this.styleButton.style.display = 'block';