Skip to the content
StateShapeMeans
LiveA solid dotA GPS report younger than the live threshold
AgeingA fainter dotA report past the live threshold, under the ageing one
EstimatedA ringPlaced from the timetable and the latest delay
Timetable onlyA dashed ringNo real-time data at all
No signalA grey dot cut by a slashSilent past the ageing threshold, moved on by the timetable
  • Always write the state in words next to the dot. Legends list all five states, in this order, even when one has no vehicles.
  • color.data-state.no-signal means a vehicle has gone silent. Use it for that alone.
  • No signal is the one state cut by a slash: a diagonal gap, vehicle-dot.no-signal.cut-width wide, from the top left of the dot to the bottom right, which shows the surface beneath. Live and no signal are both solid dots, so without the cut they would differ by colour alone, and they would look the same in forced colours, where Windows' contrast themes replace every colour. The cut takes ink away rather than adding it, so the map grows no busier, and it reads down to the smallest dot.
  • On the map, draw dots on a canvas, with a halo of color.data-state.halo and, for light line colours on the light map, a hairline of color.data-state.outline.
  • Aircraft carry these states too, all but timetable only, in a glyph of their own rather than a dot, with the same fill strength, grey and cut: see Map.

No signal keeps moving

A vehicle with no signal keeps moving. From where it was last seen, it follows its path on the timetable plus its last known delay, drawn in the no signal glyph and labelled with the time of its last report: "No signal since 10:42". Left where it was last seen, it would mislead twice: an outage across a feed would look as if the city had stopped, and a dot frozen for twenty minutes would sit far from anywhere the vehicle can be. The glyph, not the position, carries the doubt: the cut dot and its words say the place is a guess, so the dot never needs to stand still to say so.

Thresholds

The age of a vehicle's latest report decides between live, ageing and no signal, and how old is too old depends on how often the feed reports. So the thresholds are the app's. vehicle-dot.live-threshold (60 s) and vehicle-dot.ageing-threshold (5 min) are defaults that suit a feed reporting every few seconds; each app sets its live threshold from its own feed's interval between reports, so that one late report doesn't fade a vehicle that is still reporting, and keeps it under the ageing threshold. An app such as Mylder, whose feed reports once a minute at best, sets its live threshold to 2.5 times the interval between reports, 150 s at 60 s and at most 4 min, and keeps the ageing threshold at 5 min.

The components draw the state they are given and never work one out from a timestamp; the app compares each report's age with its thresholds. Where a screen explains the states, it gives the app's own figures, never the defaults' as fixed facts.

Geometry

The vehicle-dot tokens give the geometry of each shape at any size: insets, stroke widths, the dash, the no-signal cut, and the default age thresholds between live, ageing and no signal, which each app sets for its own feed (Thresholds).

TokenValue
vehicle-dot.insetGap between the glyph box and the circle edge
2 px
vehicle-dot.haloMap only: land-coloured ring drawn under each dot
1.6 px
vehicle-dot.live-thresholdDefault: reports younger than this are live. Each app sets its own from its feed's interval between reports
60000 ms
vehicle-dot.ageing-thresholdDefault: reports younger than this (and at least the live threshold old) are ageing; older is no signal. Each app sets its own with its live threshold
300000 ms
vehicle-dot.ageing.fill-opacityFill strength of an ageing dot, so it reads fainter than live
0.42
vehicle-dot.ageing.stroke-widthRim of an ageing dot
1.3 px
vehicle-dot.ageing.stroke-insetPulls the ageing rim in so the dot keeps its outer size
0.6 px
vehicle-dot.estimated.stroke-widthRing of an estimated dot
1.8 px
vehicle-dot.estimated.stroke-insetPulls the estimated ring in so the dot keeps its outer size
0.9 px
vehicle-dot.timetable.stroke-widthDashed ring of a timetable-only dot
1.6 px
vehicle-dot.timetable.stroke-insetPulls the timetable ring in so the dot keeps its outer size
0.9 px
vehicle-dot.timetable.dashDash and gap of the timetable-only ring
2.1px 1.7px
vehicle-dot.no-signal.cut-widthWidth of the diagonal cut, top left to bottom right, through a no-signal dot, the one shape no other state has
1.6 px
  • color.data-state.no-signalLight#9AA4A9Dark#5F6B71Vehicle dot fill when a vehicle has been silent past the ageing threshold
  • color.data-state.haloLight#EDEFEBcolor.map.landDark#151B1Ecolor.map.landMap only: ring under each dot
  • color.data-state.outlineLightrgba(18, 24, 27, 0.45)Darkrgba(0, 0, 0, 0)Map only: outline around light line colours on a light map

Delays

A delay is known only for live, ageing and estimated vehicles. Timetable only and no signal always show an unknown delay ("—"). Delay colours point at the status text colours; color.transit.delay.unknown is the one that misses 4.5:1, kept for the "—" next to stronger text.

  • color.transit.delay.on-timeLight#067849color.text.successDark#3CCB80color.text.successDelay text when on time
  • color.transit.delay.slightLight#12181Bcolor.text.primaryDark#EBEEEBcolor.text.primaryLate by 1–2 min
  • color.transit.delay.lateLight#AD3600color.text.dangerDark#FF8655color.text.dangerLate by 3 min or more
  • color.transit.delay.earlyLight#2351AFcolor.text.infoDark#7FA6FFcolor.text.infoDelay text when early
  • color.transit.delay.unknownLight#74818Acolor.text.tertiaryDark#74818Acolor.text.tertiaryDelay text when there is no real-time data

Kinds of disruption

Each kind of disruption has its colour, always with its icon and its name. A service notice is the neutral kind, for a message whose fields don't say which of the other four it is: it is shown as received, never guessed into one of them.

  • color.transit.severity.delayLight#AD3600color.text.dangerDark#FF8655color.text.dangerIcon and label for delays
  • color.transit.severity.dataLight#47535Acolor.text.secondaryDark#A2ADB1color.text.secondaryIcon and label for data feed problems
  • color.transit.severity.diversionLight#2351AFcolor.text.infoDark#7FA6FFcolor.text.infoIcon and label for diversions
  • color.transit.severity.plannedLight#47535Acolor.text.secondaryDark#A2ADB1color.text.secondaryIcon and label for planned works
  • color.transit.severity.noticeLight#47535Acolor.text.secondaryDark#A2ADB1color.text.secondaryIcon and label for service notices