HomeData-aware

PreviousNext

Live Tube & Rail vehicles

Place trains on the geographic map from arrival countdowns.

Data-aware
Uses foundationsColours

Preview

Usage

<LiveRailVehicles
  railLineIds={["victoria", "northern"]}
  targetRequestsPerMinute="max"
/>

Getting the data

TfL arrivals have no coordinates — line.getArrivals only gives a timeToStation countdown. One call covers every tracked line. The tracker locks each train to the unique-track hop between the previous and next stop, then walks it forward as the countdown runs.

const arrivals = await client.line.getArrivals({
  lineIds: ["victoria", "northern"],
})

const point = positionBehindStop({
  nextStop,
  remainingKm: hopKm * (timeToStation / hopSeconds),
  fromStopId,
  toStopId,
  polylines, // unique-track hop between those stops
})

Render

Pass the line ids you want. A simple corridor uses hop-lock; a junctioned line uses branch-aware placement. Paint goes through Map – Tube & Rail (Geo). Buses are a separate component — Live buses.