[BUG] Public share page draws every stop as its own pin — the planner's marker clustering never reaches it
What happens
A shared trip link draws every stop as an individual pin. On a trip with three dozen places the 300px-tall share map opens on three dozen overlapping markers: nearby pins cover each other, and the ones underneath can be neither clicked nor hovered. The planner map clusters exactly the same data, so the two views disagree about the very same trip.
Measured on a self-hosted checkout of current main, one trip, 36 places, headless Chromium:
| page | markers | clusters |
|---|---|---|
/trips/9 (planner) |
14 (10 pins + 4 clusters) | 4 |
/shared/<token> |
36 | 0 |
Why
client/src/pages/SharedTripPage.tsx maps its places straight into <Marker> inside <MapContainer> (line ~455) with no MarkerClusterGroup, while client/src/components/Map/MapView.tsx (line ~878) wraps its markers in one.
A second trap for whoever fixes it: leaflet.markercluster/dist/MarkerCluster.css and MarkerCluster.Default.css are imported by MapView.tsx only. Adding a cluster group to the share page without importing them draws unstyled bubbles (marker-cluster defaults to a solid tinted circle) and leaves spiderfy's legs invisible — the page never mounts MapView.
Suggested fix
Wrap the share page's markers in <MarkerClusterGroup> with the same option block and icon factory as the planner, and import the two stylesheets there as well. Extracting the option block plus the icon factory into one module under components/Map/ (both pages import it) keeps the two maps from drifting again — the share page currently duplicates the planner's marker markup too, and the two have already diverged once.
I have this working locally on 4.2.1/current main (share page then reports the same 14/4 as the planner, with photo-backed cluster bubbles) and I am happy to open a PR against dev if you want it.
Source: liketrek/TREK