From 75c3c6d928019483258fae78241bec8485d08cce Mon Sep 17 00:00:00 2001
From: Hendrik Oenings <hendrik.oenings@dataport.de>
Date: Fri, 7 Aug 2026 17:44:54 +0200
Subject: [PATCH] feat(core)!: rework markers for cluster usage

The current implementation used `selectedBaseFeature` to keep track of
which feature to select when zooming in and out.  This did not work
properly, and is not intuitive either.

Therefore, we split the (meant) hovered or selected feature and its
(rendered) hovered or selected cluster.  If the layer does not use
clustering, cluster and feature are equivalent.

This has the additional advantage that `isSelectable` does no longer
consider the cluster, but an actual feature, such that the
implementation is automatically cluster-agnostical now.

This allows the GFI plugin to adapt this new API.  When
`bindWithCoreHoverSelect` is used now, the synchronization with the
markers is now truly bi-directional and wrapped in a single,
easy-to-understand composable.  To allow the synchronization from the
details view back to the marker store, the selected feature is moved to
the GFI main store as a shared state between list view and details view.

One could possibly split these changes into two or three (still
atomical) commits.  However, the changes only make sense in the context
of this refactoring idea, and are therefore combined to one commit on
purpose.
---
 examples/generic/index.js                     |  10 +-
 .../github-io/components/HeroPolarMap.vue     |   9 +-
 examples/snowbox/index.js                     |  10 +-
 src/core/components/PolarContainer.ce.vue     |   6 +-
 src/core/components/PolarMap.ce.vue           |   5 +-
 src/core/composables/useClusterMarker.ts      |  71 ++++
 src/core/stores/index.ts                      |  64 ++-
 src/core/stores/marker.ts                     | 271 +++++++++++--
 src/core/types/marker.ts                      |  26 --
 src/core/utils/map/resolveClusterClick.ts     |  17 +
 src/core/utils/map/setupMarkers.ts            | 369 ------------------
 src/plugins/gfi/components/GfiFeature.ce.vue  |  22 +-
 .../gfi/components/GfiFeatureList.ce.vue      |  16 +-
 .../composables/useBindWithCoreHoverSelect.ts | 143 ++++---
 .../gfi/composables/useSelectedFeatures.ts    | 125 +++++-
 src/plugins/gfi/store.ts                      |  32 +-
 src/plugins/gfi/stores/feature.ts             |  69 ++--
 src/plugins/gfi/stores/list.ts                |  77 ++--
 src/plugins/gfi/stores/main.ts                |  11 +-
 19 files changed, 708 insertions(+), 645 deletions(-)
 create mode 100644 src/core/composables/useClusterMarker.ts
 create mode 100644 src/core/utils/map/resolveClusterClick.ts
 delete mode 100644 src/core/utils/map/setupMarkers.ts

diff --git a/examples/generic/index.js b/examples/generic/index.js
index cb3edfba1d..74060a739a 100644
--- a/examples/generic/index.js
+++ b/examples/generic/index.js
@@ -11,15 +11,7 @@ let colorScheme = 'light'
 
 // arbitrary condition for testing
 const isEvenId = (mmlid) => Number(mmlid.slice(-1)) % 2 === 0
