Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/samgutentag/bcycle-map/llms.txt

Use this file to discover all available pages before exploring further.

The Live Map is the default view of BCycle Map. It renders every station in the active system as an interactive pin updated every 60 seconds from the GBFS feed, giving you an at-a-glance picture of where bikes are available right now. Click any pin to see a live count popup with a sparkline — or click Open details → inside the popup to jump to the full Station Details page.

Routes

PathPurpose
/Live map with all station pins
/station/:stationIdLive map with the matching station’s popup pre-opened and camera flown to the station

Map Views

Three rendering modes are supported via the MapViewToggle component (MapView type: 'pins' | 'bikes' | 'docks'). The toggle button is currently hidden in the UI while the heatmap experience is being refined, but the underlying logic is fully wired.

Pins (default)

One teardrop pin per station. Pin height scales with total dock capacity; the number inside shows bikes available. Colour shifts from green → amber → red as availability drops.

Bikes Heatmap

H3 resolution-10 hexagons (~65 m across) coloured blue by the sum of available bikes inside each hex. Useful for spotting neighbourhood-level supply pockets.

Docks Heatmap

Same H3 grid coloured green by the sum of open docks — helpful for return-trip planning.
The heatmap views hide all individual station pins so the hex layer is uncluttered. Switching back to Pins restores every marker without a page reload.

Basemaps

Two tile styles are available via the BasemapToggle:
  • Positron (light vector) — clean CartoCDN vector tiles optimised for data readability; the default.
  • CyclOSM (cycling raster) — OpenStreetMap tiles with bike lanes, paths, and cycling infrastructure highlighted.
Switch to CyclOSM when planning a route — the rendered bike-lane network shows you which roads connect stations.

Filter Chips

The MapFilterChips bar floats at the top-centre of the map. Filters are URL-driven (e.g. /?bikes=3&corridor=waterfront) so links are shareable.

Min Bikes

Cycles through Any → 1+ → 3+ → 5+ on each click. Stations below the threshold are hidden entirely (not greyed out) so the visible set is always actionable. An active chip shows a × to clear it instantly.

Corridor

Filters to a named geographic corridor (e.g. Waterfront, Downtown). Corridors are loaded from the R2 corridor artifact and only appear when the active system has them configured.
When any filter is active a “Showing X of Y stations” counter appears below the chip row, and a Reset link clears all filters at once.
Filter state is synced into the URL query string on every change (?bikes=3&corridor=waterfront). The system totals panel always reflects the full station set — totals are system-wide by design.

Station Pins

Each pin is an SVG teardrop generated by buildPinSVG. Key visual signals:
SignalMeaning
Bike count numberCurrent num_bikes_available
Pin heightScales proportionally with total capacity (num_bikes_available + num_docks_available)
Colour ringTypical-comparison ring (see below)
“NEW” badgeStation first appeared in the feed within the last 14 days
Dimmed pinStation is offline (!is_installed || !is_renting)
Pulse animationBike count changed since the last snapshot tick (green = arrival, amber = departure)

Typical Comparison Toggle

The TypicalComparisonToggle overlays a coloured ring on each pin comparing the current bike count against the typical profile for the current hour × day-of-week. The preference is persisted to localStorage under the key bcycle-map:show-typical-comparison.
Ring colourVerdict
GreenMore bikes than typical right now
AmberFewer bikes than typical
NoneAbout average, or insufficient history for a baseline

Station Popup

Clicking a station pin navigates to /station/:stationId, which triggers the popup to open and the camera to fly to the station. The popup includes:
  • Station name and address (links to Google Maps)
  • Live bike and dock counts
  • Bike-type breakdown (Classic / Smart) when non-zero
  • Offline warning when is_renting or is_installed is false
  • Data age (“Reported 3m ago”)
  • A 24-hour sparkline comparing the typical pattern (blue bars) against the current live value (orange dot)
  • Open details → SPA link to /station/:stationId/details
Closing the popup navigates back to / as long as you haven’t already moved on to another route.

System Totals Panel

The overlay panel in the corner shows system-wide aggregates derived from the current KVValue snapshot:
  • Total bikes — sum of num_bikes_available across all stations
  • Total open docks — sum of num_docks_available
  • Active riders — estimated bikes currently in use (max_bikes_ever - parked_bikes); requires the poller to have observed a peak bikes-parked value
  • Last changed — timestamp when the system-wide total last moved
max_bikes_ever is the highest sum(num_bikes_available) the poller has ever recorded and converges toward the true fleet size within one or two days of polling.

PollPinger

The PollPinger component shows when the last successful API fetch completed. The snapshot refreshes automatically every 60 seconds via useLiveSnapshot.

How to Use the Live Map

1

Open the map

Navigate to /. The camera auto-fits to the bounding box of all stations in the active system.
2

Spot availability at a glance

Pin height and colour tell you where bikes and open docks are concentrated. Taller pins = bigger stations; greener pins = more bikes.
3

Filter to what you need

Use the Min Bikes chip to hide empty stations, or pick a corridor to focus on a specific part of the city. The URL updates so you can bookmark or share the filtered view.
4

Click a station

Tap or click any pin to open the popup. Check the sparkline to see whether availability is typical for this time of day.
5

Go to Station Details

Click Open details → inside the popup to see 24-hour charts, top routes, and nearby stations on the full Station Details page.

Flow Map

Watch inferred bike trips animated in real time over the past 24 hours.

Station Details

Per-station historical charts, top routes, and nearby station info.

Route Check

Plan a ride between two stations with travel-time estimates.

Explore

System-wide analytics dashboard with heatmaps and an activity log.

Build docs developers (and LLMs) love