EditDialog: Add text field for setting GPS coordinates

zbycz · Jan 26, 2025 · ab7253b · ab7253b
1 parent 0cff23a
commit ab7253b
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 9 deletions.
diff --git a/.../FeaturePanel/EditDialog/EditContent/FeatureEditSection/EditFeatureMap/EditFeatureMap.tsx b/.../FeaturePanel/EditDialog/EditContent/FeatureEditSection/EditFeatureMap/EditFeatureMap.tsx
@@ -4,6 +4,8 @@ import {
   AccordionDetails,
   AccordionSummary,
   CircularProgress,
+  Stack,
+  TextField,
   Typography,
 } from '@mui/material';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
@@ -12,6 +14,7 @@ import styled from '@emotion/styled';
 import { t } from '../../../../../../services/intl';
 import { useFeatureEditData } from '../SingleFeatureEditContext';
 import { useInitEditFeatureMap } from './useInitEditFeatureMap';
+import { LngLat } from 'maplibre-gl';
 
 const Container = styled.div`
   width: 100%;
@@ -35,7 +38,9 @@ const Map = styled.div<{ $isVisible: boolean }>`
 `;
 
 export default function EditFeatureMap() {
-  const { containerRef, isMapLoaded } = useInitEditFeatureMap();
+  const [isFirstMapLoad, setIsFirstMapLoad] = useState(true);
+  const { containerRef, isMapLoaded, currentItem, onMarkerChange } =
+    useInitEditFeatureMap(isFirstMapLoad, setIsFirstMapLoad);
   const [expanded, setExpanded] = useState(false);
 
   const { shortId } = useFeatureEditData();
@@ -62,6 +67,34 @@ export default function EditFeatureMap() {
           )}
           <Map $isVisible={isMapLoaded} ref={containerRef} />
         </Container>
+        <Stack direction="row" mt={2} gap={1}>
+          <TextField
+            label={t('editdialog.location_latitude')}
+            variant="outlined"
+            value={currentItem?.nodeLonLat[1]}
+            onChange={(e) => {
+              onMarkerChange({
+                lng: currentItem?.nodeLonLat[0],
+                lat: parseFloat(e.target.value),
+              } as LngLat);
+              setIsFirstMapLoad(true);
+            }}
+            size="small"
+          />
+          <TextField
+            label={t('editdialog.location_longitude')}
+            variant="outlined"
+            value={currentItem?.nodeLonLat[0]}
+            onChange={(e) => {
+              onMarkerChange({
+                lng: parseFloat(e.target.value),
+                lat: currentItem?.nodeLonLat[1],
+              } as LngLat);
+              setIsFirstMapLoad(true);
+            }}
+            size="small"
+          />
+        </Stack>
       </AccordionDetails>
     </Accordion>
   );

diff --git a/...aturePanel/EditDialog/EditContent/FeatureEditSection/EditFeatureMap/useDraggableMarker.ts b/...aturePanel/EditDialog/EditContent/FeatureEditSection/EditFeatureMap/useDraggableMarker.ts
@@ -31,8 +31,8 @@ const useUpdateDraggableFeatureMarker = createMapEffectHook<
       draggable: true,
     })
       .setLngLat({
-        lng: parseFloat(lng.toFixed(6)),
-        lat: parseFloat(lat.toFixed(6)),
+        lng,
+        lat,
       })
       .addTo(map);
 
@@ -47,7 +47,7 @@ export function useDraggableFeatureMarker(
   const markerRef = useRef<maplibregl.Marker>();
 
   const onMarkerChange = ({ lng, lat }: LngLat) => {
-    const newLonLat = [lng, lat];
+    const newLonLat = [lng.toFixed(6), lat.toFixed(6)];
     currentItem.setNodeLonLat(newLonLat);
   };
 
@@ -56,4 +56,5 @@ export function useDraggableFeatureMarker(
     nodeLonLat: currentItem?.nodeLonLat,
     markerRef,
   });
+  return { onMarkerChange };
 }
diff --git a/...rePanel/EditDialog/EditContent/FeatureEditSection/EditFeatureMap/useInitEditFeatureMap.ts b/...rePanel/EditDialog/EditContent/FeatureEditSection/EditFeatureMap/useInitEditFeatureMap.ts
@@ -7,19 +7,18 @@ import { useEditContext } from '../../../EditContext';
 import { useFeatureMarkers } from './useStaticMarkers';
 import { useDraggableFeatureMarker } from './useDraggableMarker';
 
-export function useInitEditFeatureMap() {
+export function useInitEditFeatureMap(isFirstMapLoad, setIsFirstMapLoad) {
   const containerRef = React.useRef<HTMLDivElement>(null);
   const mapRef = React.useRef<maplibregl.Map>(null);
 
   const [isMapLoaded, setIsMapLoaded] = useState(false);
-  const [isFirstMapLoad, setIsFirstMapLoad] = useState(true);
 
   const { current, items, setCurrent } = useEditContext();
   const currentItem = items.find((item) => item.shortId === current);
 
   useFeatureMarkers(mapRef, items, setCurrent, current);
 
-  useDraggableFeatureMarker(mapRef, currentItem);
+  const { onMarkerChange } = useDraggableFeatureMarker(mapRef, currentItem);
 
   useEffect(() => {
     setIsMapLoaded(false);
@@ -81,5 +80,5 @@ export function useInitEditFeatureMap() {
     setIsFirstMapLoad(true);
   }, [current]);
 
-  return { containerRef, isMapLoaded };
+  return { containerRef, isMapLoaded, currentItem, onMarkerChange };
 }
diff --git a/...eaturePanel/EditDialog/EditContent/FeatureEditSection/EditFeatureMap/useStaticMarkers.tsx b/...eaturePanel/EditDialog/EditContent/FeatureEditSection/EditFeatureMap/useStaticMarkers.tsx
@@ -19,7 +19,7 @@ const useUpdateFeatureMarkers = createMapEffectHook<
   markerRefs.current = [];
 
   items.forEach((item) => {
-    if (!item.nodeLonLat || item.shortId === current) return;
+    if (!item.nodeLonLat || item.shortId === current || !lng || !lat) return;
     const [lng, lat] = item.nodeLonLat;
 
     const marker = new maplibregl.Marker({

diff --git a/src/locales/cs.js b/src/locales/cs.js
@@ -193,6 +193,8 @@ export default {
   'editdialog.tags_editor': 'Všechny vlastnosti – tagy',
   'editdialog.add_tag': 'Přidat tag',
   'editdialog.location': 'Poloha',
+  'editdialog.location_latitude': 'Zeměpisná šířka',
+  'editdialog.location_longitude': 'Zeměpisná délka',
   'editdialog.tags_editor_info': `Tagy popisují vlastnosti mapového prvku v dohodnutém formátu. Zde naleznete úplný
         <a href="https://wiki.openstreetmap.org/wiki/Cs:Map_Features" target="_blank">přehled všech tagů v OpenStreetMap</a>.`,
   'editdialog.save_refused': 'Změny se nepodařilo uložit.',

diff --git a/src/locales/vocabulary.js b/src/locales/vocabulary.js
@@ -232,6 +232,8 @@ export default {
   'editdialog.tags_editor': 'All properties – Tags',
   'editdialog.add_tag': 'Add tag',
   'editdialog.location': 'Location',
+  'editdialog.location_latitude': 'Latitude',
+  'editdialog.location_longitude': 'Longitude',
   'editdialog.tags_editor_info': `Tags contain the data used to display objects on the map.<br>You can find <a href="https://wiki.openstreetmap.org/wiki/Map_Features" target="_blank">a reference for all tags on the OpenStreetMap Wiki</a>.`,
   'editdialog.login_in_progress': `Logging in...`,
   'editdialog.save_refused': 'Unable to save your changes.',