Merge pull request #1054 from geoadmin/master

Update develop with Master

src/modules/map/components/openlayers/OpenLayersMarker.vue

@@ -26,6 +26,10 @@ const props = defineProps({
         type: Number,
         default: -1,
     },
+    selectFeatureCallback: {
+        type: Function,
+        default: () => {},
+    },
 })
 const { position, markerStyle, zIndex } = toRefs(props)
 
@@ -45,7 +49,7 @@ const features = computed(() => {
 })
 
 const olMap = inject('olMap')
-useVectorLayer(olMap, features, zIndex, highlightFeatureStyle)
+useVectorLayer(olMap, features, zIndex, highlightFeatureStyle, props.selectFeatureCallback)
 
 watch(markerStyle, (newStyle) => {
     const olStyle = getMarkerStyle(newStyle)

src/modules/map/components/openlayers/OpenLayersPinnedLocation.vue

@@ -6,10 +6,20 @@ import { useLayerZIndexCalculation } from '@/modules/map/components/common/z-ind
 import OpenLayersMarker from '@/modules/map/components/openlayers/OpenLayersMarker.vue'
 
 const store = useStore()
+
 const pinnedLocation = computed(() => store.state.map.pinnedLocation)
 const previewedPinnedLocation = computed(() => store.state.map.previewedPinnedLocation)
 
 const { zIndexDroppedPin, zIndexPreviewPosition } = useLayerZIndexCalculation()
+
+const dispatcher = { dispatcher: 'OpenLayersPinnedLocation.vue' }
+
+function selectFeatureCallback() {
+    store.dispatch('setLocationPopupCoordinates', {
+        coordinates: pinnedLocation.value,
+        dispatcher,
+    })
+}
 </script>
 
 <template>
@@ -18,6 +28,7 @@ const { zIndexDroppedPin, zIndexPreviewPosition } = useLayerZIndexCalculation()
         :position="pinnedLocation"
         marker-style="balloon"
         :z-index="zIndexDroppedPin"
+        :select-feature-callback="selectFeatureCallback"
     />
     <OpenLayersMarker
         v-if="previewedPinnedLocation"

src/modules/map/components/openlayers/utils/useVectorLayer.composable.js

@@ -1,6 +1,7 @@
+import { Select } from 'ol/interaction'
 import { Vector as VectorLayer } from 'ol/layer'
 import { Vector as VectorSource } from 'ol/source'
-import { toValue, watchEffect } from 'vue'
+import { onUnmounted, toValue, watchEffect } from 'vue'
 
 import { highlightFeatureStyle } from '@/modules/map/components/openlayers/utils/markerStyle'
 import useAddLayerToMap from '@/modules/map/components/openlayers/utils/useAddLayerToMap.composable'
@@ -15,12 +16,14 @@ import { randomIntBetween } from '@/utils/numberUtils'
  * @param {Readonly<Ref<Number>>} zIndex
  * @param {Readonly<Ref<Feature[]>>} features
  * @param {Function} styleFunction
+ * @param {Function} onFeatureSelectCallback
  */
 export default function useVectorLayer(
     map,
     features,
     zIndex = -1,
-    styleFunction = highlightFeatureStyle
+    styleFunction = highlightFeatureStyle,
+    onFeatureSelectCallback = () => {}
 ) {
     const layer = new VectorLayer({
         id: `vector-layer-${randomIntBetween(0, 100000)}`,
@@ -31,11 +34,32 @@ export default function useVectorLayer(
     })
     useAddLayerToMap(layer, map, zIndex)
 
+    // Create and add the Select interaction to the map
+    const selectInteraction = new Select({
+        layers: [layer], // Only apply the interaction to this layer
+        style: null, // Do not update the style of the selected features
+    })
+    map.addInteraction(selectInteraction)
+
+    // Listen for feature selection
+    selectInteraction.on('select', function (event) {
+        if (event.selected.length > 0) {
+            event.selected.forEach((feature) => {
+                onFeatureSelectCallback(feature)
+            })
+        }
+    })
+
     watchEffect(() => {
         layer.getSource().clear()
         layer.getSource().addFeatures(toValue(features))
     })
 
+    // Clean up: remove the interaction when the composable is unmounted
+    onUnmounted(() => {
+        map.removeInteraction(selectInteraction)
+    })
+
     return {
         layer,
     }

src/store/modules/map.store.js

@@ -74,9 +74,9 @@ export default {
          * @param commit
          * @param {ClickInfo} clickInfo
          */
-        click: ({ commit }, { clickInfo, dispatcher }) => {
-            commit('setClickInfo', { clickInfo, dispatcher })
-        },
+        click: ({ commit }, { clickInfo, dispatcher }) =>
+            commit('setClickInfo', { clickInfo, dispatcher }),
+
         clearClick: ({ commit }, { dispatcher }) => {
             commit('setClickInfo', { clickInfo: null, dispatcher })
         },