HomeMaps

PreviousNext

Map – Bus (Geo)

A geographic map of one bus route.

Map
Uses foundationsColours
Used byVehicle progressLive vehicles

Preview

Stale data

Usage

import { TflBusGeoMap } from "@/components/tfl/geography/tfl-bus-geo-map"

<div className="h-100">
  <TflBusGeoMap data={route} />
</div>
Installable via shadcn CLI

Installation

pnpm dlx shadcn@latest add https://tfl.manglekuo.com/r/tfl-bus-geo-map.json

Getting the data

Pass a normalised BusRouteGeometry. Live sequences come from tfl.line.getRouteSequence for one route id. This map does not fetch.

type BusRouteGeometry = {
  routeId: string
  direction: "inbound" | "outbound"
  color: string
  stops: { id: string; name: string; lat: number; lon: number; sequence: number }[]
  segments: { id: string; status: "current" | "diverted" | "disabled"; line: LineString }[]
}

Render

current is a solid bus-red line. diverted is dashed. disabled is greyed. The caller decides which segment is which — this is not live disruption data.

Stale data

In code

Map – Tube & Rail (Geo) · Vehicle progress · Live vehicles · Colours