Description
Currently, clustered features (core markers) are displayed as a multi-marker; a static SVG showing three stacked pin shapes. There is no indication of how many features are contained in a given cluster.
The cluster marker SVG should be replaced with a new design (see Figma) that displays the number of contained features as text within the SVG.
Current behavior
- The multi-marker is a static SVG without any count indicator (
src/core/utils/markers.ts, makeMultiMarker)
getMarkerStyle only receives a boolean (multi), not the actual feature count
- Memoization is based on
MarkerStyle + the multi flag only
Expected behavior
- A new SVG design for cluster markers that includes a
<text> element showing the feature count
- The count is dynamically embedded into the SVG
Affected areas
| File |
What needs to change |
src/core/utils/markers.ts |
Replace makeMultiMarker with new SVG template including count; extend getMarkerStyle signature to accept count; adjust memoization to account for count |
src/core/utils/map/setupMarkers.ts |
Pass the actual feature count (from feature.get('features')?.length) to getMarkerStyle at all call sites (layer styling, hover, selection, pointer move) |
Out of scope
- Configurability of count text styling (color, font size, etc.)
- Changes to the single marker
Description
Currently, clustered features (core markers) are displayed as a multi-marker; a static SVG showing three stacked pin shapes. There is no indication of how many features are contained in a given cluster.
The cluster marker SVG should be replaced with a new design (see Figma) that displays the number of contained features as text within the SVG.
Current behavior
src/core/utils/markers.ts,makeMultiMarker)getMarkerStyleonly receives a boolean (multi), not the actual feature countMarkerStyle+ themultiflag onlyExpected behavior
<text>element showing the feature countAffected areas
src/core/utils/markers.tsmakeMultiMarkerwith new SVG template including count; extendgetMarkerStylesignature to accept count; adjust memoization to account for countsrc/core/utils/map/setupMarkers.tsfeature.get('features')?.length) togetMarkerStyleat all call sites (layer styling, hover, selection, pointer move)Out of scope