Display feature count on cluster markers
Open
enhancement
refactor
- Dominant language
- TypeScript
- Stars
- 50
- Forks
- 8
- Avg merge
- 18h 24m
- Merged PRs (30d)
- 11
Description
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) getMarkerStyleonly receives a boolean (multi), not the actual feature count- Memoization is based on
MarkerStyle+ themultiflag 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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.