From ab7253b23c5994d7db826eed93323d2c124e82e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20V=C3=A1clav=C3=ADk?= Date: Sun, 26 Jan 2025 16:09:10 +0100 Subject: [PATCH] EditDialog: Add text field for setting GPS coordinates --- .../EditFeatureMap/EditFeatureMap.tsx | 35 ++++++++++++++++++- .../EditFeatureMap/useDraggableMarker.ts | 7 ++-- .../EditFeatureMap/useInitEditFeatureMap.ts | 7 ++-- .../EditFeatureMap/useStaticMarkers.tsx | 2 +- src/locales/cs.js | 2 ++ src/locales/vocabulary.js | 2 ++ 6 files changed, 46 insertions(+), 9 deletions(-) diff --git a/src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/EditFeatureMap/EditFeatureMap.tsx b/src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/EditFeatureMap/EditFeatureMap.tsx index b8a8d459..2e59e3cf 100644 --- a/src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/EditFeatureMap/EditFeatureMap.tsx +++ b/src/components/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() { )} + + { + onMarkerChange({ + lng: currentItem?.nodeLonLat[0], + lat: parseFloat(e.target.value), + } as LngLat); + setIsFirstMapLoad(true); + }} + size="small" + /> + { + onMarkerChange({ + lng: parseFloat(e.target.value), + lat: currentItem?.nodeLonLat[1], + } as LngLat); + setIsFirstMapLoad(true); + }} + size="small" + /> + ); diff --git a/src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/EditFeatureMap/useDraggableMarker.ts b/src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/EditFeatureMap/useDraggableMarker.ts index 90ef42d2..3c27d057 100644 --- a/src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/EditFeatureMap/useDraggableMarker.ts +++ b/src/components/FeaturePanel/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(); 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/src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/EditFeatureMap/useInitEditFeatureMap.ts b/src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/EditFeatureMap/useInitEditFeatureMap.ts index 5c00e15a..733e1b13 100644 --- a/src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/EditFeatureMap/useInitEditFeatureMap.ts +++ b/src/components/FeaturePanel/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(null); const mapRef = React.useRef(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/src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/EditFeatureMap/useStaticMarkers.tsx b/src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/EditFeatureMap/useStaticMarkers.tsx index 0254223c..795920ab 100644 --- a/src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/EditFeatureMap/useStaticMarkers.tsx +++ b/src/components/FeaturePanel/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 index a4407504..2f9ffe8f 100644 --- 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ý přehled všech tagů v OpenStreetMap.`, 'editdialog.save_refused': 'Změny se nepodařilo uložit.', diff --git a/src/locales/vocabulary.js b/src/locales/vocabulary.js index cba46c99..8ac46260 100644 --- 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.
You can find a reference for all tags on the OpenStreetMap Wiki.`, 'editdialog.login_in_progress': `Logging in...`, 'editdialog.save_refused': 'Unable to save your changes.',