aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2022-06-11 16:51:50 -0700
committerAnton Tananaev <anton@traccar.org>2022-06-11 16:51:50 -0700
commit0aecbc3bf856b17f42e363eff2bac4fb0ce1f7ed (patch)
tree79eeaf8e4197a7ef3710fdd21641ebf0fda71566
parente34214fe32cafb19d871d3e20a2c5ad80de56a20 (diff)
downloadtrackermap-web-0aecbc3bf856b17f42e363eff2bac4fb0ce1f7ed.tar.gz
trackermap-web-0aecbc3bf856b17f42e363eff2bac4fb0ce1f7ed.tar.bz2
trackermap-web-0aecbc3bf856b17f42e363eff2bac4fb0ce1f7ed.zip
Preference for map layers
-rw-r--r--modern/src/map/core/MapView.js11
-rw-r--r--modern/src/map/switcher/switcher.js2
-rw-r--r--modern/src/settings/PreferencesPage.js17
-rw-r--r--web/l10n/en.json1
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']);
@@ -88,6 +92,19 @@ const PreferencesPage = () => {
</AccordionSummary>
<AccordionDetails className={classes.details}>
<FormControl>
+ <InputLabel>{t('mapActive')}</InputLabel>
+ <Select
+ label={t('mapActive')}
+ value={activeMapStyles}
+ onChange={(e) => setActiveMapStyles(e.target.value)}
+ multiple
+ >
+ {mapStyles.map((style) => (
+ <MenuItem key={style.id} value={style.id}>{style.title}</MenuItem>
+ ))}
+ </Select>
+ </FormControl>
+ <FormControl>
<InputLabel>{t('sharedAttributes')}</InputLabel>
<Select
label={t('sharedAttributes')}
diff --git a/web/l10n/en.json b/web/l10n/en.json
index 8d851911..e10bba61 100644
--- a/web/l10n/en.json
+++ b/web/l10n/en.json
@@ -251,6 +251,7 @@
"serverForceSettings": "Force Settings",
"serverAnnouncement": "Announcement",
"mapTitle": "Map",
+ "mapActive": "Active Maps",
"mapLayer": "Map Layer",
"mapCustom": "Custom (XYZ)",
"mapCustomArcgis": "Custom (ArcGIS)",