Support current location

2 files changed, 86 insertions, 36 deletions

diff --git a/modern/src/settings/ServerPage.js b/modern/src/settings/ServerPage.js
index dccb52c6..d0810e5a 100644
--- a/modern/src/settings/ServerPage.js
+++ b/modern/src/settings/ServerPage.js
@@ -31,6 +31,7 @@ import useCommonUserAttributes from '../common/attributes/useCommonUserAttribute
 import { useCatch } from '../reactHelper';
 import useServerAttributes from '../common/attributes/useServerAttributes';
 import useMapStyles from '../map/core/useMapStyles';
+import { map } from '../map/core/MapView';
 
 const useStyles = makeStyles((theme) => ({
   container: {
@@ -118,24 +119,6 @@ const ServerPage = () => {
                     ))}
                   </Select>
                 </FormControl>
-                <TextField
-                  type="number"
-                  value={item.latitude || 0}
-                  onChange={(event) => setItem({ ...item, latitude: Number(event.target.value) })}
-                  label={t('positionLatitude')}
-                />
-                <TextField
-                  type="number"
-                  value={item.longitude || 0}
-                  onChange={(event) => setItem({ ...item, longitude: Number(event.target.value) })}
-                  label={t('positionLongitude')}
-                />
-                <TextField
-                  type="number"
-                  value={item.zoom || 0}
-                  onChange={(event) => setItem({ ...item, zoom: Number(event.target.value) })}
-                  label={t('serverZoom')}
-                />
                 <FormControl>
                   <InputLabel>{t('settingsCoordinateFormat')}</InputLabel>
                   <Select
@@ -229,6 +212,48 @@ const ServerPage = () => {
             <Accordion>
               <AccordionSummary expandIcon={<ExpandMoreIcon />}>
                 <Typography variant="subtitle1">
+                  {t('sharedLocation')}
+                </Typography>
+              </AccordionSummary>
+              <AccordionDetails className={classes.details}>
+                <TextField
+                  type="number"
+                  value={item.latitude || 0}
+                  onChange={(event) => setItem({ ...item, latitude: Number(event.target.value) })}
+                  label={t('positionLatitude')}
+                />
+                <TextField
+                  type="number"
+                  value={item.longitude || 0}
+                  onChange={(event) => setItem({ ...item, longitude: Number(event.target.value) })}
+                  label={t('positionLongitude')}
+                />
+                <TextField
+                  type="number"
+                  value={item.zoom || 0}
+                  onChange={(event) => setItem({ ...item, zoom: Number(event.target.value) })}
+                  label={t('serverZoom')}
+                />
+                <Button
+                  variant="outlined"
+                  color="primary"
+                  onClick={() => {
+                    const { lng, lat } = map.getCenter();
+                    setItem({
+                      ...item,
+                      latitude: Number(lat.toFixed(6)),
+                      longitude: Number(lng.toFixed(6)),
+                      zoom: Number(map.getZoom().toFixed(1)),
+                    });
+                  }}
+                >
+                  {t('mapCurrentLocation')}
+                </Button>
+              </AccordionDetails>
+            </Accordion>
+            <Accordion>
+              <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+                <Typography variant="subtitle1">
                   {t('sharedPermissions')}
                 </Typography>
               </AccordionSummary>
diff --git a/modern/src/settings/UserPage.js b/modern/src/settings/UserPage.js
index 9b69cacd..582e63eb 100644
--- a/modern/src/settings/UserPage.js
+++ b/modern/src/settings/UserPage.js
@@ -34,6 +34,7 @@ import useQuery from '../common/util/useQuery';
 import { useCatch } from '../reactHelper';
 import { formatNotificationTitle } from '../common/util/formatter';
 import useMapStyles from '../map/core/useMapStyles';
+import { map } from '../map/core/MapView';
 
 const useStyles = makeStyles((theme) => ({
   details: {
@@ -169,24 +170,6 @@ const UserPage = () => {
                   ))}
                 </Select>
               </FormControl>
-              <TextField
-                type="number"
-                value={item.latitude || 0}
-                onChange={(event) => setItem({ ...item, latitude: Number(event.target.value) })}
-                label={t('positionLatitude')}
-              />
-              <TextField
-                type="number"
-                value={item.longitude || 0}
-                onChange={(event) => setItem({ ...item, longitude: Number(event.target.value) })}
-                label={t('positionLongitude')}
-              />
-              <TextField
-                type="number"
-                value={item.zoom || 0}
-                onChange={(event) => setItem({ ...item, zoom: Number(event.target.value) })}
-                label={t('serverZoom')}
-              />
               <FormControl>
                 <InputLabel>{t('settingsCoordinateFormat')}</InputLabel>
                 <Select
@@ -271,6 +254,48 @@ const UserPage = () => {
           <Accordion>
             <AccordionSummary expandIcon={<ExpandMoreIcon />}>
               <Typography variant="subtitle1">
+                {t('sharedLocation')}
+              </Typography>
+            </AccordionSummary>
+            <AccordionDetails className={classes.details}>
+              <TextField
+                type="number"
+                value={item.latitude || 0}
+                onChange={(event) => setItem({ ...item, latitude: Number(event.target.value) })}
+                label={t('positionLatitude')}
+              />
+              <TextField
+                type="number"
+                value={item.longitude || 0}
+                onChange={(event) => setItem({ ...item, longitude: Number(event.target.value) })}
+                label={t('positionLongitude')}
+              />
+              <TextField
+                type="number"
+                value={item.zoom || 0}
+                onChange={(event) => setItem({ ...item, zoom: Number(event.target.value) })}
+                label={t('serverZoom')}
+              />
+              <Button
+                variant="outlined"
+                color="primary"
+                onClick={() => {
+                  const { lng, lat } = map.getCenter();
+                  setItem({
+                    ...item,
+                    latitude: Number(lat.toFixed(6)),
+                    longitude: Number(lng.toFixed(6)),
+                    zoom: Number(map.getZoom().toFixed(1)),
+                  });
+                }}
+              >
+                {t('mapCurrentLocation')}
+              </Button>
+            </AccordionDetails>
+          </Accordion>
+          <Accordion>
+            <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+              <Typography variant="subtitle1">
                 {t('sharedPermissions')}
               </Typography>
             </AccordionSummary>