Skip to content

Declutter the map at low zoom with station dots - #99

Open
rodrigohpalmeirim wants to merge 3 commits into
mainfrom
t3code/improve-station-map-visibility
Open

Declutter the map at low zoom with station dots#99
rodrigohpalmeirim wants to merge 3 commits into
mainfrom
t3code/improve-station-map-visibility

Conversation

@rodrigohpalmeirim

@rodrigohpalmeirim rodrigohpalmeirim commented Aug 23, 2026

Copy link
Copy Markdown
Member

Makes the map legible when zoomed out: instead of always drawing every station as a full pin, stations degrade gracefully with zoom, and the stations that matter for the current route stay prominent. Fixes the route-overview problem where fitting a computed route zoomed out and buried the route line under 150+ pins.

Dots at low zoom (station-dots layer)

  • Below zoom 14 stations are drawn as small dots instead of pins — the bike count baked into the pin sprite is unreadable at those sizes anyway, so the pins were pure clutter
  • Dot color carries the station's state, matching the pin semantics: filled accent when the station has bikes (free docks during a trip), hollow accent ring when in service but empty, muted gray only when out of service
  • The dot layer is inserted below the trip path and route lines, so at low zoom the route draws over the dots

Dot-to-pin transition

  • Over zoom 13.5→14 the dots fade out while the pins grow in from ~dot size (0.1× → 0.5×) at full opacity — anchored at the tip, each pin reads as sprouting out of its dot instead of the two forms popping
  • Dots keep being tappable: all station layers are included in the click handlers and hit-tests

Route/selection emphasis

  • While a route is displayed, its pickup/dropoff/destination stations — plus the selected one — keep a full-size marker at every zoom, drawn above the route line by a dedicated route-stations layer (the regular layers hide them via opacity so nothing double-draws)
  • Everything else dims to 40% opacity, dots and pins alike, so the fitted route overview shows the route line, its two endpoint pins, and a quiet field of dots
  • All of this state (trip bike/dock counts, dimming, filters) is centralized in applyStationDisplayState() and re-applied on route/selection/trip changes and theme-driven style reloads

Screenshots

Zoomed out Transition Route overview Zoomed-in route overview
1-zoomed-out-dots 2-dot-to-pin-transition 3-route-overview 4-route-overview-zoomed

Test plan

  • bun run check, bunx vitest run (45 tests pass), eslint clean on touched files
  • Verified in the browser with real station data (light + dark themes, including theme switches mid-route, which reload the style)
  • Route overview, trip mode (dock counts), station selection, and pin-drop flows exercised
  • On-device testing

@rodrigohpalmeirim
rodrigohpalmeirim requested a review from ttmx August 23, 2026 17:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant