Map

Colours

Land, water, parks, streets, rail, buildings and labels each have a colour per theme. Water is also the colour of the page behind the map. The aircraft have a colour of their own, on Aircraft.

Lines and dots

Line widths, dot sizes and the gap between lines that share a track are canvas measures, in px at the default zoom.

Where lines share a track, such as A, B, C, E and H through the centre or M1 and M2, each is drawn as its own strand beside the others, never on top of them. A line's map.strand.* is its place from the track's centre, in steps of its mode's map.track-spacing: the app multiplies the two for the line's offset, such as MapLibre's line-offset, and gives a vehicle on that line the same offset, so it stays on its strand. The order keeps each line on one side of every track it shares, so a strand never crosses another: A, B, C, E, H from one side to the other through the centre, M1 beside M2 and M3 beside M4. The values are the full trunk's, where all five S-tog lines share the track; which lines share a stretch comes from the app's own timetable, and where only some do, the app keeps them in the strands' order, a track spacing apart and centred on the track, so C and H alone sit at −0.5 and +0.5, and a line alone on its track is drawn on the centre.

Aircraft

Aircraft are the planes over the city, from a feed of their own. They are not vehicles: they have no mode and no line, and they are never counted with the vehicles. Each is drawn as the aircraft glyph, a plane seen from above, in color.map.aircraft, a magenta that no line, mode, status or the brand uses, so a plane never reads as a bus or a train. Aircraft are drawn above the vehicles.

• The glyph is the outline in packages/perron/icons/aircraft.svg, on its 14 px grid, pointing north. The aircraft's position is the centre of the grid, and the app turns the glyph about it to the aircraft's track, clockwise from north. Its box is map.aircraft-size.air wide in the air and map.aircraft-size.ground on the ground, scaled with the zoom as the vehicle dots are.
• The halo is the vehicle dots': the outline stroked in color.data-state.halo, vehicle-dot.halo wide on each side, under the glyph, so a plane stands off whatever it crosses.
• The legend shows the glyph beside "Planes" after the five states wherever the map shows aircraft: VehicleDotLegend's aircraftVisible.

An aircraft carries the data states in the vehicle dots' shapes, as far as a plane can take them. Timetable only never applies: an aircraft has no timetable.

• Rims are drawn inside the outline: clip to it and stroke twice the width. The glyph then keeps one outer size in every state, as a dot's insets keep its.
• The rims are thinner than a dot's: a plane is narrow, and a dot's 1.8 px ring would fill its body in, so estimated would read as live.
• The cut runs from the top left of the box to the bottom right on the screen, whatever the track, so it reads as the vehicle dots' cut does.

color.map.aircraft, in the Colours table, reaches 3:1 on every ground a plane flies or taxis over, in both themes, as WCAG asks of a mark that carries meaning:

3D buildings

The map opens flat and north-up. 3D is a view the rider turns on: the map tilts, up to 60°, and turns, and the buildings rise.

• Where. Buildings rise from zoom 14.
• Heights come from OpenStreetMap and are approximate: a block may stand a storey off, and one with no height recorded stands at a default.
• Colour. A 3D building is one colour, color.map.building-3d, walls and roof alike: the map's light shades each face from it, so a block reads as a block without a second colour. It is a step further from the land than color.map.building, darker in light and lighter in dark, so the walls stand off the ground they rise from.
• Over and under. The dots, lines and stops are drawn over the buildings, never hidden behind them. The buildings are drawn at opacity.map-building-3d, faint enough that the street behind a block shows through it, so a bus on that street, drawn over the block, reads as being behind it rather than on its roof.

Focus and dimming

When a line is in focus, everything outside it dims: vehicles, lines, stations and labels each to their own opacity, so the focused line reads first without the rest vanishing. Lines at rest are drawn slightly translucent, and live vehicles leave a short trail.