aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2022-05-01 11:36:15 -0700
committerAnton Tananaev <anton@traccar.org>2022-05-01 11:36:15 -0700
commit90f292b7739835202842d88eeaf55a531d29d3c3 (patch)
treefd55ee9bb5b67cfe03d5873aea86d5697367f121
parentf2bd440c7fdf8857a5704f214d96aba3345a14e7 (diff)
downloadtrackermap-web-90f292b7739835202842d88eeaf55a531d29d3c3.tar.gz
trackermap-web-90f292b7739835202842d88eeaf55a531d29d3c3.tar.bz2
trackermap-web-90f292b7739835202842d88eeaf55a531d29d3c3.zip
Persist map layer
-rw-r--r--modern/src/common/usePersistedState.js6
-rw-r--r--modern/src/map/Map.js7
-rw-r--r--modern/src/map/switcher/switcher.js5
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';