map marker: show updated location

openforis · Sep 15, 2023 · 6a8c4e5 · 6a8c4e5
1 parent 651c813
commit 6a8c4e5
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 16 deletions.
diff --git a/webapp/components/Map/MapMarker/MapMarker.js b/webapp/components/Map/MapMarker/MapMarker.js
@@ -7,13 +7,16 @@ import { useMapMarker } from './useMapMarker'
 export const MapMarker = (props) => {
   const { editable, point, title } = props
 
-  const { markerEventHandlers, markerRef, pointLatLon } = useMapMarker(props)
+  const { markerEventHandlers, markerRef, pointLatLon, pointUpdated } = useMapMarker(props)
 
-  if (!pointLatLon) return null
+  if (!pointLatLon) {
+    // invalid location
+    return null
+  }
 
   return (
     <Marker draggable={editable} eventHandlers={markerEventHandlers} position={pointLatLon} ref={markerRef}>
-      <MapMarkerPopup point={point} title={title} />
+      <MapMarkerPopup point={pointUpdated ?? point} title={title} />
     </Marker>
   )
 }
diff --git a/webapp/components/Map/MapMarker/useMapMarker.js b/webapp/components/Map/MapMarker/useMapMarker.js
@@ -14,9 +14,10 @@ export const useMapMarker = (props) => {
 
   const [state, setState] = useState({
     pointLatLon: null, // array with latitude and longitude values
+    pointUpdated: null,
   })
 
-  const { pointLatLon } = state
+  const { pointLatLon, pointUpdated } = state
   const pointSrs = point?.srs
 
   const fromPointToLatLon = useCallback(
@@ -43,17 +44,18 @@ export const useMapMarker = (props) => {
 
   const onPointUpdated = useCallback(
     ({ lat, lng }) => {
-      setState((statePrev) => ({
-        ...statePrev,
-        pointLatLon: [lat, lng],
-      }))
-
       let pointUpdated = PointFactory.createInstance({ x: lng, y: lat })
 
       // transform updated location into a location with the same SRS as the marker position parameter
       if (pointSrs && pointSrs !== pointUpdated.srs) {
         pointUpdated = Points.transform(pointUpdated, pointSrs, srsIndex)
       }
+      setState((statePrev) => ({
+        ...statePrev,
+        pointLatLon: [lat, lng],
+        pointUpdated,
+      }))
+
       onPointUpdatedProp(pointUpdated)
     },
     [onPointUpdatedProp, pointSrs, srsIndex]
@@ -72,14 +74,14 @@ export const useMapMarker = (props) => {
     [onPointUpdated]
   )
 
-  if (editable) {
-    useMapEvents({
-      dblclick(event) {
+  useMapEvents({
+    dblclick(event) {
+      if (editable) {
         const { lat, lng } = event.latlng
         onPointUpdated({ lat, lng })
-      },
-    })
-  }
+      }
+    },
+  })
 
-  return { markerEventHandlers, markerRef, pointLatLon }
+  return { markerEventHandlers, markerRef, pointLatLon, pointUpdated }
 }