Refactor/display feature count on cluster markers

examples/snowbox/index.js

@@ -94,7 +94,7 @@
 		colorScheme,
 		startCenter: [565874, 5934140],
 		layers: [
 			// TODO: Add internalization to snowbox
 			{
 				id: basemapId,
 				visibility: true,
@@ -178,6 +178,7 @@
 				},
 			],
 			clusterClickZoom: true,
+			displayFeatureCount: true,
 		},
 		// theme: dataportTheme,
 		locales: [

src/core/stores/marker.ts

@@ -20,6 +20,10 @@ export const useMarkerStore = defineStore('marker', () => {
 		() => (configuration.value?.clusterClickZoom as boolean) || false
 	)
 
+	const displayFeatureCount = computed(
+		() => configuration.value?.displayFeatureCount || false
+	)
+
 	const hovered = shallowRef<Feature | null>(null)
 	const selected = shallowRef<Feature | null>(null)
 	const selectedCoordinates = computed(() =>
@@ -32,6 +36,7 @@ export const useMarkerStore = defineStore('marker', () => {
 		configuration,
 		callOnMapSelect,
 		clusterClickZoom,
+		displayFeatureCount,
 
 		hovered,
 		selected,

src/core/types/marker.ts

@@ -1,7 +1,19 @@
 import type { Feature } from 'ol'
+import type { Style } from 'ol/style'
 
 export type MarkersIsSelectableFunction = (feature: Feature) => boolean
-
+export type GetMarkerFunction = (
+	style: MarkerStyle,
+	count: number,
+	displayFeatureCount: boolean
+) => Style
+export type GetSVGConfigFunction = (digits: string) => MarkerSVGConfig
+export type GetTextPositionFunction = (path: string) => TextPosition
+export type PinShape = 'circle' | 'pill'
+export interface TextPosition {
+	x: number
+	y: number
+}
 export interface CallOnMapSelect {
 	action: string
 	payload: unknown
@@ -33,7 +45,7 @@ export interface MarkerStyle {
 	/**
 	 * `width` and `height` of the `<svg>`-cluster-marker.
 	 *
-	 * @defaultValue `[40, 36]`
+	 * @defaultValue `[40 * 2, 36 * 2]`
 	 */
 	clusterSize: [number, number]
 
@@ -45,7 +57,7 @@ export interface MarkerStyle {
 	/**
 	 * `width` and `height` of the `<svg>`-marker.
 	 *
-	 * @defaultValue `[26, 36]`
+	 * @defaultValue `[40 * 2, 36 * 2]`
 	 */
 	size: [number, number]
 
@@ -62,6 +74,74 @@ export interface MarkerStyle {
 	 * @defaultValue `'2'`
 	 */
 	strokeWidth: string | number
+
+	/**
+	 * Text to display on the marker.
+	 *
+	 */
+	clusterCount?: number
+}
+
+/**
+ * The MarkerSVGConfig contains the SVG-informations needed to create the svg for the marker.
+ */
+export interface MarkerSVGConfig {
+	/**
+	 * The SVG path for the markershape where the text is displayed in.
+	 */
+	contentPath: string
+
+	/**
+	 * The definitions for the marker (e.g. shadow patterns with image data).
+	 */
+	defs: string
+
+	/**
+	 * Calculates the x and y coordinates for the text position within the marker.
+	 * The calculation is based on the provided SVG path
+	 * @throws Error If the provided path does not match the expected marker pattern.
+	 * @returns The x and y coordinates for the text position within the marker.
+	 */
+	getTextPosition: GetTextPositionFunction
+
+	/**
+	 * The shape of the marker.
+	 */
+	pinShape: PinShape
+
+	/**
+	 * The shadow path for the main/front marker layer.
+	 */
+	shadowPath: string
+
+	/** The outer shape of the marker. */
+	shapePath: string
+
+	/**
+	 * The SVG shadow paths for the stacked marker layers.
+	 */
+	stackedShadow1: string
+	stackedShadow2: string
+
+	/**
+	 * The SVG paths for the stacked shape of the marker.
+	 */
+	stackedShape1: string
+	stackedShape2: string
+	stackedTip1: string
+	stackedTip2: string
+
+	readonly textPosition: TextPosition
+
+	/**
+	 * The SVG path for the tip of the marker.
+	 */
+	tipPath: string
+
+	/**
+	 * The viewBox for the marker.
+	 */
+	viewBox: string
 }
 
 export interface MarkerLayer {
@@ -150,4 +230,10 @@ export interface MarkerConfiguration {
 	 * take place. Defaults to `false`.
 	 */
 	clusterClickZoom?: boolean
+
+	/**
+	 * If `true`, the number of features in a cluster will be displayed on the cluster marker.
+	 * @defaultValue `false`
+	 */
+	displayFeatureCount?: boolean
 }

src/core/utils/map/setupMarkers.ts

@@ -1,7 +1,12 @@
 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 type {
+	GetMarkerFunction,
+	MarkerLayer,
+	MarkerStyle,
+	PluginId,
+} from '../../types'
 
 import { toMerged } from 'es-toolkit'
 import { createEmpty, extend } from 'ol/extent'
@@ -16,13 +21,14 @@ import { isVisible } from '@/lib/invisibleStyle'
 import { useMainStore } from '../../stores/main'
 import { useMarkerStore } from '../../stores/marker'
 import { usePluginStore } from '../../stores/plugin'
-import { getMarkerStyle } from '../markers'
+import { createGetMarkerStyle } from '../markers'
 
 let stopWatcher: (() => void) | null = null
+let getMarkerStyle: GetMarkerFunction = createGetMarkerStyle(() => {})
 
 // these have been measured to fit once and influence marker size
-const imgSize: [number, number] = [26, 36]
-const imgSizeMulti: [number, number] = [40, 36]
+const imgSize: [number, number] = [40 * 2, 36 * 2]
+const imgSizeMulti: [number, number] = [40 * 2, 36 * 2]
 
 const defaultStroke = '#FFFFFF'
 const defaultStrokeWidth = '2'
@@ -110,12 +116,12 @@ function updateSelection(
 		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
+			selectedCluster.get('features')?.length,
+			store.displayFeatureCount
 		)
 	)
 
@@ -162,6 +168,10 @@ export function setupMarkers(map: Map) {
 		return
 	}
 
+	getMarkerStyle = createGetMarkerStyle(() => {
+		map.render()
+	})
+
 	layers = configuration.layers.map((layer) =>
 		toMerged(
 			{
@@ -199,7 +209,8 @@ export function setupMarkers(map: Map) {
 					layerConfiguration.isSelectable(feature as Feature)
 						? layerConfiguration.defaultStyle
 						: layerConfiguration.unselectableStyle,
-					feature.get('features')?.length > 1
+					feature.get('features')?.length,
+					store.displayFeatureCount
 				)
 			)
 		})
@@ -208,20 +219,19 @@ export function setupMarkers(map: Map) {
 
 	stopWatcher = watch(
 		() => store.hovered,
-		(feature) => {
-			if (feature !== null && feature !== toRaw(store.selected)) {
-				store.hovered?.setStyle(undefined)
-				store.hovered = null
+		(feature, oldFeature) => {
+			if (oldFeature !== null && oldFeature !== toRaw(store.selected)) {
+				oldFeature.setStyle(undefined)
 			}
 			if (feature !== null && feature !== toRaw(store.selected)) {
-				store.hovered = markRaw(feature)
-				const isMultiFeature = store.hovered.get('features')?.length > 1
+				const featureCount = feature.get('features')?.length
 				const style = getMarkerStyle(
 					getLayerConfiguration(feature.get('_polarLayerId') as string)
 						.hoverStyle,
-					isMultiFeature
+					featureCount,
+					store.displayFeatureCount
 				)
-				store.hovered.setStyle(style)
+				feature.setStyle(style)
 			}
 		}
 	)
@@ -242,6 +252,7 @@ export function teardownMarkers(map: Map) {
 	stopWatcher = null
 	layers = []
 	lastClickEvent = null
+	getMarkerStyle = createGetMarkerStyle(() => {})
 
 	map.un('moveend', mapMoveEnd)
 	map.un('pointermove', mapPointerMove)
@@ -274,31 +285,25 @@ function mapPointerMove({ map, pixel }: MapBrowserEvent) {
 		layerFilter,
 	})[0]
 
-	if (feature === toRaw(store.selected) || feature instanceof RenderFeature) {
+	if (feature === toRaw(store.hovered)) {
 		return
 	}
-	if (
-		toRaw(store.hovered) !== null &&
-		toRaw(store.hovered) !== toRaw(store.selected)
-	) {
-		store.hovered?.setStyle(undefined)
-		store.hovered = null
-	}
 
+	if (feature === toRaw(store.selected) || feature instanceof RenderFeature) {
+		return
+	}
 	if (!feature) {
+		store.hovered = null
 		return
 	}
 	setLayerId(map, feature)
 	const layerConfiguration = getLayerConfiguration(
 		feature.get('_polarLayerId') as string
 	)
 	if (!layerConfiguration.isSelectable(feature)) {
+		store.hovered = null
 		return
 	}
-	const isMultiFeature = feature.get('features')?.length > 1
-	feature.setStyle(
-		getMarkerStyle(layerConfiguration.hoverStyle, isMultiFeature)
-	)
 	store.hovered = markRaw(feature)
 }