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 }[]
}

HomeMaps

Map – Bus (Geo)

A geographic map of one bus route.

Map

Uses foundationsColours

Used byLive buses

Preview

Shared demo 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 }[]
}

Superloop

Superloop sequences can repeat the same polyline and list two termini on one spine. Deduplicate lineStrings and keep every unique stop.

Shared demo data

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.

Example data

In code

Map – Tube & Rail (Geo) · Live buses · Colours