feat(web): cluster map markers for large node counts

Wrap MapPage node markers in react-leaflet-cluster (leaflet.markercluster)
with spiderfy-at-max-zoom, zoom-to-bounds on click, clustering disabled at
zoom >= 15, and viewport culling so off-screen markers stay out of the DOM.
Cluster bubbles render a plain themed count badge. Marker label HTML is now
only built when the show-labels toggle is on, halving per-marker DOM weight;
hover-to-reveal no longer applies while labels are toggled off.
This commit is contained in:
Louis King committed 2026-08-30 13:01:07 +01:00
1 parent bda6370cb0
commit c1024bed04
5 files changed
+146 -66

No files matched your search

+3
View File
@@ -18,6 +18,7 @@
"@testing-library/jest-dom": "^7.0.0",
"@testing-library/react": "^16.3.2",
"@types/leaflet": "^1.9.17",
"@types/leaflet.markercluster": "^1.5.6",
"@types/node": "^24.0.0",
"@types/react": "^19",
"@types/react-dom": "^19",
@@ -37,11 +38,13 @@
"i18next": "^26.0.0",
"i18next-browser-languagedetector": "^8",
"leaflet": "^1.9.4",
"leaflet.markercluster": "^1.5.3",
"react": "^19",
"react-chartjs-2": "^5",
"react-dom": "^19",
"react-i18next": "^17.0.0",
"react-leaflet": "^5",
"react-leaflet-cluster": "^4.1.3",
"react-markdown": "^10.1.0",
"react-qr-code": "^2.2.0",
"react-router": "^8.0.0",