fixed map not showing points using multiple SRSs (#3073)

Co-authored-by: Stefano Ricci <[email protected]>
Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

package.json

@@ -106,7 +106,7 @@
     "@mui/material": "^5.14.10",
     "@mui/x-data-grid": "^6.14.0",
     "@mui/x-date-pickers": "^6.14.0",
-    "@openforis/arena-core": "^0.0.169",
+    "@openforis/arena-core": "^0.0.171",
     "@openforis/arena-server": "^0.1.29",
     "@sendgrid/mail": "^7.7.0",
     "@shopify/draggable": "^1.0.0-beta.8",

server/modules/category/service/categoryService.js

@@ -122,22 +122,25 @@ export const fetchSamplingPointData = async ({ surveyId, levelIndex = 0, limit,
   const surveyInfo = Survey.getSurveyInfo(survey)
   const srsIndex = Survey.getSRSIndex(surveyInfo)
 
-  const samplingPointData = items.map((item) => {
+  const samplingPointData = items.reduce((acc, item) => {
     const location = CategoryItem.getExtraProp('location')(item)
+    if (!location) return acc
+
     const codes = CategoryItem.getCodesHierarchy(item)
     const point = Points.parse(location)
     const pointLatLong = Points.toLatLong(point, srsIndex)
 
     const record = recordFinder?.(item)
 
-    return {
+    acc.push({
       uuid: CategoryItem.getUuid(item),
       codes,
       latLng: [pointLatLong.y, pointLatLong.x],
       location,
       ...(record ? { recordUuid: Record.getUuid(record) } : {}),
-    }
-  })
+    })
+    return acc
+  }, [])
   return samplingPointData
 }
 

webapp/components/Map/MapLayersControl.js

@@ -4,6 +4,8 @@ import PropTypes from 'prop-types'
 
 import * as User from '@core/user/user'
 import { useUser } from '@webapp/store/user'
+import { useSurveyId } from '@webapp/store/survey'
+
 import { baseLayers } from './baseLayers'
 import { useMapContext } from './MapContext'
 import { WmtsComponent } from './WmtsComponent'
@@ -12,6 +14,7 @@ export const MapLayersControl = (props) => {
   const { layers } = props
 
   const user = useUser()
+  const surveyId = useSurveyId()
   const { contextObject, onBaseLayerUpdate } = useMapContext()
   const { baseLayer: contextBaseLayer } = contextObject
 
@@ -25,13 +28,16 @@ export const MapLayersControl = (props) => {
 
   const getTileUrl = useCallback(
     ({ url, apiKeyRequired, provider, user }) => {
-      if (!apiKeyRequired || typeof url === 'string') {
+      if (typeof url === 'string') {
         return url
       }
-      const apiKey = User.getMapApiKey({ provider })(user)
-      return apiKey ? url({ apiKey }) : null
+      if (apiKeyRequired) {
+        const apiKey = User.getMapApiKey({ provider })(user)
+        return apiKey ? url({ apiKey }) : null
+      }
+      return url({ surveyId })
     },
-    [user]
+    [surveyId]
   )
 
   return (

webapp/components/Map/baseLayers.js

@@ -85,7 +85,8 @@ export const baseLayers = [
     provider: baseLayerProviders.planet,
     periodSelectorAvailable: true,
     periodType: periodTypes.monthly,
-    url: getArenaMapUrl({ provider: baseLayerProviders.planet, period: planetDefaultPeriod }),
+    url: ({ surveyId }) =>
+      getArenaMapUrl({ surveyId, provider: baseLayerProviders.planet, period: planetDefaultPeriod }),
   },
   {
     key: 'planet_biannual_mosaics',
@@ -94,7 +95,8 @@ export const baseLayers = [
     provider: baseLayerProviders.planet,
     periodSelectorAvailable: true,
     periodType: periodTypes.biannual,
-    url: getArenaMapUrl({ provider: baseLayerProviders.planet, period: planetDefaultBiannualPeriod }),
+    url: ({ surveyId }) =>
+      getArenaMapUrl({ surveyId, provider: baseLayerProviders.planet, period: planetDefaultBiannualPeriod }),
   },
 ]
 

webapp/views/App/views/Data/MapView/SamplingPointDataLayer/useSamplingPointDataLayer.js

@@ -20,22 +20,25 @@ const itemsPageSize = 2000
 const _convertItemsToPoints = (items) => {
   const bounds = latLngBounds() // keep track of the layer bounds to calculate its center and pan the map into it
 
-  const points = items.map((item) => {
+  const points = items.reduce((acc, item) => {
     const { codes: itemCodes, latLng, location, uuid: itemUuid, recordUuid } = item
+    if (!latLng) return acc
+
     const [lat, long] = latLng
     const itemPoint = PointFactory.createInstance({ x: long, y: lat })
 
     bounds.extend([lat, long])
 
-    return {
+    acc.push({
       type: 'Feature',
       properties: { cluster: false, itemUuid, itemCodes, itemPoint, key: itemUuid, location, recordUuid },
       geometry: {
         type: 'Point',
         coordinates: [long, lat],
       },
-    }
-  })
+    })
+    return acc
+  }, [])
 
   return { points, bounds }
 }
@@ -115,7 +118,7 @@ export const useSamplingPointDataLayer = (props) => {
           const { points, bounds } = _convertItemsToPoints(items)
 
           // pan map into layer bounds center
-          if (map.getZoom() < 5) {
+          if (map.getZoom() < 5 && bounds) {
             map.panTo(bounds.getCenter())
           }
 

yarn.lock

@@ -2529,10 +2529,10 @@
     proj4 "^2.9.0"
     uuid "^9.0.0"
 
-"@openforis/arena-core@^0.0.169":
-  version "0.0.169"
-  resolved "https://npm.pkg.github.com/download/@openforis/arena-core/0.0.169/f3fcefbe0cac508bae6e0a7bb3bf10db49757490#f3fcefbe0cac508bae6e0a7bb3bf10db49757490"
-  integrity sha512-00MekgdM/ywIt21j9ml5BXG09AvWy/Qw7i75Qei25x58tCwMqSga+KpMS3+ZHOoP5mL45wfPOTCixMCUV4yvBw==
+"@openforis/arena-core@^0.0.171":
+  version "0.0.171"
+  resolved "https://npm.pkg.github.com/download/@openforis/arena-core/0.0.171/64ef31c177d290163a9098a47bc3530580d64c92#64ef31c177d290163a9098a47bc3530580d64c92"
+  integrity sha512-viQztU9jesu07Q8rs4W6z3ZM3WLL6w70o+WrKKiElNWY9X9iz1OQGmDOIWWTqALcxlXipUHqSmtLotKTKU7TIQ==
   dependencies:
     "@jsep-plugin/regex" "^1.0.3"
     bignumber.js "^9.1.2"