Skip to content
Signal

Map

Line rendering

How train lines are drawn: lanes, corners and stations.

Approved

Line rendering: lanes, corners, stations

Train lines that share track are drawn as parallel lanes in a fixed order with rounded corners. Stations, train vehicles and collisions follow Map.

The Loop at three zooms

Zoom about 13.5: the Loop as parallel lanes with station circlesBrown, Green, Orange, Purple and Pink run as separate 4-point lanes with 1.5-point gaps around the Loop in CTA order, Brown outermost, with rounded corners. Each Loop station is a grey multi-line circle centred on the lanes it serves. No labels.
Below 15 · zoom ≈ 13.5 (shown 2×)Lanes in CTA order, Brown outermost; each station is a 10 circle with a Paper keyline, grey at a multi-line station, centred on the lanes it serves.
Zoom about 15: station capsulesThe same lanes, wider. From zoom 15 every station is the v3 station icon, centred on the lanes it serves. Harold Washington Library is selected.
From 15 · zoom ≈ 15Station icons on the lanes they serve. Library is selected.
Zoom about 16.5: capsules at Tower 18A close crop of the northwest corner of the Loop at Tower 18. Brown and Purple join from the north and Blue, Green and Pink from the west; Blue runs outermost on Lake, then turns south. Clark/Lake and Washington/Wells use the v3 station capsule, with bars in v3 LineOrder.
Zoom ≈ 16.5 · Tower 18Blue runs outermost on Lake, then turns south; Brown and Purple join from the north and swap sides into the ring.

Lanes

PropertyValue
Lane width4pt at every zoom from 12
Gap1.5pt between lanes
Positionoffset × 5.5pt from the shared base line, where offset is the lane’s index minus (n − 1) / 2; recomputed when the camera settles in a new 0.25-zoom bucket, without animation
CornersThe shared base line is smoothed over 40 m; lanes are offset from it, so they turn concentrically. The innermost lane keeps at least a 2pt radius.
Joins and leavesWhere a line joins or leaves a stretch, the remaining lanes re-centre, easing over 80 m
CasingNone
Selected bus route4pt, Brand, on its own path; never offset

Station markers by zoom

ZoomStation markerTrain vehicles
Below 15A 10 circle with a 1.5pt Paper keyline, centred on the lanes it serves: the line colour at a one-line station, grey (Card 2) at a multi-line station. 44 × 44pt hit area.Only while a stop is open: every vehicle on that stop’s routes, at any zoom, snapped to its own lane
From 15The v3 station icon (Map markers), centred on the lanes it serves. 44 × 44pt hit area.

Rules

Fixed orderCTA order: Red, Blue, Brown, Green, Orange, Purple, Pink, Yellow. Lane 0 sits on the right of the direction the stretch’s first line runs along its own /lines polyline. Loop, outer to inner: Brown, Green, Orange, Purple, Pink. On Lake between Wells and Dearborn, Blue is outermost. Missing routes close up.
Capsule barsCapsule bars use v3 LineOrder, so bar order and lane order can differ (Clark/Lake).
CrossingsForced crossings (Brown and Purple at Tower 18, Blue at Dearborn) happen only at a junction, never mid-street.
Dark modeDark line tokens: Brown #a8653a, Purple #8d61d8, Yellow #f9e300. Station circles and capsules keep their Paper keyline.
No glowNo blur, glow, shadow or gradient on lanes, circles or capsules.
Selected routeOther lanes drop to 35% opacity and keep their positions; the bundle never reflows. With a bus route selected, all train lanes dim.
LabelsNo station names on the map. Names live in the capsule’s accessibility label and the stop sheet.
AccessibilityLanes are decorative. Station circles and capsules are buttons labelled “<Station> station”; capsules keep their v3 VoiceOver labels.
FallbackWithout valid topology, draw one 4pt line per route. Never show half-laned geometry.

Layering (bottom to top)

#Layer
1Basemap
2Train lanes: dimmed lanes first, then the selected lane
3Selected bus route
4Bus stop markers
5Station circles and capsules
6Vehicle markers (only while a stop is open)
7User location