-
-// NOTE: This function is only usable if the layer is clustered
-const isReportSelectable = (feature) =>
-	feature
-		.get('features')
-		.reduce(
-			(accumulator, current) => isEvenId(current.get('mmlid')) || accumulator,
-			false
-		)
+const isReportSelectable = (feature) => isEvenId(feature.get('mmlid'))
 
 const map = await createMap(
 	'polarstern',
diff --git a/examples/github-io/components/HeroPolarMap.vue b/examples/github-io/components/HeroPolarMap.vue
index 7ee52c1526..2a0067a995 100644
--- a/examples/github-io/components/HeroPolarMap.vue
+++ b/examples/github-io/components/HeroPolarMap.vue
@@ -7,7 +7,6 @@
 </template>
 
 <script setup lang="ts">
-import type { Feature } from 'ol'
 import type { MpapiParameters } from '@/lib/getFeatures/types'
 
 import { createMap } from '@polar/polar/client'
@@ -20,13 +19,7 @@ const reports = '6059'
 const hamburgBorder = '1693'
 
 const isEvenId = (mmlid: string) => Number(mmlid.slice(-1)) % 2 === 0
-
-const isReportSelectable = (feature: Feature) =>
-	(feature.get('features') as Feature[]).reduce(
-		(acc: boolean, curr: Feature) =>
-			isEvenId(curr.get('mmlid') as string) || acc,
-		false
-	)
+const isReportSelectable = (feature) => isEvenId(feature.get('mmlid'))
 
 onMounted(async () => {
 	await createMap(
diff --git a/examples/snowbox/index.js b/examples/snowbox/index.js
index 81b621088b..a1f93532ee 100644
--- a/examples/snowbox/index.js
+++ b/examples/snowbox/index.js
@@ -80,15 +80,7 @@ const dataportTheme = {
 
 // arbitrary condition for testing
 const isEvenId = (mmlid) => Number(mmlid.slice(-1)) % 2 === 0
-
-// NOTE: This function is only usable if the layer is clustered
-const isReportSelectable = (feature) =>
-	feature
-		.get('features')
-		.reduce(
-			(accumulator, current) => isEvenId(current.get('mmlid')) || accumulator,
-			false
-		)
+const isReportSelectable = (feature) => isEvenId(feature.get('mmlid'))
 
 const map = await createMap(
 	'snowbox',
diff --git a/src/core/components/PolarContainer.ce.vue b/src/core/components/PolarContainer.ce.vue
index aec8d30efa..61a5122817 100644
--- a/src/core/components/PolarContainer.ce.vue
+++ b/src/core/components/PolarContainer.ce.vue
@@ -49,10 +49,10 @@ import { useT } from '../composables/useT'
 import { useCoreStore } from '../stores'
 import { useContextMenuStore } from '../stores/contextMenu'
 import { useMainStore } from '../stores/main'
+import { useMarkerStore } from '../stores/marker'
 import { useMoveHandleStore } from '../stores/moveHandle'
 import { CoreId } from '../types'
 import { loadKern } from '../utils/loadKern'
-import { teardownMarkers } from '../utils/map/setupMarkers'
 import { mapZoomOffset } from '../utils/mapZoomOffset'
 import ContextMenu from './ContextMenu.ce.vue'
 import MoveHandle from './MoveHandle.ce.vue'
@@ -223,6 +223,8 @@ function openContextMenu(e: MouseEvent) {
 	)
 }
 
+const markerStore = useMarkerStore()
+
 onMounted(() => {
 	mainStore.lightElement = useHost()
 	mainStore.shadowRoot = useShadowRoot()
@@ -266,7 +268,7 @@ onBeforeUnmount(() => {
 	mapEl.removeEventListener('contextmenu', openContextMenu)
 	document.removeEventListener('pointerdown', contextMenuStore.dismiss)
 	if (mainStore.configuration.markers) {
-		teardownMarkers(mainStore.map)
+		markerStore.teardown()
 	}
 	mainStore.map.dispose()
 	mapEl.replaceChildren()
diff --git a/src/core/components/PolarMap.ce.vue b/src/core/components/PolarMap.ce.vue
index f57c76755a..f872da1444 100644
--- a/src/core/components/PolarMap.ce.vue
+++ b/src/core/components/PolarMap.ce.vue
@@ -20,10 +20,10 @@ import { markRaw, onBeforeUnmount, onMounted, useTemplateRef, watch } from 'vue'
 
 import { useContextMenuStore } from '../stores/contextMenu'
 import { useMainStore } from '../stores/main'
+import { useMarkerStore } from '../stores/marker'
 import { CoreId } from '../types'
 import { checkServiceAvailability } from '../utils/checkServiceAvailability'
 import { createKeyboardInteractions } from '../utils/interactions'
-import { setupMarkers } from '../utils/map/setupMarkers'
 import { setupStyling } from '../utils/map/setupStyling'
 import { updateDragAndZoomInteractions } from '../utils/map/updateDragAndZoomInteractions'
 
@@ -35,6 +35,7 @@ const emit = defineEmits(['updateListeners', 'wheel'])
 const mainStore = useMainStore()
 const { hasWindowSize, hasSmallDisplay, center, extent, zoom } =
 	storeToRefs(mainStore)
+const markerStore = useMarkerStore()
 const contextMenuStore = useContextMenuStore()
 
 function onMove() {
@@ -109,7 +110,7 @@ onMounted(async () => {
 		checkServiceAvailability(mainStore.configuration, mainStore.serviceRegister)
 	}
 	if (mainStore.configuration.markers) {
-		setupMarkers(mainStore.map)
+		markerStore.setup()
 	}
 	await setupStyling(
 		mainStore.map,
diff --git a/src/core/composables/useClusterMarker.ts b/src/core/composables/useClusterMarker.ts
new file mode 100644
index 0000000000..fb65ee5f73
--- /dev/null
+++ b/src/core/composables/useClusterMarker.ts
@@ -0,0 +1,71 @@
+import type { Feature, Map } from 'ol'
+import type { Point } from 'ol/geom'
+import type { Style } from 'ol/style'
+import type { ShallowRef } from 'vue'
+
+import { computed, markRaw, shallowRef, watch } from 'vue'
+
+import { findLayer } from '@/lib/findLayer'
+import getCluster from '@/lib/getCluster'
+
+import { useMainStore } from '../stores/main'
+
+function getClusterSafe(map: Map, feature: Feature) {
+	const layerId = feature.get('_polarLayerId') as string
+	// @ts-expect-error | Found layers always have a source and getDistance is defined on cluster sources.
+	return typeof findLayer(map, layerId)?.getSource().getDistance === 'function'
+		? getCluster(map, feature, '_polarLayerId')
+		: feature
+}
+
+export function useClusterMarker(
+	feature: ShallowRef<Feature | null>,
+	style: (active: boolean, feature: Feature) => Style
+) {
+	const mainStore = useMainStore()
+
+	const cluster = shallowRef<Feature | null>(null)
+	const clusterFeatures = computed(
+		() => (cluster.value?.get('features') ?? []) as Feature[]
+	)
+	const clusterCoordinates = computed(() =>
+		cluster.value === null
+			? null
+			: ((cluster.value.getGeometry() as Point).getCoordinates() as [
+					number,
+					number,
+				])
+	)
+
+	function updateCluster(newFeature: Feature | null) {
+		const newCluster =
+			newFeature === null
+				? null
+				: markRaw(getClusterSafe(mainStore.map, newFeature))
+
+		if (cluster.value === newCluster) {
+			return
+		}
+
+		if (cluster.value) {
+			cluster.value.setStyle(style(false, cluster.value))
+		}
+
+		cluster.value = newCluster
+
+		if (cluster.value) {
+			cluster.value.setStyle(style(true, cluster.value))
+		}
+	}
+
+	watch(feature, updateCluster, { immediate: true })
+
+	watch(
+		() => mainStore.zoom,
+		() => {
+			updateCluster(feature.value)
+		}
+	)
+
+	return { cluster, clusterFeatures, clusterCoordinates }
+}
diff --git a/src/core/stores/index.ts b/src/core/stores/index.ts
index a81c6d0b07..3976d6a958 100644
--- a/src/core/stores/index.ts
+++ b/src/core/stores/index.ts
@@ -4,12 +4,9 @@
  */
 /* eslint-enable tsdoc/syntax */
 
-import type { Feature } from 'ol'
-
 import { acceptHMRUpdate, defineStore, storeToRefs } from 'pinia'
-import { computed } from 'vue'
+import { computed, readonly } from 'vue'
 
-import { updateSelection } from '../utils/map/setupMarkers'
 import { useContextMenuStore } from './contextMenu'
 import { useMainStore } from './main'
 import { useMarkerStore } from './marker'
@@ -286,11 +283,41 @@ export const useCoreStore = defineStore('core', () => {
 		 *
 		 * @alpha
 		 */
-		hoveredFeature: markerStoreRefs.hovered,
+		hoveredFeature: markerStoreRefs.hoveredFeature,
+
+		/**
+		 * Feature that is hovered by the user with a marker.
+		 * If the layer does not use clustering, this is the same as {@link hoveredFeature}.
+		 * Otherwise, this is the cluster feature that contains the {@link hoveredFeature}.
+		 *
+		 * @readonly
+		 * @alpha
+		 */
+		hoveredCluster: readonly(markerStoreRefs.hoveredCluster),
+
+		/**
+		 * Features that are hovered by the user with a marker.
+		 * If the layer does not use clustering, this is an array with a single element, which is the same as {@link hoveredFeature}.
+		 * Otherwise, this is an array of all features that are contained in the {@link hoveredCluster}.
+		 *
+		 * @readonly
+		 * @alpha
+		 */
+		hoveredClusterFeatures: markerStoreRefs.hoveredClusterFeatures,
+
+		/**
+		 * Coordinates that were hovered by the user with a marker.
+		 *
+		 * @readonly
+		 */
+		hoveredCoordinates: computed(() => markerStore.hoveredCoordinates),
 
 		/**
 		 * Feature that was selected by the user with a marker.
 		 *
+		 * You may not set this to a cluster feature.
+		 * Setting this value to a cluster feature has no effect, however, this may change in the future.
+		 *
 		 * If this value is modified, the newly selected feature is centered on the map.
 		 *
 		 * @remarks
@@ -301,12 +328,35 @@ export const useCoreStore = defineStore('core', () => {
 		 * @alpha
 		 */
 		selectedFeature: computed({
-			get: () => markerStore.selected,
+			get: () => markerStore.selectedFeature,
 			set: (feature) => {
-				updateSelection(mainStore.map, feature as Feature, true)
+				if (feature?.get('features')) {
+					return
+				}
+				markerStore.selectedFeature = feature
 			},
 		}),
 
+		/**
+		 * Feature that is marked as selected on the map.
+		 * If the layer does not use clustering, this is the same as {@link selectedFeature}.
+		 * Otherwise, this is the cluster feature that contains the {@link selectedFeature}.
+		 *
+		 * @readonly
+		 * @alpha
+		 */
+		selectedCluster: readonly(markerStoreRefs.selectedCluster),
+
+		/**
+		 * Features that are marked as selected on the map.
+		 * If the layer does not use clustering, this is an array with a single element, which is the same as {@link selectedFeature}.
+		 * Otherwise, this is an array of all features that are contained in the {@link selectedCluster}.
+		 *
+		 * @readonly
+		 * @alpha
+		 */
+		selectedClusterFeatures: markerStoreRefs.selectedClusterFeatures,
+
 		/**
 		 * Coordinates that were selected by the user with a marker.
 		 *
diff --git a/src/core/stores/marker.ts b/src/core/stores/marker.ts
index cf91f5dad7..c0ae8ce6ad 100644
--- a/src/core/stores/marker.ts
+++ b/src/core/stores/marker.ts
@@ -1,54 +1,265 @@
-import type { Feature } from 'ol'
-import type { Point } from 'ol/geom'
-import type { CallOnMapSelect } from '../types'
+import type { Feature, MapBrowserEvent } from 'ol'
+import type BaseLayer from 'ol/layer/Base'
+import type VectorLayer from 'ol/layer/Vector'
+import type { Style } from 'ol/style'
+import type {
+	MarkerLayer,
+	MarkerLayerConfiguration,
+	MarkerStyle,
+} from '../types'
 
+import { toMerged } from 'es-toolkit'
 import { acceptHMRUpdate, defineStore } from 'pinia'
-import { computed, shallowRef, watch } from 'vue'
+import { computed, ref, shallowRef } from 'vue'
 
+import { isVisible } from '@/lib/invisibleStyle'
+
+import { useClusterMarker } from '../composables/useClusterMarker'
+import { resolveClusterClick } from '../utils/map/resolveClusterClick'
+import { getMarkerStyle } from '../utils/markers'
 import { useMainStore } from './main'
 
+// these have been measured to fit once and influence marker size
+const imgSize: [number, number] = [26, 36]
+const imgSizeMulti: [number, number] = [40, 36]
+
+const defaultStroke = '#FFFFFF'
+const defaultStrokeWidth = '2'
+
+const defaultStyle: MarkerStyle = {
+	clusterSize: imgSizeMulti,
+	fill: '#005CA9',
+	size: imgSize,
+	stroke: defaultStroke,
+	strokeWidth: defaultStrokeWidth,
+}
+const hoverStyle: MarkerStyle = {
+	clusterSize: imgSizeMulti,
+	fill: '#7B1045',
+	size: imgSize,
+	stroke: defaultStroke,
+	strokeWidth: defaultStrokeWidth,
+}
+const selectionStyle: MarkerStyle = {
+	clusterSize: imgSizeMulti,
+	fill: '#679100',
+	size: imgSize,
+	stroke: defaultStroke,
+	strokeWidth: defaultStrokeWidth,
+}
+const unselectableStyle: MarkerStyle = {
+	clusterSize: imgSizeMulti,
+	fill: '#333333',
+	size: imgSize,
+	stroke: defaultStroke,
+	strokeWidth: defaultStrokeWidth,
+}
+
+const layerDefaults = {
+	defaultStyle,
+	hoverStyle,
+	selectionStyle,
+	unselectableStyle,
+	isSelectable: () => true,
+} satisfies Partial<MarkerLayerConfiguration>
+
 export const useMarkerStore = defineStore('marker', () => {
 	const mainStore = useMainStore()
 	const configuration = computed(() => mainStore.configuration.markers)
 
-	const callOnMapSelect = computed(() =>
-		typeof configuration.value?.callOnMapSelect === 'function'
-			? (configuration.value.callOnMapSelect as CallOnMapSelect)
-			: null
+	const layers = computed(
+		() =>
+			configuration.value?.layers.map((layer) =>
+				toMerged(layerDefaults, layer)
+			) ?? []
+	)
+
+	function getLayerConfiguration(id: string) {
+		return layers.value.find((layer) => layer.id === id) as MarkerLayer
+	}
+
+	function layerFilter(layer: BaseLayer) {
+		return layers.value.some(({ id }) => id === (layer.get('id') as string))
+	}
+
+	function getStyle(
+		feature: Feature,
+		layerId: string,
+		hovered: boolean,
+		selected: boolean
+	): Style {
+		const layerConfiguration = getLayerConfiguration(layerId)
+		const clusterFeatures = feature.get('features') || [feature]
+		return getMarkerStyle(
+			clusterFeatures.some(layerConfiguration.isSelectable)
+				? selected
+					? layerConfiguration.selectionStyle
+					: hovered
+						? layerConfiguration.hoverStyle
+						: layerConfiguration.defaultStyle
+				: layerConfiguration.unselectableStyle,
+			feature.get('features')?.length > 1
+		)
+	}
+
+	const selectedFeature = shallowRef<Feature | null>(null)
+	const {
+		cluster: selectedCluster,
+		clusterFeatures: selectedClusterFeatures,
+		clusterCoordinates: selectedCoordinates,
+	} = useClusterMarker(selectedFeature, (active, cluster) =>
+		getStyle(
+			cluster,
+			cluster.get('_polarLayerId'),
+			cluster === hoveredCluster.value,
+			active
+		)
+	)
+
+	const hoveredFeature = shallowRef<Feature | null>(null)
+	const {
+		cluster: hoveredCluster,
+		clusterFeatures: hoveredClusterFeatures,
+		clusterCoordinates: hoveredCoordinates,
+	} = useClusterMarker(hoveredFeature, (active, cluster) =>
+		getStyle(
+			cluster,
+			cluster.get('_polarLayerId'),
+			active,
+			cluster === selectedCluster.value
+		)
 	)
+
+	function mapPointerMove({ map, pixel }: MapBrowserEvent) {
+		const feature = map.getFeaturesAtPixel(pixel, {
+			layerFilter,
+		})[0] as Feature | null
+
+		if (!feature) {
+			hoveredFeature.value = null
+			return
+		}
+
+		const layerConfiguration = getLayerConfiguration(
+			feature.get('_polarLayerId') as string
+		)
+
+		const clusterFeatures = feature.get('features') || [feature]
+		const selectableClusterFeatures = clusterFeatures.filter(
+			layerConfiguration.isSelectable
+		)
+		if (selectableClusterFeatures.length === 0) {
+			return
+		}
+
+		hoveredFeature.value = selectableClusterFeatures[0]
+	}
+
 	const clusterClickZoom = computed(
 		() => (configuration.value?.clusterClickZoom as boolean) || false
 	)
 
-	const hovered = shallowRef<Feature | null>(null)
-	const selected = shallowRef<Feature | null>(null)
-	const selectedCoordinates = computed(() =>
-		selected.value === null
-			? null
-			: (selected.value.getGeometry() as Point).getCoordinates()
+	const isMaxZoom = computed(
+		() => mainStore.map.getView().getMaxZoom() === mainStore.zoom
+	)
+
+	const lastClickEvent = ref<PointerEvent | KeyboardEvent | WheelEvent | null>(
+		null
 	)
 
-	const selectedBaseFeature = shallowRef<Feature | null>(null)
-	watch(selected, (feature) => {
-		if (feature) {
-			const childFeatures = feature.get('features') as Feature[] | undefined
-			if (childFeatures?.length === 1 && childFeatures[0]) {
-				selectedBaseFeature.value = childFeatures[0]
-			}
-		} else {
-			selectedBaseFeature.value = null
+	function mapClick(event: MapBrowserEvent) {
+		const { map, pixel } = event
+		const feature = map.getFeaturesAtPixel(pixel, {
+			layerFilter,
+		})[0] as Feature | null
+
+		if (!feature) {
+			selectedFeature.value = null
+			return
+		}
+
+		const layerConfiguration = getLayerConfiguration(
+			feature.get('_polarLayerId') as string
+		)
+
+		const clusterFeatures = feature.get('features') || [feature]
+		const selectableClusterFeatures = clusterFeatures.filter(
+			layerConfiguration.isSelectable
+		)
+		if (selectableClusterFeatures.length === 0) {
+			return
 		}
-	})
+
+		event.stopPropagation()
+		lastClickEvent.value = event.originalEvent
+
+		if (
+			clusterClickZoom.value &&
+			clusterFeatures.length > 1 &&
+			!isMaxZoom.value
+		) {
+			resolveClusterClick(map, feature)
+			return
+		}
+
+		selectedFeature.value = selectableClusterFeatures[0]
+	}
+
+	function mapSingleClick(event: MapBrowserEvent) {
+		if (event.originalEvent === lastClickEvent.value) {
+			event.stopPropagation()
+		}
+	}
+
+	function setup() {
+		mainStore.map
+			.getLayers()
+			.getArray()
+			.filter(layerFilter)
+			.forEach((layer) => {
+				// only vector layers reach this
+				const source = (layer as VectorLayer).getSource()
+				if (source !== null) {
+					// @ts-expect-error | Undocumented hook.
+					source.geometryFunction =
+						// prevents features from jumping due to invisible features "pulling"
+						(feature: Feature) =>
+							isVisible(feature) ? feature.getGeometry() : null
+					source.on('addfeature', (event) => {
+						event.feature.set('_polarLayerId', layer.get('id'), true)
+						;(event.feature.get('features') || []).forEach((feature) => {
+							feature.set('_polarLayerId', layer.get('id'), true)
+						})
+					})
+				}
+				;(layer as VectorLayer).setStyle((feature) =>
+					getStyle(feature as Feature, layer.get('id'), false, false)
+				)
+			})
+
+		mainStore.map.on('pointermove', mapPointerMove)
+		mainStore.map.on('click', mapClick)
+		mainStore.map.on('singleclick', mapSingleClick)
+	}
+	function teardown() {
+		mainStore.map.un('pointermove', mapPointerMove)
+		mainStore.map.un('click', mapClick)
+		mainStore.map.un('singleclick', mapSingleClick)
+	}
 
 	return {
-		configuration,
-		callOnMapSelect,
-		clusterClickZoom,
+		hoveredFeature,
+		hoveredCluster,
+		hoveredClusterFeatures,
+		hoveredCoordinates,
 
-		hovered,
-		selectedBaseFeature,
-		selected,
+		selectedFeature,
+		selectedCluster,
+		selectedClusterFeatures,
 		selectedCoordinates,
+
+		setup,
+		teardown,
 	}
 })
 
diff --git a/src/core/types/marker.ts b/src/core/types/marker.ts
index fd6747e231..8552dea740 100644
--- a/src/core/types/marker.ts
+++ b/src/core/types/marker.ts
@@ -2,12 +2,6 @@ import type { Feature } from 'ol'
 
 export type MarkersIsSelectableFunction = (feature: Feature) => boolean
 
-export interface CallOnMapSelect {
-	action: string
-	payload: unknown
-	pluginName?: string
-}
-
 /**
  * A full documentation of the parameters is available at the Masterportal's https://www.masterportal.org/mkdocs/doc/Latest/User/Global-Config/style.json/.
  * For more details, visual examples, and expert features, see there.
@@ -123,26 +117,6 @@ export interface MarkerConfiguration {
 	 */
 	layers: MarkerLayerConfiguration[]
 
-	/**
-	 * If set, the given `action` will be called with the given `payload`. If the
-	 * `pluginName` is set, the action will be called in the respective plugin,
-	 * otherwise the core store is used.
-	 *
-	 * @example
-	 * ```
-	 * callOnMapSelect: {
-	 *   action: 'openMenuById',
-	 *   payload: 'gfi',
-	 *   pluginName: 'iconMenu'
-	 * }
-	 * ```
-	 *
-	 * @remarks
-	 * The example open the gfi window in the iconMenu, if the IconMenu exists
-	 * with the gfi plugin registered under the id `gfi`.
-	 */
-	callOnMapSelect?: CallOnMapSelect
-
 	/**
 	 * If `true`, clicking a cluster feature will zoom into the clustered features'
 	 * bounding box (with padding) so that the cluster is "resolved". This happens
diff --git a/src/core/utils/map/resolveClusterClick.ts b/src/core/utils/map/resolveClusterClick.ts
new file mode 100644
index 0000000000..1e1e0cef18
--- /dev/null
+++ b/src/core/utils/map/resolveClusterClick.ts
@@ -0,0 +1,17 @@
+import type { Feature, Map } from 'ol'
+
+import { createEmpty, extend } from 'ol/extent'
+
+export function resolveClusterClick(map: Map, feature: Feature) {
+	const features = feature.get('features') as Feature[]
+
+	const extent = createEmpty()
+	features.forEach((feature) =>
+		extend(extent, feature.getGeometry()?.getExtent() || [])
+	)
+
+	map.getView().fit(extent, {
+		duration: 400,
+		padding: [80, 30, 80, 30],
+	})
+}
diff --git a/src/core/utils/map/setupMarkers.ts b/src/core/utils/map/setupMarkers.ts
deleted file mode 100644
index 32709db16e..0000000000
--- a/src/core/utils/map/setupMarkers.ts
+++ /dev/null
@@ -1,369 +0,0 @@
-import type { Feature, Map, MapBrowserEvent, MapEvent } from 'ol'
-import type BaseLayer from 'ol/layer/Base'
-import type VectorSource from 'ol/source/Vector'
-import type { MarkerLayer, MarkerStyle, PluginId } from '../../types'
-
-import { toMerged } from 'es-toolkit'
-import { createEmpty, extend } from 'ol/extent'
-import VectorLayer from 'ol/layer/Vector'
-import RenderFeature from 'ol/render/Feature'
-import Cluster from 'ol/source/Cluster'
-import { markRaw, toRaw, watch } from 'vue'
-
-import { findLayer } from '@/lib/findLayer'
-import getCluster from '@/lib/getCluster'
-import { isVisible } from '@/lib/invisibleStyle'
-
-import { useMainStore } from '../../stores/main'
-import { useMarkerStore } from '../../stores/marker'
-import { usePluginStore } from '../../stores/plugin'
-import { getMarkerStyle } from '../markers'
-
-let stopWatcher: (() => void) | null = null
-
-// these have been measured to fit once and influence marker size
-const imgSize: [number, number] = [26, 36]
-const imgSizeMulti: [number, number] = [40, 36]
-
-const defaultStroke = '#FFFFFF'
-const defaultStrokeWidth = '2'
-
-const defaultStyle: MarkerStyle = {
-	clusterSize: imgSizeMulti,
-	fill: '#005CA9',
-	size: imgSize,
-	stroke: defaultStroke,
-	strokeWidth: defaultStrokeWidth,
-}
-const hoverStyle: MarkerStyle = {
-	clusterSize: imgSizeMulti,
-	fill: '#7B1045',
-	size: imgSize,
-	stroke: defaultStroke,
-	strokeWidth: defaultStrokeWidth,
-}
-const selectionStyle: MarkerStyle = {
-	clusterSize: imgSizeMulti,
-	fill: '#679100',
-	size: imgSize,
-	stroke: defaultStroke,
-	strokeWidth: defaultStrokeWidth,
-}
-const unselectableStyle: MarkerStyle = {
-	clusterSize: imgSizeMulti,
-	fill: '#333333',
-	size: imgSize,
-	stroke: defaultStroke,
-	strokeWidth: defaultStrokeWidth,
-}
-
-let layers: MarkerLayer[] = []
-
-let lastZoom = 0
-
-// As this function is only internally used, it is expected that a layer is found.
-function getLayerConfiguration(id: string) {
-	return layers.find((layer) => layer.id === id) as MarkerLayer
-}
-
-function layerFilter(layer: BaseLayer) {
-	return layers.some(({ id }) => id === (layer.get('id') as string))
-}
-
-function resolveClusterClick(map: Map, feature: Feature) {
-	const features = feature.get('features') as Feature[]
-
-	const extent = createEmpty()
-	features.forEach((feature) =>
-		extend(extent, feature.getGeometry()?.getExtent() || [])
-	)
-
-	map.getView().fit(extent, {
-		duration: 400,
-		padding: [80, 30, 80, 30],
-	})
-}
-
-/**
- * Update the selected marker in the map.
- *
- * @param map - Map
- * @param feature - Feature to select
- * @param centerOnFeature - Whether the map should center on the feature
- */
-export function updateSelection(
-	map: Map,
-	feature: Feature | null,
-	centerOnFeature = false
-) {
-	const store = useMarkerStore()
-
-	store.selected?.setStyle(undefined)
-	store.selected = null
-
-	if (feature === null) {
-		return
-	}
-
-	const layerId = feature.get('_polarLayerId') as string
-	const selectedCluster =
-		// @ts-expect-error | Found layers always have a source and getDistance is defined on cluster sources.
-		typeof findLayer(map, layerId)?.getSource().getDistance === 'function'
-			? getCluster(map, feature, '_polarLayerId')
-			: feature
-
-	selectedCluster.setStyle(
-		getMarkerStyle(
-			getLayerConfiguration(feature.get('_polarLayerId') as string)
-				.selectionStyle,
-			selectedCluster.get('features')?.length > 1
-		)
-	)
-
-	store.selected = markRaw(selectedCluster)
-	if (centerOnFeature) {
-		const mainStore = useMainStore()
-		mainStore.centerOnFeature(store.selected)
-	}
-}
-
-function setLayerId(map: Map, feature: Feature) {
-	if (feature.get('_polarLayerId')) {
-		return
-	}
-
-	const layerId = map
-		.getLayers()
-		.getArray()
-		.find((layer) => {
-			if (layer instanceof VectorLayer) {
-				let step: VectorLayer | VectorSource | Cluster = layer
-				while (step instanceof VectorLayer || step instanceof Cluster) {
-					// @ts-expect-error | Clusters in masterportalapi always have a source.
-					step = step.getSource()
-					// @ts-expect-error | It's not a vector layer anymore.
-					if (step.hasFeature(feature)) {
-						return true
-					}
-				}
-				return step.hasFeature(feature)
-			}
-			return false
-		})
-		?.get('id') as string | undefined
-	if (layerId) {
-		feature.set('_polarLayerId', layerId, true)
-	}
-}
-
-export function setupMarkers(map: Map) {
-	const store = useMarkerStore()
-	const configuration = store.configuration
-	if (!configuration) {
-		return
-	}
-
-	layers = configuration.layers.map((layer) =>
-		toMerged(
-			{
-				defaultStyle,
-				hoverStyle,
-				selectionStyle,
-				unselectableStyle,
-				isSelectable: () => true,
-			},
-			layer
-		)
-	)
-
-	lastZoom = map.getView().getZoom() as number
-
-	map
-		.getLayers()
-		.getArray()
-		.filter(layerFilter)
-		.forEach((layer) => {
-			// only vector layers reach this
-			const source = (layer as VectorLayer).getSource()
-			if (source !== null) {
-				// @ts-expect-error | Undocumented hook.
-				source.geometryFunction =
-					// prevents features from jumping due to invisible features "pulling"
-					(feature: Feature) =>
-						isVisible(feature) ? feature.getGeometry() : null
-			}
-			const layerConfiguration = getLayerConfiguration(
-				layer.get('id') as string
-			)
-			;(layer as VectorLayer).setStyle((feature) =>
-				getMarkerStyle(
-					layerConfiguration.isSelectable(feature as Feature)
-						? layerConfiguration.defaultStyle
-						: layerConfiguration.unselectableStyle,
-					feature.get('features')?.length > 1
-				)
-			)
-		})
-
-	// // // STORE EVENT HANDLING
-
-	stopWatcher = watch(
-		() => store.hovered,
-		(feature, oldFeature) => {
-			if (oldFeature !== null && oldFeature !== toRaw(store.selected)) {
-				oldFeature.setStyle(undefined)
-			}
-			if (feature !== null && feature !== toRaw(store.selected)) {
-				store.hovered = markRaw(feature)
-				const layerId = feature.get('_polarLayerId') as string
-				const selectedCluster =
-					// @ts-expect-error | Found layers always have a source and getDistance is defined on cluster sources.
-					typeof findLayer(map, layerId)?.getSource().getDistance === 'function'
-						? getCluster(map, feature, '_polarLayerId')
-						: feature
-				selectedCluster.setStyle(
-					getMarkerStyle(
-						getLayerConfiguration(feature.get('_polarLayerId') as string)
-							.hoverStyle,
-						selectedCluster.get('features')?.length > 1
-					)
-				)
-			}
-		}
-	)
-
-	map.on('moveend', mapMoveEnd)
-	map.on('pointermove', mapPointerMove)
-	map.on('click', mapClick)
-
-	/*
-	 * click leads to singlelick; if an element is selected,
-	 * to not let other plugins pick it up, something was already done with it
-	 */
-	map.on('singleclick', mapSingleClick)
-}
-
-export function teardownMarkers(map: Map) {
-	stopWatcher?.()
-	stopWatcher = null
-	layers = []
-	lastClickEvent = null
-
-	map.un('moveend', mapMoveEnd)
-	map.un('pointermove', mapPointerMove)
-	map.un('click', mapClick)
-
-	map.un('singleclick', mapSingleClick)
-}
-
-// // // MAP EVENT HANDLING
-
-let lastClickEvent: MapBrowserEvent | null = null
-
-function mapMoveEnd({ map }: MapEvent) {
-	const store = useMarkerStore()
-	const zoom = map.getView().getZoom() as number
-	if (zoom !== lastZoom) {
-		lastZoom = zoom
-		if (store.selected) {
-			const baseFeature =
-				store.selectedBaseFeature ||
-				((store.selected.get('features')?.[0] || store.selected) as Feature)
-			setLayerId(map, baseFeature)
-			updateSelection(map, baseFeature)
-		}
-	}
-}
-
-function mapPointerMove({ map, pixel }: MapBrowserEvent) {
-	const store = useMarkerStore()
-	const feature = map.getFeaturesAtPixel(pixel, {
-		layerFilter,
-	})[0]
-
-	if (feature === toRaw(store.selected) || feature instanceof RenderFeature) {
-		return
-	}
-	if (
-		toRaw(store.hovered) !== null &&
-		toRaw(store.hovered) !== toRaw(store.selected)
-	) {
-		store.hovered?.setStyle(undefined)
-		store.hovered = null
-	}
-
-	if (!feature) {
-		return
-	}
-	setLayerId(map, feature)
-	const layerConfiguration = getLayerConfiguration(
-		feature.get('_polarLayerId') as string
-	)
-	if (!layerConfiguration.isSelectable(feature)) {
-		return
-	}
-	const isMultiFeature = feature.get('features')?.length > 1
-	feature.setStyle(
-		getMarkerStyle(layerConfiguration.hoverStyle, isMultiFeature)
-	)
-	store.hovered = markRaw(feature)
-}
-
-function mapClick(event: MapBrowserEvent) {
-	const store = useMarkerStore()
-	const map = event.map
-	if (store.selected !== null) {
-		updateSelection(map, null)
-	}
-	const feature = map.getFeaturesAtPixel(event.pixel, { layerFilter })[0]
-
-	if (!feature || feature instanceof RenderFeature) {
-		return
-	}
-	setLayerId(map, feature)
-	const layerConfiguration = getLayerConfiguration(
-		feature.get('_polarLayerId') as string
-	)
-	if (!layerConfiguration.isSelectable(feature)) {
-		return
-	}
-
-	const isMultiFeature = feature.get('features')?.length > 1
-	lastClickEvent = event
-	event.stopPropagation()
-
-	const isMaxZoom = map.getView().getZoom() !== map.getView().getMaxZoom()
-	if (store.clusterClickZoom && isMultiFeature && isMaxZoom) {
-		resolveClusterClick(map, feature)
-		return
-	}
-
-	store.hovered?.setStyle(undefined)
-	store.hovered = null
-	updateSelection(map, feature, true)
-
-	if (store.callOnMapSelect) {
-		const mainStore = useMainStore()
-		const { action, payload, pluginName } = store.callOnMapSelect
-		if (!pluginName) {
-			mainStore[action](payload)
-			return
-		}
-
-		const pluginListStore = usePluginStore()
-		const pluginStore = pluginListStore.getPluginStore(pluginName as PluginId)
-		if (!pluginStore) {
-			console.error(
-				`Plugin ${pluginName} does not exist or is not configured or has no store module. Action ${action} could not be called.`
-			)
-			return
-		}
-		pluginStore[action](payload)
-	}
-}
-
-function mapSingleClick(event: MapBrowserEvent) {
-	if (event.originalEvent === lastClickEvent?.originalEvent) {
-		event.stopPropagation()
-	}
-}
diff --git a/src/plugins/gfi/components/GfiFeature.ce.vue b/src/plugins/gfi/components/GfiFeature.ce.vue
index 56d7ba9703..22f6fa1157 100644
--- a/src/plugins/gfi/components/GfiFeature.ce.vue
+++ b/src/plugins/gfi/components/GfiFeature.ce.vue
@@ -2,20 +2,30 @@
 	<div class="action-bar">
 		<div class="action-bar-group">
 			<KernButton
-				v-if="gfiStore.featureIndex > 0"
+				v-if="gfiStore.features.length > 1"
 				class="kern-btn--tertiary"
 				icon="kern-icon--arrow-back"
 				:label-sr-only="true"
-				@click="gfiStore.featureIndex--"
+				@click="
+					gfiStore.featureIndex =
+						gfiStore.featureIndex > 0
+							? gfiStore.featureIndex - 1
+							: gfiStore.features.length - 1
+				"
 			>
 				{{ $t(($) => $.switch.previous, { ns: PluginId }) }}
 			</KernButton>
 			<KernButton
-				v-if="gfiStore.featureIndex + 1 < gfiStore.features.length"
+				v-if="gfiStore.features.length > 1"
 				class="kern-btn--tertiary"
 				icon="kern-icon--arrow-forward"
 				:label-sr-only="true"
-				@click="gfiStore.featureIndex++"
+				@click="
+					gfiStore.featureIndex =
+						gfiStore.featureIndex + 1 < gfiStore.features.length
+							? gfiStore.featureIndex + 1
+							: 0
+				"
 			>
 				{{ $t(($) => $.switch.next, { ns: PluginId }) }}
 			</KernButton>
@@ -34,7 +44,7 @@
 				class="kern-btn--tertiary"
 				icon="kern-icon--close"
 				:label-sr-only="true"
-				@click="gfiStore.selectedFeatures = markRaw({})"
+				@click="gfiStore.selectedFeature = null"
 			>
 				{{ $t(($) => $.header.close, { ns: PluginId }) }}
 			</KernButton>
@@ -109,8 +119,6 @@
 </template>
 
 <script setup lang="ts">
-import { markRaw } from 'vue'
-
 import KernButton from '@/components/kern/KernButton.ce.vue'
 import { useCoreStore } from '@/core/stores'
 
diff --git a/src/plugins/gfi/components/GfiFeatureList.ce.vue b/src/plugins/gfi/components/GfiFeatureList.ce.vue
index 256683253a..95953b3e14 100644
--- a/src/plugins/gfi/components/GfiFeatureList.ce.vue
+++ b/src/plugins/gfi/components/GfiFeatureList.ce.vue
@@ -17,7 +17,7 @@
 			/>
 		</hgroup>
 	</header>
-	<section class="kern-card__body" @mouseleave="gfiStore.hover(null)">
+	<section class="kern-card__body" @mouseleave="gfiStore.hoveredFeature = null">
 		<p
 			v-if="gfiStore.listFlatFeatures.length === 0"
 			class="kern-body kern-body--small polar-plugin-gfi-list-empty-view"
@@ -34,9 +34,9 @@
 				class="feature-list-item"
 				:class="{ hovered }"
 				@click="setSelectedFeature(layerId, feature)"
-				@mouseenter="gfiStore.hover({ layerId, feature })"
-				@focus="gfiStore.hover({ layerId, feature })"
-				@blur="gfiStore.hover(null)"
+				@mouseenter="gfiStore.hoveredFeature = { layerId, feature }"
+				@focus="gfiStore.hoveredFeature = { layerId, feature }"
+				@blur="gfiStore.hoveredFeature = null"
 			>
 				<h3 class="kern-title kern-title--small">
 					{{ text.title }}
@@ -55,7 +55,7 @@
 <script setup lang="ts">
 import type { Feature } from 'ol'
 
-import { markRaw, nextTick } from 'vue'
+import { nextTick } from 'vue'
 
 import KernPagination from '@/components/kern/KernPagination.ce.vue'
 
@@ -65,11 +65,9 @@ import { PluginId } from '../types'
 const gfiStore = useGfiStore()
 
 async function setSelectedFeature(layerId: string, feature: Feature) {
-	gfiStore.hoveredFeatures = markRaw({})
+	gfiStore.hoveredFeature = null
 	await nextTick()
-	gfiStore.selectedFeatures = markRaw({
-		[layerId]: markRaw([feature]),
-	})
+	gfiStore.selectedFeature = { layerId, feature }
 }
 </script>
 
diff --git a/src/plugins/gfi/composables/useBindWithCoreHoverSelect.ts b/src/plugins/gfi/composables/useBindWithCoreHoverSelect.ts
index cc0973d220..c2e0883837 100644
--- a/src/plugins/gfi/composables/useBindWithCoreHoverSelect.ts
+++ b/src/plugins/gfi/composables/useBindWithCoreHoverSelect.ts
@@ -1,108 +1,103 @@
 import type { Feature } from 'ol'
 import type { ShallowRef } from 'vue'
 
-import ClusterSource from 'ol/source/Cluster'
 import { markRaw, watch } from 'vue'
 
-import { useCoreStore } from '@/core/stores'
-import getCluster from '@/lib/getCluster'
-
 import { useGfiMainStore } from '../stores/main'
 import { filterSelectableFeatures } from '../utils/filterSelectableFeatures'
 
 type CoreFeature = Feature | null
-type GfiFeature = Record<string, Feature[]>
-
-function assignCoreToGfi(target: ShallowRef<GfiFeature>, feature: CoreFeature) {
+type CoreFeatures = Feature[]
+type GfiFeature = { layerId: string; feature: Feature } | null
+type GfiFeatures = Partial<Record<string, Feature[]>>
+
+function assignCoreToGfiCluster(
+	target: ShallowRef<GfiFeatures>,
+	features: CoreFeatures,
+	referenceOrder?: CoreFeatures
+) {
 	const gfiMainStore = useGfiMainStore()
-
-	if (feature === null) {
-		target.value = markRaw({})
-		return
+	const layerId = features[0]?.get('_polarLayerId')
+	const layerConfiguration = gfiMainStore.getLayerConfiguration(layerId)
+
+	if (referenceOrder) {
+		features.sort((a, b) => {
+			const getIndex = (feature) => referenceOrder.indexOf(feature)
+			return getIndex(a) - getIndex(b)
+		})
 	}
 
-	const layerId = feature.get('_polarLayerId')
-	const newFeatures = filterSelectableFeatures(
-		feature.get('features') || [feature],
-		gfiMainStore.getLayerConfiguration(layerId)?.isSelectable
+	target.value = markRaw(
+		Object.groupBy(
+			filterSelectableFeatures(features, layerConfiguration?.isSelectable),
+			(feature) => feature.get('_polarLayerId')
+		)
 	)
-	target.value = markRaw({
-		...(newFeatures.length ? { [layerId]: markRaw(newFeatures) } : {}),
-	})
 }
 
-function assignGfiToCore(
+function assignGfiToCoreFeature(
 	target: ShallowRef<CoreFeature>,
-	featureMap: GfiFeature
+	feature: GfiFeature
 ) {
-	const coreStore = useCoreStore()
-
-	const features = Object.entries(featureMap).flatMap(([layerId, features]) =>
-		features.map((feature) => ({ layerId, feature }))
-	)
-
-	// The second condition is necessary for TypeScript checks.
-	if (features.length <= 0 || !features[0]) {
+	if (!feature) {
 		target.value = null
 		return
 	}
+	target.value = markRaw(feature.feature)
+}
 
-	const targetFeature = target.value
-	const targetLayerId = targetFeature?.get('_polarLayerId')
-	const targetClusterFeatures =
-		targetFeature?.get('features') || (targetFeature ? [targetFeature] : [])
-	if (
-		targetLayerId === features[0].layerId &&
-		targetClusterFeatures.length === features.length &&
-		features.every(({ feature }) => targetClusterFeatures.includes(feature))
-	) {
+function assignCoreToGfiFeature(
+	target: ShallowRef<GfiFeature>,
+	feature: CoreFeature
+) {
+	if (!feature) {
+		target.value = null
 		return
 	}
-
-	const { feature, layerId } = features[0]
-	feature.set('_polarLayerId', layerId, true)
-	target.value = markRaw(
-		coreStore.getLayer(layerId)?.getSource() instanceof ClusterSource
-			? getCluster(coreStore.map, feature, '_polarLayerId')
-			: feature
-	)
+	target.value = markRaw({
+		layerId: feature.get('_polarLayerId'),
+		feature,
+	})
 }
 
-export function useBindWithCoreHoverSelect(
-	hoveredFeatures: ShallowRef<Record<string, Feature[]>>,
-	selectedFeatures: ShallowRef<Record<string, Feature[]>>,
-	coreHoveredFeature: ShallowRef<Feature | null>,
-	coreSelectedFeature: ShallowRef<Feature | null>
+function bindWithWatcher<T, S, E>(
+	target: ShallowRef<T>,
+	source: ShallowRef<S>,
+	handler: (target: ShallowRef<T>, source: S, extra?: E) => void,
+	extra?: ShallowRef<E>
 ) {
 	watch(
-		coreHoveredFeature,
-		(feature) => {
-			assignCoreToGfi(hoveredFeatures, feature)
-		},
-		{ immediate: true }
-	)
-
-	watch(
-		coreSelectedFeature,
-		(feature) => {
-			assignCoreToGfi(selectedFeatures, feature)
+		source,
+		(value) => {
+			handler(target, value, extra?.value)
 		},
-		{ immediate: true }
+		{
+			immediate: true,
+		}
 	)
+}
 
-	watch(
-		hoveredFeatures,
-		(featureMap) => {
-			assignGfiToCore(coreHoveredFeature, featureMap)
-		},
-		{ immediate: true }
-	)
+export function useBindWithCoreHoverSelect(
+	hoveredFeature: ShallowRef<GfiFeature>,
+	coreHoveredFeature: ShallowRef<CoreFeature>,
+	hoveredFeatures: ShallowRef<GfiFeatures>,
+	coreHoveredFeatures: ShallowRef<CoreFeatures>,
+	selectedFeature: ShallowRef<GfiFeature>,
+	coreSelectedFeature: ShallowRef<CoreFeature>,
+	selectedFeatures: ShallowRef<GfiFeatures>,
+	coreSelectedFeatures: ShallowRef<CoreFeatures>,
+	referenceOrder: ShallowRef<Feature[]>
+) {
+	bindWithWatcher(hoveredFeature, coreHoveredFeature, assignCoreToGfiFeature)
+	bindWithWatcher(coreHoveredFeature, hoveredFeature, assignGfiToCoreFeature)
+	bindWithWatcher(hoveredFeatures, coreHoveredFeatures, assignCoreToGfiCluster)
 
-	watch(
+	bindWithWatcher(selectedFeature, coreSelectedFeature, assignCoreToGfiFeature)
+	bindWithWatcher(coreSelectedFeature, selectedFeature, assignGfiToCoreFeature)
+	bindWithWatcher(
 		selectedFeatures,
-		(featureMap) => {
-			assignGfiToCore(coreSelectedFeature, featureMap)
-		},
-		{ immediate: true }
+		coreSelectedFeatures,
+		assignCoreToGfiCluster,
+		referenceOrder
 	)
 }
diff --git a/src/plugins/gfi/composables/useSelectedFeatures.ts b/src/plugins/gfi/composables/useSelectedFeatures.ts
index 66422da7ec..59976baa6b 100644
--- a/src/plugins/gfi/composables/useSelectedFeatures.ts
+++ b/src/plugins/gfi/composables/useSelectedFeatures.ts
@@ -1,28 +1,115 @@
 import type { Feature as GeoJsonFeature } from 'geojson'
-import type { Feature } from 'ol'
+import type { Feature as OlFeature } from 'ol'
 
+import { isEqual, mapValues } from 'es-toolkit'
 import { GeoJSON } from 'ol/format'
-import { computed, ref, shallowRef } from 'vue'
+import { computed, shallowRef } from 'vue'
 
+interface Feature {
+	geojsonFeature: GeoJsonFeature
+	olFeature?: OlFeature
+}
+
+/**
+ * The GFI plugin may be used either with a vector layer or using GFI requests.
+ * If a vector layer is used, we have OpenLayers features that are converted to GeoJSON features.
+ * Otherwise, the response are just GeoJSON features.
+ *
+ * This composable considers this and allows for both scenarios:
+ * For vector layers, both features are updated.
+ * For GFI requests, only the GeoJSON features are used.
+ */
 export function useSelectedFeatures() {
-	const selectedFeatures = shallowRef<Record<string, Feature[]>>({})
-	const featureInformation = ref<Record<string, GeoJsonFeature[]>>({})
+	const features = shallowRef<Record<string, Feature[]>>({})
+	const feature = shallowRef<(Feature & { layerId: string }) | null>(null)
+
+	const olFeatures = computed<Record<string, OlFeature[]>>({
+		get: () =>
+			mapValues(features.value, (list) =>
+				list
+					.filter(
+						(feature): feature is Feature & { olFeature: Feature } =>
+							'olFeature' in feature
+					)
+					.map(({ olFeature }) => olFeature)
+			),
+		set: (value) => {
+			features.value = mapValues(value, (list) =>
+				list.map((olFeature) => ({
+					olFeature,
+					geojsonFeature: new GeoJSON().writeFeatureObject(olFeature),
+				}))
+			)
+		},
+	})
+
+	const geojsonFeatures = computed<Record<string, GeoJsonFeature[]>>({
+		get: () =>
+			mapValues(features.value, (list) =>
+				list.map(({ geojsonFeature }) => geojsonFeature)
+			),
+		set: (value) => {
+			features.value = mapValues(value, (list) =>
+				list.map((geojsonFeature) => ({ geojsonFeature }))
+			)
+		},
+	})
+
+	const olFeature = computed<{
+		layerId: string
+		feature: OlFeature
+	} | null>({
+		get: () =>
+			feature.value?.olFeature
+				? {
+						layerId: feature.value.layerId,
+						feature: feature.value.olFeature,
+					}
+				: null,
+		set: (value) => {
+			if (value === null) {
+				feature.value = null
+				return
+			}
+			const layerId = value.layerId
+			feature.value = {
+				layerId,
+				olFeature: value.feature,
+				geojsonFeature: new GeoJSON().writeFeatureObject(value.feature),
+			}
+		},
+	})
+
+	const geojsonFeature = computed<{
+		layerId: string
+		feature: GeoJsonFeature
+	} | null>({
+		get: () =>
+			feature.value
+				? {
+						layerId: feature.value.layerId,
+						feature: feature.value.geojsonFeature,
+					}
+				: null,
+		set: (value) => {
+			if (value === null) {
+				feature.value = null
+				return
+			}
+			const layerId = value.layerId
+			const item = features.value[layerId]?.find(({ geojsonFeature }) =>
+				isEqual(geojsonFeature, value.feature)
+			)
+			feature.value = item
+				? { ...item, layerId }
+				: { layerId, geojsonFeature: value.feature }
+		},
+	})
 
 	return {
-		selectedFeatures: computed({
-			get: () => selectedFeatures.value,
-			set: (value) => {
-				selectedFeatures.value = value
-				featureInformation.value = Object.fromEntries(
-					Object.entries(value).map(([layerId, features]) => [
-						layerId,
-						features.map((feature) =>
-							new GeoJSON().writeFeatureObject(feature)
-						),
-					])
-				)
-			},
-		}),
-		featureInformation,
+		olFeatures,
+		olFeature,
+		geojsonFeatures,
+		geojsonFeature,
 	}
 }
diff --git a/src/plugins/gfi/store.ts b/src/plugins/gfi/store.ts
index 4f7de3e0e7..b8457a7aec 100644
--- a/src/plugins/gfi/store.ts
+++ b/src/plugins/gfi/store.ts
@@ -5,6 +5,7 @@
 /* eslint-enable tsdoc/syntax */
 
 import { acceptHMRUpdate, defineStore, storeToRefs } from 'pinia'
+import { readonly } from 'vue'
 
 import { useGfiFeatureStore } from './stores/feature'
 import { useGfiListStore } from './stores/list'
@@ -43,35 +44,49 @@ export const useGfiStore = defineStore('plugins/gfi', () => {
 		renderType: gfiMainStoreRefs.renderType,
 
 		/**
-		 * Hovered features.
+		 * Hovered feature.
+		 * This is a feature whose hovering state is originated at the plugin.
+		 *
 		 * This is only used for the list view.
 		 *
 		 * @alpha
 		 */
-		hoveredFeatures: gfiListStoreRefs.hoveredFeatures,
+		hoveredFeature: gfiListStoreRefs.hoveredFeature,
 
 		/**
-		 * Mark feature as hovered.
+		 * Hovered features.
+		 * The hovering state may be originated either from {@link hoveredFeature} or by other means.
+		 *
 		 * This is only used for the list view.
 		 *
+		 * @readonly
+		 * @alpha
+		 */
+		hoveredFeatures: readonly(gfiListStoreRefs.hoveredFeatures),
+
+		/**
+		 * Selected feature.
+		 * This is only used if the feature is loaded from the list view.
+		 *
 		 * @alpha
 		 */
-		hover: gfiListStore.hover,
+		selectedFeature: gfiMainStoreRefs.olFeature,
 
 		/**
 		 * Selected features.
 		 * This is only used if the feature is loaded from the list view.
 		 *
+		 * @readonly
 		 * @alpha
 		 */
-		selectedFeatures: gfiMainStoreRefs.selectedFeatures,
+		selectedFeatures: readonly(gfiMainStoreRefs.olFeatures),
 
 		/**
 		 * Feature information for the currently selected feature(s).
 		 *
 		 * @alpha
 		 */
-		featureInformation: gfiMainStoreRefs.featureInformation,
+		featureInformation: gfiMainStoreRefs.geojsonFeatures,
 
 		/**
 		 * List of features that should be displayed in a list view.
@@ -177,12 +192,9 @@ export const useGfiStore = defineStore('plugins/gfi', () => {
 		 * Selected feature for the detail view.
 		 * This is the currently shown feature.
 		 *
-		 * To mutate this value, change `featureIndex`.
-		 *
-		 * @readonly
 		 * @alpha
 		 */
-		feature: gfiFeatureStoreRefs.selectedFeature,
+		feature: gfiMainStoreRefs.geojsonFeature,
 
 		/**
 		 * Properties for the selected feature in detail view.
diff --git a/src/plugins/gfi/stores/feature.ts b/src/plugins/gfi/stores/feature.ts
index 56be4518e4..ef48a45b6d 100644
--- a/src/plugins/gfi/stores/feature.ts
+++ b/src/plugins/gfi/stores/feature.ts
@@ -5,7 +5,7 @@ import type { GfiLayerConfiguration, RequestGfiParameters } from '../types'
 import { rawLayerList } from '@masterportal/masterportalapi'
 import { debounce, isEqual } from 'es-toolkit'
 import { acceptHMRUpdate, defineStore } from 'pinia'
-import { computed, nextTick, onScopeDispose, ref, watch } from 'vue'
+import { computed, nextTick, onScopeDispose, watch } from 'vue'
 
 import { useRefStore } from '@/composables/useRefStore'
 import { useStoreWatcher } from '@/composables/useStoreWatcher'
@@ -85,10 +85,10 @@ export const useGfiFeatureStore = defineStore('plugins/gfi/feature', () => {
 
 		if (options.toggleSelection) {
 			Object.entries(result).forEach(([layerId, features]) => {
-				if (!gfiMainStore.featureInformation[layerId]) {
-					gfiMainStore.featureInformation[layerId] = []
+				if (!gfiMainStore.geojsonFeatures[layerId]) {
+					gfiMainStore.geojsonFeatures[layerId] = []
 				}
-				const layerFeatureList = gfiMainStore.featureInformation[layerId]
+				const layerFeatureList = gfiMainStore.geojsonFeatures[layerId]
 
 				features.forEach((feature) => {
 					const oldFeatureIndex = layerFeatureList.findIndex((oldFeature) =>
@@ -104,7 +104,7 @@ export const useGfiFeatureStore = defineStore('plugins/gfi/feature', () => {
 			return
 		}
 
-		gfiMainStore.featureInformation = result
+		gfiMainStore.geojsonFeatures = result
 	}
 
 	const waitMs = computed(() => gfiMainStore.configuration.waitMs || 50)
@@ -118,7 +118,7 @@ export const useGfiFeatureStore = defineStore('plugins/gfi/feature', () => {
 					coordinate as RequestGfiParameters['coordinateOrExtent']
 				)
 			} else {
-				gfiMainStore.featureInformation = {}
+				gfiMainStore.geojsonFeatures = {}
 			}
 		},
 		{ immediate: true }
@@ -136,7 +136,7 @@ export const useGfiFeatureStore = defineStore('plugins/gfi/feature', () => {
 						gfiMainStore.configuration.multiSelect?.toggleSelection ?? true,
 				})
 			} else {
-				gfiMainStore.featureInformation = {}
+				gfiMainStore.geojsonFeatures = {}
 			}
 		})
 	}
@@ -161,20 +161,30 @@ export const useGfiFeatureStore = defineStore('plugins/gfi/feature', () => {
 	}
 
 	const visibleFeatures = computed(() =>
-		Object.entries(gfiMainStore.featureInformation)
+		Object.entries(gfiMainStore.geojsonFeatures)
 			.filter(([layerId]) => gfiMainStore.configuration.layers[layerId]?.window)
 			.flatMap(([layerId, features]) =>
 				features.map((feature) => ({ layerId, feature }))
 			)
 	)
 
-	const selectedFeatureIndex = ref(0)
-	const selectedFeature = computed(
-		() => visibleFeatures.value[selectedFeatureIndex.value]
-	)
+	const selectedFeatureIndex = computed({
+		get: () =>
+			visibleFeatures.value.findIndex((feature) =>
+				isEqual(feature, gfiMainStore.geojsonFeature)
+			),
+		set: (value) => {
+			const feature = visibleFeatures.value[value]
+			if (feature) {
+				gfiMainStore.geojsonFeature = feature
+			}
+		},
+	})
 
 	const selectedFeatureLayerConfiguration = computed(() =>
-		gfiMainStore.getLayerConfiguration(selectedFeature.value?.layerId || '')
+		gfiMainStore.getLayerConfiguration(
+			gfiMainStore.geojsonFeature?.layerId || ''
+		)
 	)
 
 	const exportPropertyLayerConfiguration = computed(
@@ -183,7 +193,7 @@ export const useGfiFeatureStore = defineStore('plugins/gfi/feature', () => {
 
 	const exportProperty = computed(() =>
 		exportPropertyLayerConfiguration.value
-			? selectedFeature.value?.feature.properties?.[
+			? gfiMainStore.geojsonFeature?.feature.properties?.[
 					exportPropertyLayerConfiguration.value
 				]
 			: null
@@ -196,8 +206,8 @@ export const useGfiFeatureStore = defineStore('plugins/gfi/feature', () => {
 	)
 
 	const title = computed(() =>
-		titleLayerConfiguration.value && selectedFeature.value
-			? titleLayerConfiguration.value(selectedFeature.value.feature)
+		titleLayerConfiguration.value && gfiMainStore.geojsonFeature
+			? titleLayerConfiguration.value(gfiMainStore.geojsonFeature.feature)
 			: null
 	)
 
@@ -207,7 +217,7 @@ export const useGfiFeatureStore = defineStore('plugins/gfi/feature', () => {
 
 	const selectedFeatureProperties = computed(() =>
 		Object.fromEntries(
-			Object.entries(selectedFeature.value?.feature.properties || {})
+			Object.entries(gfiMainStore.geojsonFeature?.feature.properties || {})
 				.filter(
 					([key]) =>
 						(!selectedFeaturePropertiesLayerConfiguration.value ||
@@ -222,15 +232,10 @@ export const useGfiFeatureStore = defineStore('plugins/gfi/feature', () => {
 	)
 
 	watch(
-		visibleFeatures,
-		() => {
-			selectedFeatureIndex.value = 0
-		},
-		{ deep: true }
-	)
-
-	watch(
-		[() => gfiMainStore.configuration.coordinateTarget, selectedFeature],
+		[
+			() => gfiMainStore.configuration.coordinateTarget,
+			() => gfiMainStore.geojsonFeature,
+		],
 		([target, feature], [, oldFeature]) => {
 			if (target && !feature && oldFeature) {
 				const targetStore = useRefStore(target)
@@ -257,11 +262,14 @@ export const useGfiFeatureStore = defineStore('plugins/gfi/feature', () => {
 		void nextTick(() => {
 			const iconMenuStore = coreStore.getPluginStore('iconMenu')
 			if (iconMenuStore) {
-				watch(selectedFeature, (newFeature) => {
-					if (newFeature) {
-						iconMenuStore.openMenuById(PluginId)
+				watch(
+					() => gfiMainStore.geojsonFeature,
+					(newFeature) => {
+						if (newFeature) {
+							iconMenuStore.openMenuById(PluginId)
+						}
 					}
-				})
+				)
 			}
 		})
 	}
@@ -269,7 +277,6 @@ export const useGfiFeatureStore = defineStore('plugins/gfi/feature', () => {
 	return {
 		visibleFeatures,
 		selectedFeatureIndex,
-		selectedFeature,
 		selectedFeatureProperties,
 		exportProperty,
 		title,
diff --git a/src/plugins/gfi/stores/list.ts b/src/plugins/gfi/stores/list.ts
index 8779bc6a1a..236d0643a2 100644
--- a/src/plugins/gfi/stores/list.ts
+++ b/src/plugins/gfi/stores/list.ts
@@ -2,7 +2,7 @@ import type { Feature } from 'ol'
 import type { FeatureList } from '../types'
 
 import { acceptHMRUpdate, defineStore, storeToRefs } from 'pinia'
-import { computed, markRaw, ref, shallowRef } from 'vue'
+import { computed, markRaw, ref, shallowRef, watch } from 'vue'
 
 import { useOlVectorSources } from '@/composables/useOlVectorSources'
 import { useRefStore } from '@/composables/useRefStore'
@@ -24,32 +24,11 @@ export const useGfiListStore = defineStore('plugins/gfi/list', () => {
 
 	const configuration = computed(() => gfiMainStore.configuration.featureList)
 
+	const hoveredFeature = shallowRef<{
+		layerId: string
+		feature: Feature
+	} | null>(null)
 	const hoveredFeatures = shallowRef<Record<string, Feature[]>>({})
-	if (configuration.value?.bindWithCoreHoverSelect) {
-		useBindWithCoreHoverSelect(
-			hoveredFeatures,
-			gfiMainStoreRefs.selectedFeatures,
-			coreStoreRefs.hoveredFeature,
-			coreStoreRefs.selectedFeature
-		)
-	}
-
-	function hover(data: { layerId: string; feature: Feature } | null) {
-		if (data === null) {
-			if (Object.keys(hoveredFeatures.value).length) {
-				hoveredFeatures.value = markRaw({})
-			}
-			return
-		}
-
-		const { layerId, feature } = data
-		if (hoveredFeatures.value[layerId]?.includes(feature)) {
-			return
-		}
-		hoveredFeatures.value = markRaw({
-			[layerId]: markRaw([feature]),
-		})
-	}
 
 	const activeLayers = computed((): string[] => {
 		if (!configuration.value) {
@@ -170,8 +149,12 @@ export const useGfiListStore = defineStore('plugins/gfi/list', () => {
 		paginatedFeatures.value.map((feature) => ({
 			...feature,
 			get hovered() {
-				return Object.values(hoveredFeatures.value).some((features) =>
-					features.includes(feature.feature)
+				return (
+					Object.values(hoveredFeatures.value).some((features) =>
+						features.includes(feature.feature)
+					) ||
+					(configuration.value?.bindWithCoreHoverSelect &&
+						coreStore.hoveredClusterFeatures.includes(feature.feature))
 				)
 			},
 			text: {
@@ -182,10 +165,46 @@ export const useGfiListStore = defineStore('plugins/gfi/list', () => {
 		}))
 	)
 
+	if (configuration.value?.bindWithCoreHoverSelect) {
+		useBindWithCoreHoverSelect(
+			// hovered feature
+			hoveredFeature,
+			coreStoreRefs.hoveredFeature,
+			// hovered cluster
+			hoveredFeatures,
+			coreStoreRefs.hoveredClusterFeatures,
+			// selected feature
+			gfiMainStoreRefs.olFeature,
+			coreStoreRefs.selectedFeature,
+			// selected cluster
+			gfiMainStoreRefs.olFeatures,
+			coreStoreRefs.selectedClusterFeatures,
+			// reference order
+			computed(() => flatFeatures.value.map(({ feature }) => feature))
+		)
+	} else {
+		watch(hoveredFeature, (value) => {
+			if (value === null) {
+				hoveredFeatures.value = {}
+				return
+			}
+			const { layerId, feature } = value
+			hoveredFeatures.value = { [layerId]: [feature] }
+		})
+		watch(gfiMainStoreRefs.olFeature, (value) => {
+			if (value === null) {
+				gfiMainStore.olFeatures = {}
+				return
+			}
+			const { layerId, feature } = value
+			gfiMainStore.olFeatures = { [layerId]: [feature] }
+		})
+	}
+
 	return {
 		features,
+		hoveredFeature,
 		hoveredFeatures,
-		hover,
 		flatFeatures,
 		paginationActive,
 		pageLength,
diff --git a/src/plugins/gfi/stores/main.ts b/src/plugins/gfi/stores/main.ts
index 19b8093e68..70c030875a 100644
--- a/src/plugins/gfi/stores/main.ts
+++ b/src/plugins/gfi/stores/main.ts
@@ -35,7 +35,8 @@ export const useGfiMainStore = defineStore('plugins/gfi/main', () => {
 		return configuration.value.layers[layerId]
 	}
 
-	const { selectedFeatures, featureInformation } = useSelectedFeatures()
+	const { olFeatures, olFeature, geojsonFeatures, geojsonFeature } =
+		useSelectedFeatures()
 
 	const customHighlightStyle = computed(
 		() =>
@@ -51,7 +52,7 @@ export const useGfiMainStore = defineStore('plugins/gfi/main', () => {
 			})
 	)
 	const highlightedFeatures = computed(() =>
-		Object.entries(featureInformation.value)
+		Object.entries(geojsonFeatures.value)
 			.filter(([layerId]) => getLayerConfiguration(layerId)?.geometry ?? true)
 			.flatMap(([, features]) => features)
 	)
@@ -65,8 +66,10 @@ export const useGfiMainStore = defineStore('plugins/gfi/main', () => {
 		configuration,
 		renderType,
 		getLayerConfiguration,
-		selectedFeatures,
-		featureInformation,
+		olFeatures,
+		olFeature,
+		geojsonFeatures,
+		geojsonFeature,
 	}
 })