From e6ecbd09e44436e93bb49b888726eaaa36941d31 Mon Sep 17 00:00:00 2001
From: hvangeffen <hunter.vangeffen@vortech.nl>
Date: Mon, 30 Sep 2024 14:42:36 +0200
Subject: [PATCH] Center selected location marker when location is point
 geometry

---
 src/components/wms/LocationsLayer.vue | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/wms/LocationsLayer.vue b/src/components/wms/LocationsLayer.vue
index c7675973..c96c0ca3 100644
--- a/src/components/wms/LocationsLayer.vue
+++ b/src/components/wms/LocationsLayer.vue
@@ -45,7 +45,7 @@ import {
   MglMarker,
   useMap,
 } from '@indoorequal/vue-maplibre-gl'
-import { FeatureCollection, Geometry } from 'geojson'
+import type { FeatureCollection, Geometry, Point } from 'geojson'
 import { type Location } from '@deltares/fews-pi-requests'
 import {
   LngLat,
@@ -95,11 +95,20 @@ const selectedLocationCoordinates = computed(() => {
   const selectedLocation = geojson.value.features.find(
     (feature) => feature.properties.locationId === props.selectedLocationId,
   )
-  const lat = selectedLocation?.properties.lat
-  const lng = selectedLocation?.properties.lon
-  if (!lat || !lng) return
 
-  return new LngLat(+lng, +lat)
+  if (selectedLocation?.geometry.type == 'Point') {
+    const geometry = selectedLocation.geometry as Point
+    const lng = geometry.coordinates[0]
+    const lat = geometry.coordinates[1]
+
+    return new LngLat(lng, lat)
+  } else {
+    const lat = selectedLocation?.properties.lat
+    const lng = selectedLocation?.properties.lon
+    if (!lat || !lng) return undefined
+
+    return new LngLat(+lng, +lat)
+  }
 })
 
 const layoutSymbolSpecification = {