Support default map (fix #1002)

6 files changed, 45 insertions, 15 deletions

diff --git a/modern/src/common/attributes/useCommonUserAttributes.js b/modern/src/common/attributes/useCommonUserAttributes.js
index 845ab799..cef6daf8 100644
--- a/modern/src/common/attributes/useCommonUserAttributes.js
+++ b/modern/src/common/attributes/useCommonUserAttributes.js
@@ -25,10 +25,6 @@ export default (t) => useMemo(() => ({
     name: t('mapActive'),
     type: 'string',
   },
-  selectedMapStyle: {
-    name: t('mapDefault'),
-    type: 'string',
-  },
   devicePrimary: {
     name: t('devicePrimaryInfo'),
     type: 'string',
diff --git a/modern/src/common/util/preferences.js b/modern/src/common/util/preferences.js
index fb8bb4f2..229b6f17 100644
--- a/modern/src/common/util/preferences.js
+++ b/modern/src/common/util/preferences.js
@@ -1,19 +1,21 @@
 import { useSelector } from 'react-redux';
 
+const containsProperty = (object, key) => object.hasOwnProperty(key) && object[key] !== null;
+
 export const usePreference = (key, defaultValue) => useSelector((state) => {
   if (state.session.server.forceSettings) {
-    if (state.session.server.hasOwnProperty(key)) {
+    if (containsProperty(state.session.server, key)) {
       return state.session.server[key];
     }
-    if (state.session.user.hasOwnProperty(key)) {
+    if (containsProperty(state.session.user, key)) {
       return state.session.user[key];
     }
     return defaultValue;
   }
-  if (state.session.user.hasOwnProperty(key)) {
+  if (containsProperty(state.session.user, key)) {
     return state.session.user[key];
   }
-  if (state.session.server.hasOwnProperty(key)) {
+  if (containsProperty(state.session.server, key)) {
     return state.session.server[key];
   }
   return defaultValue;
@@ -21,18 +23,18 @@ export const usePreference = (key, defaultValue) => useSelector((state) => {
 
 export const useAttributePreference = (key, defaultValue) => useSelector((state) => {
   if (state.session.server.forceSettings) {
-    if (state.session.server.attributes.hasOwnProperty(key)) {
+    if (containsProperty(state.session.server.attributes, key)) {
       return state.session.server.attributes[key];
     }
-    if (state.session.user.attributes.hasOwnProperty(key)) {
+    if (containsProperty(state.session.user.attributes, key)) {
       return state.session.user.attributes[key];
     }
     return defaultValue;
   }
-  if (state.session.user.attributes.hasOwnProperty(key)) {
+  if (containsProperty(state.session.user.attributes, key)) {
     return state.session.user.attributes[key];
   }
-  if (state.session.server.attributes.hasOwnProperty(key)) {
+  if (containsProperty(state.session.server.attributes, key)) {
     return state.session.server.attributes[key];
   }
   return defaultValue;
diff --git a/modern/src/map/core/MapView.js b/modern/src/map/core/MapView.js
index 7ed5eae6..2c49b8ba 100644
--- a/modern/src/map/core/MapView.js
+++ b/modern/src/map/core/MapView.js
@@ -4,7 +4,7 @@ import React, {
   useRef, useLayoutEffect, useEffect, useState,
 } from 'react';
 import { SwitcherControl } from '../switcher/switcher';
-import { useAttributePreference } from '../../common/util/preferences';
+import { useAttributePreference, usePreference } from '../../common/util/preferences';
 import usePersistedState, { savePersistedState } from '../../common/util/usePersistedState';
 import { mapImages } from './preloadImages';
 import useMapStyles from './useMapStyles';
@@ -76,7 +76,7 @@ const MapView = ({ children }) => {
 
   const mapStyles = useMapStyles();
   const activeMapStyles = useAttributePreference('activeMapStyles', 'locationIqStreets,osm,carto');
-  const [defaultMapStyle] = usePersistedState('selectedMapStyle', 'locationIqStreets');
+  const [defaultMapStyle] = usePersistedState('selectedMapStyle', usePreference('map', 'locationIqStreets'));
   const mapboxAccessToken = useAttributePreference('mapboxAccessToken');
   const maxZoom = useAttributePreference('web.maxZoom');
 
diff --git a/modern/src/settings/PreferencesPage.js b/modern/src/settings/PreferencesPage.js
index 5229a03c..97548cbb 100644
--- a/modern/src/settings/PreferencesPage.js
+++ b/modern/src/settings/PreferencesPage.js
@@ -181,7 +181,7 @@ const PreferencesPage = () => {
               <InputLabel>{t('mapOverlay')}</InputLabel>
               <Select
                 label={t('mapOverlay')}
-                value={attributes.selectedMapOverlay}
+                value={attributes.selectedMapOverlay || ''}
                 onChange={(e) => {
                   const clicked = mapOverlays.find((o) => o.id === e.target.value);
                   if (!clicked || clicked.available) {
diff --git a/modern/src/settings/ServerPage.js b/modern/src/settings/ServerPage.js
index e51c002c..dccb52c6 100644
--- a/modern/src/settings/ServerPage.js
+++ b/modern/src/settings/ServerPage.js
@@ -30,6 +30,7 @@ import useCommonDeviceAttributes from '../common/attributes/useCommonDeviceAttri
 import useCommonUserAttributes from '../common/attributes/useCommonUserAttributes';
 import { useCatch } from '../reactHelper';
 import useServerAttributes from '../common/attributes/useServerAttributes';
+import useMapStyles from '../map/core/useMapStyles';
 
 const useStyles = makeStyles((theme) => ({
   container: {
@@ -58,6 +59,7 @@ const ServerPage = () => {
   const dispatch = useDispatch();
   const t = useTranslation();
 
+  const mapStyles = useMapStyles();
   const commonUserAttributes = useCommonUserAttributes(t);
   const commonDeviceAttributes = useCommonDeviceAttributes(t);
   const serverAttributes = useServerAttributes(t);
@@ -102,6 +104,20 @@ const ServerPage = () => {
                   onChange={(event) => setItem({ ...item, overlayUrl: event.target.value })}
                   label={t('mapOverlayCustom')}
                 />
+                <FormControl>
+                  <InputLabel>{t('mapDefault')}</InputLabel>
+                  <Select
+                    label={t('mapDefault')}
+                    value={item.map || 'locationIqStreets'}
+                    onChange={(e) => setItem({ ...item, map: e.target.value })}
+                  >
+                    {mapStyles.filter((style) => style.available).map((style) => (
+                      <MenuItem key={style.id} value={style.id}>
+                        <Typography component="span">{style.title}</Typography>
+                      </MenuItem>
+                    ))}
+                  </Select>
+                </FormControl>
                 <TextField
                   type="number"
                   value={item.latitude || 0}
diff --git a/modern/src/settings/UserPage.js b/modern/src/settings/UserPage.js
index 78b6fcf3..c5e5e258 100644
--- a/modern/src/settings/UserPage.js
+++ b/modern/src/settings/UserPage.js
@@ -33,6 +33,7 @@ import { useAdministrator, useRestriction, useManager } from '../common/util/per
 import useQuery from '../common/util/useQuery';
 import { useCatch } from '../reactHelper';
 import { formatNotificationTitle } from '../common/util/formatter';
+import useMapStyles from '../map/core/useMapStyles';
 
 const useStyles = makeStyles((theme) => ({
   details: {
@@ -56,6 +57,7 @@ const UserPage = () => {
   const currentUser = useSelector((state) => state.session.user);
   const registrationEnabled = useSelector((state) => state.session.server.registration);
 
+  const mapStyles = useMapStyles();
   const commonUserAttributes = useCommonUserAttributes(t);
   const userAttributes = useUserAttributes(t);
 
@@ -153,6 +155,20 @@ const UserPage = () => {
                 onChange={(event) => setItem({ ...item, phone: event.target.value })}
                 label={t('sharedPhone')}
               />
+              <FormControl>
+                <InputLabel>{t('mapDefault')}</InputLabel>
+                <Select
+                  label={t('mapDefault')}
+                  value={item.map || 'locationIqStreets'}
+                  onChange={(e) => setItem({ ...item, map: e.target.value })}
+                >
+                  {mapStyles.filter((style) => style.available).map((style) => (
+                    <MenuItem key={style.id} value={style.id}>
+                      <Typography component="span">{style.title}</Typography>
+                    </MenuItem>
+                  ))}
+                </Select>
+              </FormControl>
               <TextField
                 type="number"
                 value={item.latitude || 0}