Support default map (fix #1002)

3 files changed, 33 insertions, 1 deletions

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}