Fix polygon locations showing as points

package.json

@@ -22,7 +22,7 @@
     "@deltares/fews-ssd-webcomponent": "^1.0.2",
     "@deltares/fews-web-oc-charts": "^3.0.3-beta.6",
     "@deltares/fews-wms-requests": "^1.0.2",
-    "@indoorequal/vue-maplibre-gl": "^7.5.0",
+    "@indoorequal/vue-maplibre-gl": "^7.5.1",
     "@jsonforms/core": "^3.1.0",
     "@jsonforms/vue": "^3.1.0",
     "@jsonforms/vue-vuetify": "^3.1.0-preview.0",

src/components/spatialdisplay/SpatialDisplayComponent.vue

@@ -464,6 +464,11 @@ function setLayerOptions(): void {
 function onCoordinateClick(
   event: MapLayerMouseEvent | MapLayerTouchEvent,
 ): void {
+  if (workflowsStore.isSelectingCoordinate) {
+    workflowsStore.coordinate = event.lngLat
+    return
+  }
+
   emit(
     'coordinateClick',
     +event.lngLat.lat.toFixed(3),
@@ -505,15 +510,15 @@ function onCoordinateMoved(lat: number, lng: number): void {
   max-width: 100%;
   z-index: 3;
 }
+
+.mapcomponent__controls-container :deep(.v-slide-group__content) {
+  padding: 0 8px;
+}
 </style>
 
 <style>
 .maplibregl-ctrl-bottom-right,
 .maplibregl-ctrl-bottom-left {
   bottom: v-bind('offsetBottomControls') !important;
 }
-
-.control-group :deep(.v-slide-group__content) {
-  padding: 0 8px;
-}
 </style>

src/components/wms/AnimatedRasterLayer.vue

@@ -76,11 +76,13 @@ function onDoubleClick(event: MapLayerMouseEvent | MapLayerTouchEvent): void {
   emit('doubleclick', event)
 }
 
-function onStartLoading(): void {
+function onStartLoading(e: MapSourceDataEvent): void {
+  if (e.sourceId !== currentLayer) return
   isLoading.value = true
 }
 
-function onEndLoading(): void {
+function onEndLoading(e: MapSourceDataEvent): void {
+  if (e.sourceId !== currentLayer) return
   isLoading.value = false
 }
 

src/components/wms/CoordinateSelectorLayer.vue

@@ -5,18 +5,60 @@
     draggable
     :offset="[0, 4]"
     anchor="bottom"
+    @dragstart="onDragStart"
+    @dragend="onDragEnd"
   >
     <template #marker>
-      <v-icon size="32px" color="primary">mdi-map-marker</v-icon>
+      <v-icon size="32px" color="primary" class="marker-icon">
+        mdi-map-marker
+      </v-icon>
     </template>
   </mgl-marker>
 </template>
 
 <script setup lang="ts">
-import { MglMarker } from '@indoorequal/vue-maplibre-gl'
-import type { LngLat } from 'maplibre-gl'
+import { coordinateToString } from '@/lib/workflows'
+import { MglMarker, useMap } from '@indoorequal/vue-maplibre-gl'
+import { Popup, type LngLat } from 'maplibre-gl'
+import { watchEffect } from 'vue'
 
 const coordinate = defineModel<LngLat | null>('coordinate', {
   default: null,
 })
+
+const { map } = useMap()
+
+const tooltipPopup = new Popup({
+  closeButton: false,
+  closeOnClick: false,
+  focusAfterOpen: false,
+  subpixelPositioning: true,
+  offset: [0, -26],
+  className: 'coordinate-info-popup',
+  maxWidth: 'none',
+})
+
+watchEffect(() => {
+  if (!coordinate.value) return
+
+  tooltipPopup
+    .setText(coordinateToString(coordinate.value))
+    .setLngLat(coordinate.value)
+})
+
+function onDragStart() {
+  if (!map) return
+  tooltipPopup.addTo(map)
+}
+
+function onDragEnd() {
+  if (!map) return
+  tooltipPopup.remove()
+}
 </script>
+
+<style scoped>
+.marker-icon {
+  text-shadow: 0 0 5px var(--theme-color);
+}
+</style>

src/components/wms/LocationsLayer.vue

@@ -1,38 +1,60 @@
 <template>
   <mgl-geo-json-source :source-id="locationsSourceId" :data="geojson">
+    <mgl-fill-layer
+      :layer-id="locationsFillLayerId"
+      :paint="paintFillSpecification"
+      :filter="['==', '$type', 'Polygon']"
+    />
     <mgl-symbol-layer
       :layer-id="locationsSymbolLayerId"
       :layout="layoutSymbolSpecification"
       :paint="paintSymbolSpecification"
+      :filter="['all', ['has', 'iconName'], ['==', '$type', 'Point']]"
     />
     <mgl-circle-layer
       :layer-id="locationsCircleLayerId"
       :paint="paintCircleSpecification"
+      :filter="['all', ['!has', 'iconName'], ['==', '$type', 'Point']]"
     />
     <mgl-symbol-layer
       v-if="showNames"
       :layer-id="locationsTextLayerId"
       :layout="layoutTextSpecification"
       :paint="paintTextSpecification"
+      :filter="['==', '$type', 'Point']"
     />
   </mgl-geo-json-source>
+  <mgl-marker
+    v-if="selectedLocationCoordinates"
+    :coordinates="selectedLocationCoordinates"
+    :offset="[0, 4]"
+    anchor="bottom"
+  >
+    <template #marker>
+      <v-icon class="text-shadow" size="32px">mdi-map-marker</v-icon>
+    </template>
+  </mgl-marker>
 </template>
 
 <script setup lang="ts">
 import {
+  MglFillLayer,
   MglCircleLayer,
   MglSymbolLayer,
   MglGeoJsonSource,
+  MglMarker,
   useMap,
 } from '@indoorequal/vue-maplibre-gl'
 import { FeatureCollection, Geometry } from 'geojson'
 import { type Location } from '@deltares/fews-pi-requests'
 import {
-  MapLayerMouseEvent,
-  MapLayerTouchEvent,
-  MapSourceDataEvent,
+  LngLat,
+  type MapGeoJSONFeature,
+  type MapLayerMouseEvent,
+  type MapLayerTouchEvent,
+  type MapSourceDataEvent,
 } from 'maplibre-gl'
-import { watch, onBeforeUnmount, computed } from 'vue'
+import { watch, onBeforeUnmount, computed, ref } from 'vue'
 import { onBeforeMount } from 'vue'
 import { addLocationIconsToMap } from '@/lib/location-icons'
 import { useDark } from '@vueuse/core'
@@ -70,6 +92,17 @@ const geojson = computed<FeatureCollection<Geometry, Location>>(() => ({
 
 const emit = defineEmits(['click'])
 
+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)
+})
+
 const layoutSymbolSpecification = {
   'icon-allow-overlap': true,
   'symbol-sort-key': ['get', 'sortKey'],
@@ -108,10 +141,54 @@ const paintCircleSpecification = {
   'circle-stroke-width': 1.5,
 }
 
+function getDarkPaintFillSpecification(selectedId: string, hoverId: string) {
+  return {
+    'fill-color': 'darkgrey',
+    'fill-opacity': [
+      'match',
+      ['get', 'locationId'],
+      selectedId,
+      0.35,
+      hoverId,
+      0.3,
+      0.2,
+    ],
+    'fill-outline-color': 'white',
+  }
+}
+
+function getLightPaintFillSpecification(selectedId: string, hoverId: string) {
+  return {
+    'fill-color': '#dfdfdf',
+    'fill-opacity': [
+      'match',
+      ['get', 'locationId'],
+      selectedId,
+      0.8,
+      hoverId,
+      0.6,
+      0.3,
+    ],
+    'fill-outline-color': 'black',
+  }
+}
+
+const paintFillSpecification = computed(() => {
+  const selectedId = props.selectedLocationId ?? 'invalid-no-layer-selected'
+  const hoverId =
+    hoveredStateId.value === selectedId
+      ? 'invalid-already-selected'
+      : (hoveredStateId.value ?? 'invalid-no-hover')
+  return isDark.value
+    ? getDarkPaintFillSpecification(selectedId, hoverId)
+    : getLightPaintFillSpecification(selectedId, hoverId)
+})
+
 const locationsCircleLayerId = 'location-circle-layer'
 const locationsSymbolLayerId = 'location-symbol-layer'
 const locationsTextLayerId = 'location-text-layer'
 const locationsSourceId = 'location-source'
+const locationsFillLayerId = 'location-fill-layer'
 
 watch(geojson, () => {
   addLocationIcons()
@@ -126,24 +203,38 @@ watch(
 
 onBeforeMount(() => {
   if (map) {
-    for (const layerId of [locationsCircleLayerId, locationsSymbolLayerId]) {
+    for (const layerId of [
+      locationsCircleLayerId,
+      locationsSymbolLayerId,
+      locationsFillLayerId,
+    ]) {
       map.on('click', layerId, clickHandler)
       map.on('mouseenter', layerId, setCursorPointer)
       map.on('mouseleave', layerId, unsetCursorPointer)
     }
     map.on('sourcedata', sourceDateLoaded)
+
+    map.on('mousemove', locationsFillLayerId, onFillMouseMove)
+    map.on('mouseleave', locationsFillLayerId, onFillMouseLeave)
   }
   addLocationIcons()
 })
 
 onBeforeUnmount(() => {
   if (map) {
-    for (const layerId of [locationsCircleLayerId, locationsSymbolLayerId]) {
+    for (const layerId of [
+      locationsCircleLayerId,
+      locationsSymbolLayerId,
+      locationsFillLayerId,
+    ]) {
       map.off('click', layerId, clickHandler)
       map.off('mouseenter', layerId, setCursorPointer)
       map.off('mouseleave', layerId, unsetCursorPointer)
     }
     map.off('sourcedata', sourceDateLoaded)
+
+    map.off('mousemove', locationsFillLayerId, onFillMouseMove)
+    map.off('mouseleave', locationsFillLayerId, onFillMouseLeave)
   }
 })
 
@@ -157,8 +248,13 @@ function addLocationIcons() {
 
 function clickHandler(event: MapLayerMouseEvent | MapLayerTouchEvent): void {
   if (map) {
+    const layers = [
+      locationsSymbolLayerId,
+      locationsCircleLayerId,
+      locationsFillLayerId,
+    ].filter((layerId) => map.getLayer(layerId))
     const features = map.queryRenderedFeatures(event.point, {
-      layers: [locationsSymbolLayerId, locationsCircleLayerId],
+      layers,
     })
     if (!features.length) return
     // Prioratise clicks on the top-most feature
@@ -175,6 +271,18 @@ function unsetCursorPointer() {
   if (map) map.getCanvas().style.cursor = ''
 }
 
+const hoveredStateId = ref<string>()
+
+function onFillMouseLeave() {
+  hoveredStateId.value = undefined
+}
+
+function onFillMouseMove(
+  e: MapLayerMouseEvent & { features?: MapGeoJSONFeature[] },
+) {
+  hoveredStateId.value = e.features?.[0].properties.locationId
+}
+
 function sourceDateLoaded(e: MapSourceDataEvent) {
   if (e.sourceId === locationsSourceId && e.sourceDataType === 'metadata') {
     highlightSelectedLocationOnMap()
@@ -185,18 +293,6 @@ function highlightSelectedLocationOnMap() {
   if (!map?.getSource(locationsSourceId)) return
   const locationId = props.selectedLocationId ?? 'noLayerSelected'
 
-  // Move the selected location from the symbol layer to the circle layer, or vice versa
-  map.setFilter(locationsSymbolLayerId, [
-    'any',
-    ['has', 'iconName'],
-    ['==', 'locationId', locationId],
-  ])
-  map.setFilter(locationsCircleLayerId, [
-    'all',
-    ['!has', 'iconName'],
-    ['!=', 'locationId', locationId],
-  ])
-
   // Set the icon for the selected location
   map.setLayoutProperty(locationsSymbolLayerId, 'icon-image', [
     'match',
@@ -232,3 +328,9 @@ function onLocationClick(event: MapLayerMouseEvent | MapLayerTouchEvent): void {
   emit('click', event)
 }
 </script>
+
+<style scoped>
+.text-shadow {
+  text-shadow: 0 0 5px var(--theme-color);
+}
+</style>