From 8a11c28dc4c37b5f48eb8505b60b1b2b0307aecd Mon Sep 17 00:00:00 2001 From: Stefano Ricci Date: Thu, 14 Nov 2024 11:41:33 +0100 Subject: [PATCH] geo attribute / show map: center map to polygon centroid --- webapp/components/Map/useMap.js | 29 ++++++++++++++----- webapp/utils/geoJsonUtils.js | 4 ++- .../convertDataToGeoJsonPoints.js | 1 - 3 files changed, 24 insertions(+), 10 deletions(-) diff --git a/webapp/components/Map/useMap.js b/webapp/components/Map/useMap.js index 135608211e..3dbbe40102 100644 --- a/webapp/components/Map/useMap.js +++ b/webapp/components/Map/useMap.js @@ -3,9 +3,27 @@ import { useCallback, useEffect, useState } from 'react' import { PointFactory, Points } from '@openforis/arena-core' import { useSurveySrsIndex } from '@webapp/store/survey' +import { GeoJsonUtils } from '@webapp/utils/geoJsonUtils' + +const calculateActualCenterPoint = ({ centerPoint, geoJson, markerPoint, srsIndex }) => { + if (markerPoint && Points.isValid(markerPoint, srsIndex)) { + return markerPoint + } + if (geoJson) { + const centroidFeaturePoint = GeoJsonUtils.centroid(geoJson.geometry) + const centroidPoint = GeoJsonUtils.pointFeatureToPoint(centroidFeaturePoint) + if (centroidPoint) { + return centroidPoint + } + } + if (centerPoint && Points.isValid(centerPoint, srsIndex)) { + return centerPoint + } + return PointFactory.createInstance({ x: 0, y: 0 }) +} export const useMap = (props) => { - const { centerPoint, markerPoint, onMarkerPointChange } = props + const { centerPoint, geoJson, markerPoint, onMarkerPointChange } = props const srsIndex = useSurveySrsIndex() @@ -30,18 +48,13 @@ export const useMap = (props) => { // on markerPoint update or after SRSs has been initialized, transform point to lat long useEffect(() => { - const actualCenterPoint = - markerPoint && Points.isValid(markerPoint, srsIndex) - ? markerPoint - : centerPoint && Points.isValid(centerPoint, srsIndex) - ? centerPoint - : PointFactory.createInstance({ x: 0, y: 0 }) + const actualCenterPoint = calculateActualCenterPoint({ centerPoint, geoJson, markerPoint, srsIndex }) setState((statePrev) => ({ ...statePrev, centerPositionLatLon: actualCenterPoint ? fromPointToLatLon(actualCenterPoint) : null, })) - }, [centerPoint, fromPointToLatLon, markerPoint, srsIndex]) + }, [centerPoint, fromPointToLatLon, geoJson, markerPoint, srsIndex]) const onMarkerPointUpdated = useCallback((markerPointUpdated) => { setState((statePrev) => ({ ...statePrev, markerPointUpdated })) diff --git a/webapp/utils/geoJsonUtils.js b/webapp/utils/geoJsonUtils.js index 4fa73d0631..eff975f8fa 100644 --- a/webapp/utils/geoJsonUtils.js +++ b/webapp/utils/geoJsonUtils.js @@ -2,6 +2,8 @@ import area from '@turf/area' import centroid from '@turf/centroid' import length from '@turf/length' +import { PointFactory } from '@openforis/arena-core' + const countVertices = (geoJson) => { const polygon = geoJson.type === 'Feature' ? geoJson.geometry : geoJson return polygon?.coordinates?.[0]?.length ?? 0 @@ -20,7 +22,7 @@ const parse = (geoJsonText) => { const pointFeatureToPoint = (pointFeature) => { if (!pointFeature) return null const [x, y] = pointFeature.geometry?.coordinates ?? [] - return { x, y } + return PointFactory.createInstance({ x, y }) } const validateFeature = (geoJson) => geoJson?.type === 'Feature' && !!geoJson.geometry diff --git a/webapp/views/App/views/Data/MapView/GeoAttributeDataLayer/convertDataToGeoJsonPoints.js b/webapp/views/App/views/Data/MapView/GeoAttributeDataLayer/convertDataToGeoJsonPoints.js index 6c9b8085b1..47dc890a33 100644 --- a/webapp/views/App/views/Data/MapView/GeoAttributeDataLayer/convertDataToGeoJsonPoints.js +++ b/webapp/views/App/views/Data/MapView/GeoAttributeDataLayer/convertDataToGeoJsonPoints.js @@ -41,7 +41,6 @@ const pointExtractorByNodeDefType = { }, [NodeDef.nodeDefType.geo]: ({ attributeValue }) => { const geoJson = JSON.parse(attributeValue) - const centroidFeaturePoint = GeoJsonUtils.centroid(geoJson.geometry) const point = GeoJsonUtils.pointFeatureToPoint(centroidFeaturePoint) return { point, properties: { data: geoJson } }