From 95fda3abf44f6745c4050dd29ec91b83cca597e2 Mon Sep 17 00:00:00 2001
From: hvangeffen <hunter.vangeffen@vortech.nl>
Date: Thu, 27 Mar 2025 11:53:51 +0100
Subject: [PATCH] Center selected location marker when location is point
 geometry

---
 src/components/wms/LocationsLayer.vue | 29 ++++++++++++++++++++-------
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/components/wms/LocationsLayer.vue b/src/components/wms/LocationsLayer.vue
index 30234bf75..563708ca2 100644
--- a/src/components/wms/LocationsLayer.vue
+++ b/src/components/wms/LocationsLayer.vue
@@ -44,7 +44,7 @@ import {
   MglGeoJsonSource,
   MglMarker,
 } from '@indoorequal/vue-maplibre-gl'
-import { FeatureCollection, Geometry } from 'geojson'
+import type { Feature, FeatureCollection, Geometry } from 'geojson'
 import { type Location } from '@deltares/fews-pi-requests'
 import {
   LngLat,
@@ -97,14 +97,29 @@ const selectedLocationsCoordinates = computed(() => {
     props.selectedLocationIds?.includes(feature.properties.locationId),
   )
 
-  return selectedLocations.flatMap((feature) => {
-    const lat = feature.properties.lat
-    const lon = feature.properties.lon
-    if (!lat || !lon) return []
-    return [new LngLat(+lon, +lat)]
-  })
+  return selectedLocations
+    .flatMap(getLngLatForFeature)
+    .filter((lngLat) => lngLat !== undefined)
 })
 
+function getLngLatForFeature(feature: Feature<Geometry, Location>) {
+  const geometry = feature.geometry
+  if (geometry.type === 'Point') {
+    const lng = geometry.coordinates[0]
+    const lat = geometry.coordinates[1]
+
+    return new LngLat(lng, lat)
+  }
+
+  const properties = feature.properties
+  if (properties.lon && properties.lat) {
+    const lng = +properties.lon
+    const lat = +properties.lat
+
+    return new LngLat(lng, lat)
+  }
+}
+
 const layoutSymbolSpecification = {
   'icon-allow-overlap': true,
   'icon-image': ['get', 'iconName'],