map: format updated location value

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

Hide file tree

Showing 2 changed files with 16 additions and 28 deletions.
diff --git a/webapp/components/Map/Map.js b/webapp/components/Map/Map.js
@@ -4,8 +4,6 @@ import React from 'react'
 import { MapContainer, ScaleControl } from 'react-leaflet'
 import PropTypes from 'prop-types'
 
-import { Points } from '@openforis/arena-core'
-
 import { ButtonSave } from '@webapp/components'
 
 import i18n from '@core/i18n/i18nFactory'
@@ -35,7 +33,7 @@ const INITIAL_ZOOM_LEVEL = 3
 
 export const Map = (props) => {
   const { editable, layers, markerPoint, markerTitle, showOptions } = props
-  const { centerPositionLatLon, mapEventHandlers, markerPointUpdated, onMarkerPointUpdated, onSaveClick } =
+  const { centerPositionLatLon, markerPointUpdated, markerPointUpdatedToString, onMarkerPointUpdated, onSaveClick } =
     useMap(props)
 
   if (!centerPositionLatLon) {
@@ -47,12 +45,7 @@ export const Map = (props) => {
       {editable && <div className="location-edit-info">{i18n.t('mapView.locationEditInfo')}</div>}
 
       <MapContextProvider>
-        <MapContainer
-          center={centerPositionLatLon}
-          doubleClickZoom={false}
-          zoom={INITIAL_ZOOM_LEVEL}
-          eventHandlers={mapEventHandlers}
-        >
+        <MapContainer center={centerPositionLatLon} doubleClickZoom={false} zoom={INITIAL_ZOOM_LEVEL}>
           <ScaleControl position="topleft" />
           <MapLayersControl layers={layers} />
           <MapMarker
@@ -61,9 +54,13 @@ export const Map = (props) => {
             onPointUpdated={onMarkerPointUpdated}
             title={markerTitle}
           />
-          {showOptions && <MapOptionsEditor />}
-          <KmlUploader />
-          <MapBaseLayerPeriodSelector />
+          {showOptions && (
+            <>
+              <MapOptionsEditor />
+              <KmlUploader />
+              <MapBaseLayerPeriodSelector />
+            </>
+          )}
           <ShowZoomLevel />
           {/* <WmtsComponent /> */}
         </MapContainer>
@@ -74,7 +71,7 @@ export const Map = (props) => {
           {markerPointUpdated && (
             <div className="location-updated-label">
               <label>
-                {i18n.t('mapView.locationUpdated')}:<span>{Points.toString(markerPointUpdated)}</span>
+                {i18n.t('mapView.locationUpdated')}:<span> {markerPointUpdatedToString}</span>
               </label>
             </div>
           )}

diff --git a/webapp/components/Map/useMap.js b/webapp/components/Map/useMap.js
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 
 import { PointFactory, Points } from '@openforis/arena-core'
 
@@ -43,19 +43,6 @@ export const useMap = (props) => {
     }))
   }, [centerPoint, fromPointToLatLon, markerPoint, srsIndex])
 
-  const mapEventHandlers = useMemo(
-    () => ({
-      dblclick(event) {
-        const [latitude, longitute] = event.latlng
-        setState((statePrev) => ({
-          ...statePrev,
-          markerPositionLatLon: PointFactory.createInstance({ x: longitute, y: latitude }),
-        }))
-      },
-    }),
-    []
-  )
-
   const onMarkerPointUpdated = useCallback((markerPointUpdated) => {
     setState((statePrev) => ({ ...statePrev, markerPointUpdated }))
   }, [])
@@ -64,10 +51,14 @@ export const useMap = (props) => {
     onMarkerPointChange(markerPointUpdated)
   }, [markerPointUpdated, onMarkerPointChange])
 
+  const markerPointUpdatedToString = markerPointUpdated
+    ? `${markerPointUpdated.y.toFixed(5)}, ${markerPointUpdated.x.toFixed(5)}`
+    : ''
+
   return {
     centerPositionLatLon,
-    mapEventHandlers,
     markerPointUpdated,
+    markerPointUpdatedToString,
     onMarkerPointUpdated,
     onSaveClick,
   }