Track Map

A geometry-agnostic circuit map: you give it an SVG path, it colours the sectors with the flag in force and slides a marker per car round the lap.

Any outline works. Feed a GeoJSON LineString straight into pathFromPoints(coordinates) and it returns a d and a matching viewBox, with the y axis flipped so north points up. The demo outlines come from bacinger/f1-circuits on GitHub (MIT), projected and fitted by scripts/build-circuits.ts; the first point of each outline is treated as start/finish.

Markers move at constant speed between position updates: set transitionMs to the interval of your data source and every update chains into the next without a stop. On a closed path (a d ending in Z) a car crosses the line without jumping back.

pitLane takes an open d from pit entry to pit exit; a marker with inPit runs along it, its progress measured from entry to exit, and jumps between the two roads rather than sliding across the circuit. The outline dataset has no pit lanes, so the ones shown here are approximations generated by scripts/build-circuits.ts from the stretch of the lap around the line (src/lib/pit-lane.ts); Aster Park has a hand-drawn one.

onMarkerClick makes every car a button, named by its code, and dimOthers fades the cars without emphasis so the emphasised one is the car the eye follows. secondaryEmphasis on a marker is the lesser step, for cars watched next to it: the normal dot, but its code stays on a small map and dimOthers leaves it alone. A map with clickable cars exposes them, so its role becomes group rather than img; without the handler it renders exactly as before.

Check the licence of the outline, not only of the file. Circuit layouts are the intellectual property of the circuits themselves, which is also what the championship says in its own fan guidelines. The layouts shown here are unofficial and this project is not affiliated with any series, circuit, or team. Aster Park is an invented circuit and safe to use anywhere.