Root cause of the bleeding numbers: Mapbox renders ALL circles then ALL
number-symbols in separate passes, so a number can never sit at its
disc's z-level — a hidden pin's number floats over a visible neighbor.
Sort keys can't fix cross-layer stacking.
Fix: stops + homes are now HTML mapboxgl.Marker elements — the number
is a text node INSIDE the colored disc (one element, same level →
correct occlusion, no orphan numbers). Routes stay GL line layers.
- Hover a pin → it scales up (.hot) and its whole route comes to front
(GL rm-line-a filter + .route-hot on same-rid markers).
- Overlapping pins EXPLODE on hover: recluster() unions markers within
24px (projected), computes a radial fan offset per member; entering
any cluster member translates all members' discs outward (CSS
transition) so all are readable/clickable; collapses 200ms after
leave; clusters recompute on moveend, collapse on movestart.
Verified: 43 numbered discs + 16 home markers; an 8-pin stack near
Huntingdon fans out on hover into individually readable pins; distinct
golden-angle colors preserved.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
d5c6240c6e