[mattpodwysocki]

Description

Fixes #277. Asked to show traffic downtown, ChatGPT told a user "the Mapbox map available here doesn't support a live street-traffic overlay". That was true: the map only draws GeoJSON, baseMapConfig has no traffic option, and traffic only showed up in route summaries. Users also couldn't switch to satellite without asking the model.

Buttons on the map

Two icon buttons sit under the zoom control, the same size as zoom and compass: a filled globe for satellite view and a filled car for live traffic (per the design feedback), with tooltips and aria-labels.

Traffic layer

• Mapbox Traffic v1 (mapbox://mapbox.mapbox-traffic-v1, source layer traffic), as lines colored by congestion: light, moderate, heavy, severe.
• It's in the middle slot, so road labels and our own routes/isochrones stay on top.
• Light traffic shows only on main roads (motorway through tertiary, plus ramps), since on every side street it turned the map green. Moderate and worse show on every road.
• Each direction is offset to its own side of the road, and lines run 1 px to 4 px from zoom 12 to 18.
• While it's on, a white "Fast [four colors] Slow" pill sits in the bottom left, below any payload legend, as in the design. The lines use the same colors (#00c94e, #ff9900, #ff2b3a, #8b0a18).
• Tiles come from api.mapbox.com, which the CSP already allows, so the CSP is unchanged.

showTraffic input

• A new render_map_tool field, plus a line in the description, so the model knows traffic is possible and can open the map with it on. false turns it off.
• Left out, the map keeps whatever the user picked, like baseStyle does.
• A showTraffic-only call is renderable, like baseStyle.

Style switches keep what's drawn

setStyle() drops every source and layer the page added. The page now keeps a copy of each GeoJSON layer it draws, and after a switch from the Satellite button it re-adds:

• those layers (self-fetched routes and isochrones included, deferred data once it lands)
• the base map config
• traffic

It does this without moving the camera. When the model switches baseStyle, traffic stays on.

Summary chip

The chip sat on top of the zoom buttons, since both use the top-left corner. While it shows, the corner's controls now move below it.

Worth a close look

• Re-adding after setStyle: the restore guards on getSource/getLayer, so it's safe whether or not GL JS kept a layer across the switch.
• Persistence: traffic persists across renders unless the model says otherwise. That's a change from "every call is a fresh render", but the user's toggle surviving a follow-up render seemed right. Happy to flip it.
• Stale tiles: the map doesn't refresh traffic tiles on a timer, so a map left open goes stale until it's moved or reloaded.
• Model context: the page doesn't tell the model what the user toggled.

Testing

• Buttons and traffic:
  • Both buttons render with their labels, start off and report aria-pressed.
  • Traffic adds the vector source and line layer (middle slot, congestion colors, light traffic only on main roads), shows the Fast/Slow pill alongside the payload legend, and removes it all on a second click.
• Satellite:
  • It switches style and re-adds the drawn route (same slot) and traffic without refitting.
  • Switching back works.
  • Base map config is reapplied.
  • A model baseStyle updates the button.
• showTraffic:
  • true turns it on, left out keeps it on, false turns it off.
  • It survives a model baseStyle switch.
  • A showTraffic-only call works and round-trips through the inline ref.
• Summary chip: the top-left controls move below it and back.
• Test sandbox: the fake map now tracks sources and layers like a style (setStyle clears them) and mounts controls through onAdd. The 65 existing script tests pass unchanged.
• Checks run:
  • The tileset's TileJSON lists the traffic source layer.
  • npm test: 1060 pass.
  • npm run lint: 0 errors.
  • npm run build OK.
  • The built script parses (new Function).
• Live tile: a San Francisco tile has congestion, class and structure, which the filter relies on.
• Claude Desktop: checked on both styles: the model passed showTraffic: true for "show traffic in downtown San Francisco", and both buttons work. Not tried in ChatGPT yet.

Plain:

Traffic:

Satellite Traffic:

Checklist

• Tests added
• CHANGELOG.md updated under Unreleased

🤖 Generated with Claude Code

[zmofei]

LGTM, just two nits inline.

[zmofei]

Nit: can you add showTraffic to this sentence too? Otherwise the model might send just showTraffic: true and the route disappears. Also, "does not accumulate state" isn't quite true anymore, since traffic now stays on.

[zmofei]

Nit: this never gets reset. After a render without baseMapConfig, the Satellite button can bring back an old config, like night mode. Maybe set it on every render, or clear it in teardown()?