HomeMaps

Map – Tube & Rail (Geo)

Geographic track for Tube, Elizabeth, Overground, DLR, and Tram.

Map

Uses foundationsColours

Used byVehicle progress Live Tube & Rail vehicles

Preview

Shared demo data

MapLibre GL JS on OpenFreeMap Positron (vector). No API key. Station names appear as you zoom.

Usage

import { TflGeographicMap } from "@/components/tfl/geography/tfl-geographic-map"

<div className="h-100">
  <TflGeographicMap />
</div>

<TflGeographicMap modes={["tube", "elizabeth"]} showStations={false} />
<TflGeographicMap trackModel="dual" />

Installable via shadcn CLI

Installation

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

This copies the component, types, and credit helpers. The GeoJSON still has to live somewhere your app can fetch. Copy public/data/geography/*.json into the project, or host those files on a CDN.

Unique corridors, not every variant

OpenStreetMap stores each timetable pattern as its own route. Paint all of them and the Elizabeth line stacks 24 times on the same tracks.

The map draws unique track: directional twins merged into one centreline, real branches kept, junctions welded to a shared vertex. Toggle Both tracks in the preview for each direction as its own polyline. /data/geography/{mode}-graph.json is the same network as nodes and edges. Full OSM variants stay in the repo for analysis — do not put them on the map.

File	Centreline	Both tracks	OSM variants	Stations
`tube-geometry.json`	28	56	208	270
`overground-geometry.json`	14	27	50	112
`elizabeth-geometry.json`	5	10	24	41
`dlr-geometry.json`	5	10	12	45
`tram-geometry.json`	4	6	10	38

all-stations.json is the same 456 stations with merged line ids. Rebuild unique-track with pnpm geography:unique-track.

type TransitGeometryBundle = {
  lines: FeatureCollection<LineString, {
    featureId: string   // "elizabeth-track-0"
    lineId: string      // "victoria"
    lineName: string    // "Victoria line"
    color: string       // "#0098D4"
    trackGroup?: 0 | 1  // dual layer only
    towards?: string    // dual layer only
  }>
  stations: FeatureCollection<Point, {
    featureId: string   // "940GZZLUBST"
    name: string        // "Baker Street Underground Station"
    label: string       // "Baker Street"
    lineIds: string[]   // ["bakerloo", "circle", ...]
    zone?: string       // "1"
  }>
}

Bus routes are a separate map — they come from TfL route sequences, not these vendored rail files. See Map – Bus (Geo). Pass derived dots as vehicles — Live Tube & Rail vehicles places them.

Draw it in your own map

The files are GeoJSON. MapLibre and Leaflet need no key. Mapbox and Google Maps need a token from your project.

MapLibre GL JS

import maplibregl from "maplibre-gl";
import "maplibre-gl/dist/maplibre-gl.css";

// After install: import geometry from your project
import tubeGeometry from "./data/geography/tube-geometry.json";

const map = new maplibregl.Map({
  container: "map",
  style: "https://tiles.openfreemap.org/styles/positron",
  center: [-0.12, 51.51],
  zoom: 10,
  cooperativeGestures: true,
});

map.on("load", () => {
  map.addSource("tube-lines", { type: "geojson", data: tubeGeometry.lines });
  map.addLayer({
    id: "tube-lines",
    type: "line",
    source: "tube-lines",
    layout: { "line-join": "round", "line-cap": "round" },
    paint: {
      "line-color": ["get", "color"],
      "line-width": 3,
    },
  });

  map.addSource("tube-stations", { type: "geojson", data: tubeGeometry.stations });
  map.addLayer({
    id: "tube-stations",
    type: "circle",
    source: "tube-stations",
    paint: {
      "circle-radius": 3,
      "circle-color": "#ffffff",
      "circle-stroke-width": 1.25,
      "circle-stroke-color": "#111827",
    },
  });
  map.addLayer({
    id: "tube-stations-label",
    type: "symbol",
    source: "tube-stations",
    layout: {
      "text-field": ["coalesce", ["get", "label"], ["get", "name"], ""],
      "text-font": ["Noto Sans Regular"],
      "text-size": 11,
      "text-offset": [0, 1.15],
      "text-anchor": "top",
      "text-optional": true,
    },
    paint: {
      "text-color": "#111827",
      "text-halo-color": "#ffffff",
      "text-halo-width": 1.6,
    },
  });
});

Leaflet

import L from "leaflet";
import "leaflet/dist/leaflet.css";

import tubeGeometry from "./data/geography/tube-geometry.json";

const map = L.map("map").setView([51.51, -0.12], 10);

L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
  attribution: "© OpenStreetMap contributors",
}).addTo(map);

// Lines
L.geoJSON(tubeGeometry.lines, {
  style: (feature) => ({
    color: feature?.properties?.color ?? "#0019A8",
    weight: 3,
    opacity: 0.9,
  }),
}).addTo(map);

// Stations
L.geoJSON(tubeGeometry.stations, {
  pointToLayer: (_feature, latlng) =>
    L.circleMarker(latlng, {
      radius: 3,
      fillColor: "#fff",
      color: "#111827",
      weight: 1.25,
      fillOpacity: 1,
    }),
}).addTo(map);

Mapbox GL JS

Needs a public access token.

import mapboxgl from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";

import tubeGeometry from "./data/geography/tube-geometry.json";

// Your Mapbox access token
mapboxgl.accessToken = process.env.NEXT_PUBLIC_MAPBOX_TOKEN!;

const map = new mapboxgl.Map({
  container: "map",
  style: "mapbox://styles/mapbox/light-v11",
  center: [-0.12, 51.51],
  zoom: 10,
});

map.on("load", () => {
  map.addSource("tube-lines", { type: "geojson", data: tubeGeometry.lines });
  map.addLayer({
    id: "tube-lines",
    type: "line",
    source: "tube-lines",
    paint: {
      "line-color": ["get", "color"],
      "line-width": 3,
    },
  });

  map.addSource("tube-stations", { type: "geojson", data: tubeGeometry.stations });
  map.addLayer({
    id: "tube-stations",
    type: "circle",
    source: "tube-stations",
    paint: {
      "circle-radius": 3,
      "circle-color": "#ffffff",
      "circle-stroke-width": 1.25,
      "circle-stroke-color": "#111827",
    },
  });
});

Google Maps

Needs a Maps JavaScript API key.

import { setOptions, importLibrary } from "@googlemaps/js-api-loader";

import tubeGeometry from "./data/geography/tube-geometry.json";

// Your Google Maps API key
setOptions({ key: process.env.NEXT_PUBLIC_GOOGLE_MAPS_KEY! });

const { Map } = await importLibrary("maps");
const { SymbolPath } = await importLibrary("core");

const map = new Map(document.getElementById("map")!, {
  center: { lat: 51.51, lng: -0.12 },
  zoom: 10,
});

map.data.addGeoJson(tubeGeometry.lines);
map.data.addGeoJson(tubeGeometry.stations);
map.data.setStyle((feature) => {
  if (feature.getGeometry()?.getType() === "Point") {
    return {
      icon: {
        path: SymbolPath.CIRCLE,
        scale: 3,
        fillColor: "#ffffff",
        fillOpacity: 1,
        strokeColor: "#111827",
        strokeWeight: 1.25,
      },
    };
  }
  return {
    strokeColor: feature.getProperty("color") ?? "#0019A8",
    strokeWeight: 3,
    strokeOpacity: 0.9,
  };
});

Props

TflGeographicMap fills its parent. Give the wrapper a height.

Prop	Type	Default
data	`Record<TransitMode, Bundle>`	fetches vendored JSON
modes	`TransitMode[]`	all five
lineIds	`string[]`	all lines
trackModel	`"centreline" \| "dual"`	centreline
vehicles	`VehiclePosition[]`	none
showStations	boolean	true
showLines	boolean	true
showNavigation	boolean	true
center	`[lng, lat]`	[-0.12, 51.51]
zoom	number	10.2
className	string

Track data still belongs to OSM

Geometry is © OpenStreetMap contributors, ODbL 1.0. Station metadata where present is © Transport for London, TfL Open Data. The Positron basemap is © OpenStreetMap contributors and © OpenFreeMap. The full declaration is data/geography/ORIGIN.md.

In code

Map – Bus (Geo) · Live Tube & Rail vehicles · Cycle hire docks · Schematic & network · Colours

Map – Tube & Rail (Geo)

Geographic track for Tube, Elizabeth, Overground, DLR, and Tram.

Map

Uses foundationsColours

Used byVehicle progress Live Tube & Rail vehicles

Preview

Shared demo data

MapLibre GL JS on OpenFreeMap Positron (vector). No API key. Station names appear as you zoom.

Usage

import { TflGeographicMap } from "@/components/tfl/geography/tfl-geographic-map"

<div className="h-100">
  <TflGeographicMap />
</div>

<TflGeographicMap modes={["tube", "elizabeth"]} showStations={false} />
<TflGeographicMap trackModel="dual" />

Installable via shadcn CLI

Installation

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

This copies the component, types, and credit helpers. The GeoJSON still has to live somewhere your app can fetch. Copy public/data/geography/*.json into the project, or host those files on a CDN.

Unique corridors, not every variant

OpenStreetMap stores each timetable pattern as its own route. Paint all of them and the Elizabeth line stacks 24 times on the same tracks.

File	Centreline	Both tracks	OSM variants	Stations
`tube-geometry.json`	28	56	208	270
`overground-geometry.json`	14	27	50	112
`elizabeth-geometry.json`	5	10	24	41
`dlr-geometry.json`	5	10	12	45
`tram-geometry.json`	4	6	10	38

all-stations.json is the same 456 stations with merged line ids. Rebuild unique-track with pnpm geography:unique-track.

type TransitGeometryBundle = {
  lines: FeatureCollection<LineString, {
    featureId: string   // "elizabeth-track-0"
    lineId: string      // "victoria"
    lineName: string    // "Victoria line"
    color: string       // "#0098D4"
    trackGroup?: 0 | 1  // dual layer only
    towards?: string    // dual layer only
  }>
  stations: FeatureCollection<Point, {
    featureId: string   // "940GZZLUBST"
    name: string        // "Baker Street Underground Station"
    label: string       // "Baker Street"
    lineIds: string[]   // ["bakerloo", "circle", ...]
    zone?: string       // "1"
  }>
}

Bus routes are a separate map — they come from TfL route sequences, not these vendored rail files. See Map – Bus (Geo). Pass derived dots as vehicles — Live Tube & Rail vehicles places them.

Draw it in your own map

The files are GeoJSON. MapLibre and Leaflet need no key. Mapbox and Google Maps need a token from your project.

MapLibre GL JS

import maplibregl from "maplibre-gl";
import "maplibre-gl/dist/maplibre-gl.css";

// After install: import geometry from your project
import tubeGeometry from "./data/geography/tube-geometry.json";

const map = new maplibregl.Map({
  container: "map",
  style: "https://tiles.openfreemap.org/styles/positron",
  center: [-0.12, 51.51],
  zoom: 10,
  cooperativeGestures: true,
});

map.on("load", () => {
  map.addSource("tube-lines", { type: "geojson", data: tubeGeometry.lines });
  map.addLayer({
    id: "tube-lines",
    type: "line",
    source: "tube-lines",
    layout: { "line-join": "round", "line-cap": "round" },
    paint: {
      "line-color": ["get", "color"],
      "line-width": 3,
    },
  });

  map.addSource("tube-stations", { type: "geojson", data: tubeGeometry.stations });
  map.addLayer({
    id: "tube-stations",
    type: "circle",
    source: "tube-stations",
    paint: {
      "circle-radius": 3,
      "circle-color": "#ffffff",
      "circle-stroke-width": 1.25,
      "circle-stroke-color": "#111827",
    },
  });
  map.addLayer({
    id: "tube-stations-label",
    type: "symbol",
    source: "tube-stations",
    layout: {
      "text-field": ["coalesce", ["get", "label"], ["get", "name"], ""],
      "text-font": ["Noto Sans Regular"],
      "text-size": 11,
      "text-offset": [0, 1.15],
      "text-anchor": "top",
      "text-optional": true,
    },
    paint: {
      "text-color": "#111827",
      "text-halo-color": "#ffffff",
      "text-halo-width": 1.6,
    },
  });
});

Leaflet

import L from "leaflet";
import "leaflet/dist/leaflet.css";

import tubeGeometry from "./data/geography/tube-geometry.json";

const map = L.map("map").setView([51.51, -0.12], 10);

L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
  attribution: "© OpenStreetMap contributors",
}).addTo(map);

// Lines
L.geoJSON(tubeGeometry.lines, {
  style: (feature) => ({
    color: feature?.properties?.color ?? "#0019A8",
    weight: 3,
    opacity: 0.9,
  }),
}).addTo(map);

// Stations
L.geoJSON(tubeGeometry.stations, {
  pointToLayer: (_feature, latlng) =>
    L.circleMarker(latlng, {
      radius: 3,
      fillColor: "#fff",
      color: "#111827",
      weight: 1.25,
      fillOpacity: 1,
    }),
}).addTo(map);

Mapbox GL JS

Needs a public access token.

import mapboxgl from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";

import tubeGeometry from "./data/geography/tube-geometry.json";

// Your Mapbox access token
mapboxgl.accessToken = process.env.NEXT_PUBLIC_MAPBOX_TOKEN!;

const map = new mapboxgl.Map({
  container: "map",
  style: "mapbox://styles/mapbox/light-v11",
  center: [-0.12, 51.51],
  zoom: 10,
});

map.on("load", () => {
  map.addSource("tube-lines", { type: "geojson", data: tubeGeometry.lines });
  map.addLayer({
    id: "tube-lines",
    type: "line",
    source: "tube-lines",
    paint: {
      "line-color": ["get", "color"],
      "line-width": 3,
    },
  });

  map.addSource("tube-stations", { type: "geojson", data: tubeGeometry.stations });
  map.addLayer({
    id: "tube-stations",
    type: "circle",
    source: "tube-stations",
    paint: {
      "circle-radius": 3,
      "circle-color": "#ffffff",
      "circle-stroke-width": 1.25,
      "circle-stroke-color": "#111827",
    },
  });
});

Google Maps

Needs a Maps JavaScript API key.

import { setOptions, importLibrary } from "@googlemaps/js-api-loader";

import tubeGeometry from "./data/geography/tube-geometry.json";

// Your Google Maps API key
setOptions({ key: process.env.NEXT_PUBLIC_GOOGLE_MAPS_KEY! });

const { Map } = await importLibrary("maps");
const { SymbolPath } = await importLibrary("core");

const map = new Map(document.getElementById("map")!, {
  center: { lat: 51.51, lng: -0.12 },
  zoom: 10,
});

map.data.addGeoJson(tubeGeometry.lines);
map.data.addGeoJson(tubeGeometry.stations);
map.data.setStyle((feature) => {
  if (feature.getGeometry()?.getType() === "Point") {
    return {
      icon: {
        path: SymbolPath.CIRCLE,
        scale: 3,
        fillColor: "#ffffff",
        fillOpacity: 1,
        strokeColor: "#111827",
        strokeWeight: 1.25,
      },
    };
  }
  return {
    strokeColor: feature.getProperty("color") ?? "#0019A8",
    strokeWeight: 3,
    strokeOpacity: 0.9,
  };
});

Props

TflGeographicMap fills its parent. Give the wrapper a height.

Prop	Type	Default
data	`Record<TransitMode, Bundle>`	fetches vendored JSON
modes	`TransitMode[]`	all five
lineIds	`string[]`	all lines
trackModel	`"centreline" \| "dual"`	centreline
vehicles	`VehiclePosition[]`	none
showStations	boolean	true
showLines	boolean	true
showNavigation	boolean	true
center	`[lng, lat]`	[-0.12, 51.51]
zoom	number	10.2
className	string

Track data still belongs to OSM

In code

Map – Bus (Geo) · Live Tube & Rail vehicles · Cycle hire docks · Schematic & network · Colours

HomeMaps

Map – Tube & Rail (Geo)

Geographic track for Tube, Elizabeth, Overground, DLR, and Tram.

Map

Uses foundationsColours

Used byVehicle progress Live Tube & Rail vehicles

Preview

Shared demo data

MapLibre GL JS on OpenFreeMap Positron (vector). No API key. Station names appear as you zoom.

Usage

import { TflGeographicMap } from "@/components/tfl/geography/tfl-geographic-map"

<div className="h-100">
  <TflGeographicMap />
</div>

<TflGeographicMap modes={["tube", "elizabeth"]} showStations={false} />
<TflGeographicMap trackModel="dual" />

Installable via shadcn CLI

Installation

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

This copies the component, types, and credit helpers. The GeoJSON still has to live somewhere your app can fetch. Copy public/data/geography/*.json into the project, or host those files on a CDN.

Unique corridors, not every variant

OpenStreetMap stores each timetable pattern as its own route. Paint all of them and the Elizabeth line stacks 24 times on the same tracks.

File	Centreline	Both tracks	OSM variants	Stations
`tube-geometry.json`	28	56	208	270
`overground-geometry.json`	14	27	50	112
`elizabeth-geometry.json`	5	10	24	41
`dlr-geometry.json`	5	10	12	45
`tram-geometry.json`	4	6	10	38

all-stations.json is the same 456 stations with merged line ids. Rebuild unique-track with pnpm geography:unique-track.

type TransitGeometryBundle = {
  lines: FeatureCollection<LineString, {
    featureId: string   // "elizabeth-track-0"
    lineId: string      // "victoria"
    lineName: string    // "Victoria line"
    color: string       // "#0098D4"
    trackGroup?: 0 | 1  // dual layer only
    towards?: string    // dual layer only
  }>
  stations: FeatureCollection<Point, {
    featureId: string   // "940GZZLUBST"
    name: string        // "Baker Street Underground Station"
    label: string       // "Baker Street"
    lineIds: string[]   // ["bakerloo", "circle", ...]
    zone?: string       // "1"
  }>
}

Bus routes are a separate map — they come from TfL route sequences, not these vendored rail files. See Map – Bus (Geo). Pass derived dots as vehicles — Live Tube & Rail vehicles places them.

Draw it in your own map

The files are GeoJSON. MapLibre and Leaflet need no key. Mapbox and Google Maps need a token from your project.

MapLibre GL JS

import maplibregl from "maplibre-gl";
import "maplibre-gl/dist/maplibre-gl.css";

// After install: import geometry from your project
import tubeGeometry from "./data/geography/tube-geometry.json";

const map = new maplibregl.Map({
  container: "map",
  style: "https://tiles.openfreemap.org/styles/positron",
  center: [-0.12, 51.51],
  zoom: 10,
  cooperativeGestures: true,
});

map.on("load", () => {
  map.addSource("tube-lines", { type: "geojson", data: tubeGeometry.lines });
  map.addLayer({
    id: "tube-lines",
    type: "line",
    source: "tube-lines",
    layout: { "line-join": "round", "line-cap": "round" },
    paint: {
      "line-color": ["get", "color"],
      "line-width": 3,
    },
  });

  map.addSource("tube-stations", { type: "geojson", data: tubeGeometry.stations });
  map.addLayer({
    id: "tube-stations",
    type: "circle",
    source: "tube-stations",
    paint: {
      "circle-radius": 3,
      "circle-color": "#ffffff",
      "circle-stroke-width": 1.25,
      "circle-stroke-color": "#111827",
    },
  });
  map.addLayer({
    id: "tube-stations-label",
    type: "symbol",
    source: "tube-stations",
    layout: {
      "text-field": ["coalesce", ["get", "label"], ["get", "name"], ""],
      "text-font": ["Noto Sans Regular"],
      "text-size": 11,
      "text-offset": [0, 1.15],
      "text-anchor": "top",
      "text-optional": true,
    },
    paint: {
      "text-color": "#111827",
      "text-halo-color": "#ffffff",
      "text-halo-width": 1.6,
    },
  });
});

Leaflet

import L from "leaflet";
import "leaflet/dist/leaflet.css";

import tubeGeometry from "./data/geography/tube-geometry.json";

const map = L.map("map").setView([51.51, -0.12], 10);

L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
  attribution: "© OpenStreetMap contributors",
}).addTo(map);

// Lines
L.geoJSON(tubeGeometry.lines, {
  style: (feature) => ({
    color: feature?.properties?.color ?? "#0019A8",
    weight: 3,
    opacity: 0.9,
  }),
}).addTo(map);

// Stations
L.geoJSON(tubeGeometry.stations, {
  pointToLayer: (_feature, latlng) =>
    L.circleMarker(latlng, {
      radius: 3,
      fillColor: "#fff",
      color: "#111827",
      weight: 1.25,
      fillOpacity: 1,
    }),
}).addTo(map);

Mapbox GL JS

Needs a public access token.

import mapboxgl from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";

import tubeGeometry from "./data/geography/tube-geometry.json";

// Your Mapbox access token
mapboxgl.accessToken = process.env.NEXT_PUBLIC_MAPBOX_TOKEN!;

const map = new mapboxgl.Map({
  container: "map",
  style: "mapbox://styles/mapbox/light-v11",
  center: [-0.12, 51.51],
  zoom: 10,
});

map.on("load", () => {
  map.addSource("tube-lines", { type: "geojson", data: tubeGeometry.lines });
  map.addLayer({
    id: "tube-lines",
    type: "line",
    source: "tube-lines",
    paint: {
      "line-color": ["get", "color"],
      "line-width": 3,
    },
  });

  map.addSource("tube-stations", { type: "geojson", data: tubeGeometry.stations });
  map.addLayer({
    id: "tube-stations",
    type: "circle",
    source: "tube-stations",
    paint: {
      "circle-radius": 3,
      "circle-color": "#ffffff",
      "circle-stroke-width": 1.25,
      "circle-stroke-color": "#111827",
    },
  });
});

Google Maps

Needs a Maps JavaScript API key.

import { setOptions, importLibrary } from "@googlemaps/js-api-loader";

import tubeGeometry from "./data/geography/tube-geometry.json";

// Your Google Maps API key
setOptions({ key: process.env.NEXT_PUBLIC_GOOGLE_MAPS_KEY! });

const { Map } = await importLibrary("maps");
const { SymbolPath } = await importLibrary("core");

const map = new Map(document.getElementById("map")!, {
  center: { lat: 51.51, lng: -0.12 },
  zoom: 10,
});

map.data.addGeoJson(tubeGeometry.lines);
map.data.addGeoJson(tubeGeometry.stations);
map.data.setStyle((feature) => {
  if (feature.getGeometry()?.getType() === "Point") {
    return {
      icon: {
        path: SymbolPath.CIRCLE,
        scale: 3,
        fillColor: "#ffffff",
        fillOpacity: 1,
        strokeColor: "#111827",
        strokeWeight: 1.25,
      },
    };
  }
  return {
    strokeColor: feature.getProperty("color") ?? "#0019A8",
    strokeWeight: 3,
    strokeOpacity: 0.9,
  };
});

Props

TflGeographicMap fills its parent. Give the wrapper a height.

Prop	Type	Default
data	`Record<TransitMode, Bundle>`	fetches vendored JSON
modes	`TransitMode[]`	all five
lineIds	`string[]`	all lines
trackModel	`"centreline" \| "dual"`	centreline
vehicles	`VehiclePosition[]`	none
showStations	boolean	true
showLines	boolean	true
showNavigation	boolean	true
center	`[lng, lat]`	[-0.12, 51.51]
zoom	number	10.2
className	string

Track data still belongs to OSM

In code

Map – Bus (Geo) · Live Tube & Rail vehicles · Cycle hire docks · Schematic & network · Colours

Map – Tube & Rail (Geo)

Geographic track for Tube, Elizabeth, Overground, DLR, and Tram.

Map

Uses foundationsColours

Used byVehicle progress Live Tube & Rail vehicles

Preview

Shared demo data

MapLibre GL JS on OpenFreeMap Positron (vector). No API key. Station names appear as you zoom.

Usage

import { TflGeographicMap } from "@/components/tfl/geography/tfl-geographic-map"

<div className="h-100">
  <TflGeographicMap />
</div>

<TflGeographicMap modes={["tube", "elizabeth"]} showStations={false} />
<TflGeographicMap trackModel="dual" />

Installable via shadcn CLI

Installation

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

This copies the component, types, and credit helpers. The GeoJSON still has to live somewhere your app can fetch. Copy public/data/geography/*.json into the project, or host those files on a CDN.

Unique corridors, not every variant

OpenStreetMap stores each timetable pattern as its own route. Paint all of them and the Elizabeth line stacks 24 times on the same tracks.

File	Centreline	Both tracks	OSM variants	Stations
`tube-geometry.json`	28	56	208	270
`overground-geometry.json`	14	27	50	112
`elizabeth-geometry.json`	5	10	24	41
`dlr-geometry.json`	5	10	12	45
`tram-geometry.json`	4	6	10	38

all-stations.json is the same 456 stations with merged line ids. Rebuild unique-track with pnpm geography:unique-track.

type TransitGeometryBundle = {
  lines: FeatureCollection<LineString, {
    featureId: string   // "elizabeth-track-0"
    lineId: string      // "victoria"
    lineName: string    // "Victoria line"
    color: string       // "#0098D4"
    trackGroup?: 0 | 1  // dual layer only
    towards?: string    // dual layer only
  }>
  stations: FeatureCollection<Point, {
    featureId: string   // "940GZZLUBST"
    name: string        // "Baker Street Underground Station"
    label: string       // "Baker Street"
    lineIds: string[]   // ["bakerloo", "circle", ...]
    zone?: string       // "1"
  }>
}

Bus routes are a separate map — they come from TfL route sequences, not these vendored rail files. See Map – Bus (Geo). Pass derived dots as vehicles — Live Tube & Rail vehicles places them.

Draw it in your own map

The files are GeoJSON. MapLibre and Leaflet need no key. Mapbox and Google Maps need a token from your project.

MapLibre GL JS

import maplibregl from "maplibre-gl";
import "maplibre-gl/dist/maplibre-gl.css";

// After install: import geometry from your project
import tubeGeometry from "./data/geography/tube-geometry.json";

const map = new maplibregl.Map({
  container: "map",
  style: "https://tiles.openfreemap.org/styles/positron",
  center: [-0.12, 51.51],
  zoom: 10,
  cooperativeGestures: true,
});

map.on("load", () => {
  map.addSource("tube-lines", { type: "geojson", data: tubeGeometry.lines });
  map.addLayer({
    id: "tube-lines",
    type: "line",
    source: "tube-lines",
    layout: { "line-join": "round", "line-cap": "round" },
    paint: {
      "line-color": ["get", "color"],
      "line-width": 3,
    },
  });

  map.addSource("tube-stations", { type: "geojson", data: tubeGeometry.stations });
  map.addLayer({
    id: "tube-stations",
    type: "circle",
    source: "tube-stations",
    paint: {
      "circle-radius": 3,
      "circle-color": "#ffffff",
      "circle-stroke-width": 1.25,
      "circle-stroke-color": "#111827",
    },
  });
  map.addLayer({
    id: "tube-stations-label",
    type: "symbol",
    source: "tube-stations",
    layout: {
      "text-field": ["coalesce", ["get", "label"], ["get", "name"], ""],
      "text-font": ["Noto Sans Regular"],
      "text-size": 11,
      "text-offset": [0, 1.15],
      "text-anchor": "top",
      "text-optional": true,
    },
    paint: {
      "text-color": "#111827",
      "text-halo-color": "#ffffff",
      "text-halo-width": 1.6,
    },
  });
});

Leaflet

import L from "leaflet";
import "leaflet/dist/leaflet.css";

import tubeGeometry from "./data/geography/tube-geometry.json";

const map = L.map("map").setView([51.51, -0.12], 10);

L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
  attribution: "© OpenStreetMap contributors",
}).addTo(map);

// Lines
L.geoJSON(tubeGeometry.lines, {
  style: (feature) => ({
    color: feature?.properties?.color ?? "#0019A8",
    weight: 3,
    opacity: 0.9,
  }),
}).addTo(map);

// Stations
L.geoJSON(tubeGeometry.stations, {
  pointToLayer: (_feature, latlng) =>
    L.circleMarker(latlng, {
      radius: 3,
      fillColor: "#fff",
      color: "#111827",
      weight: 1.25,
      fillOpacity: 1,
    }),
}).addTo(map);

Mapbox GL JS

Needs a public access token.

import mapboxgl from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";

import tubeGeometry from "./data/geography/tube-geometry.json";

// Your Mapbox access token
mapboxgl.accessToken = process.env.NEXT_PUBLIC_MAPBOX_TOKEN!;

const map = new mapboxgl.Map({
  container: "map",
  style: "mapbox://styles/mapbox/light-v11",
  center: [-0.12, 51.51],
  zoom: 10,
});

map.on("load", () => {
  map.addSource("tube-lines", { type: "geojson", data: tubeGeometry.lines });
  map.addLayer({
    id: "tube-lines",
    type: "line",
    source: "tube-lines",
    paint: {
      "line-color": ["get", "color"],
      "line-width": 3,
    },
  });

  map.addSource("tube-stations", { type: "geojson", data: tubeGeometry.stations });
  map.addLayer({
    id: "tube-stations",
    type: "circle",
    source: "tube-stations",
    paint: {
      "circle-radius": 3,
      "circle-color": "#ffffff",
      "circle-stroke-width": 1.25,
      "circle-stroke-color": "#111827",
    },
  });
});

Google Maps

Needs a Maps JavaScript API key.

import { setOptions, importLibrary } from "@googlemaps/js-api-loader";

import tubeGeometry from "./data/geography/tube-geometry.json";

// Your Google Maps API key
setOptions({ key: process.env.NEXT_PUBLIC_GOOGLE_MAPS_KEY! });

const { Map } = await importLibrary("maps");
const { SymbolPath } = await importLibrary("core");

const map = new Map(document.getElementById("map")!, {
  center: { lat: 51.51, lng: -0.12 },
  zoom: 10,
});

map.data.addGeoJson(tubeGeometry.lines);
map.data.addGeoJson(tubeGeometry.stations);
map.data.setStyle((feature) => {
  if (feature.getGeometry()?.getType() === "Point") {
    return {
      icon: {
        path: SymbolPath.CIRCLE,
        scale: 3,
        fillColor: "#ffffff",
        fillOpacity: 1,
        strokeColor: "#111827",
        strokeWeight: 1.25,
      },
    };
  }
  return {
    strokeColor: feature.getProperty("color") ?? "#0019A8",
    strokeWeight: 3,
    strokeOpacity: 0.9,
  };
});

Props

TflGeographicMap fills its parent. Give the wrapper a height.

Prop	Type	Default
data	`Record<TransitMode, Bundle>`	fetches vendored JSON
modes	`TransitMode[]`	all five
lineIds	`string[]`	all lines
trackModel	`"centreline" \| "dual"`	centreline
vehicles	`VehiclePosition[]`	none
showStations	boolean	true
showLines	boolean	true
showNavigation	boolean	true
center	`[lng, lat]`	[-0.12, 51.51]
zoom	number	10.2
className	string

Track data still belongs to OSM

In code

Map – Bus (Geo) · Live Tube & Rail vehicles · Cycle hire docks · Schematic & network · Colours

Preview

Usage

Installation

Unique corridors, not every variant

Related

Draw it in your own map

MapLibre GL JS

Leaflet

Mapbox GL JS

Google Maps

Props

Track data still belongs to OSM

In code

Preview

Usage

Installation

Unique corridors, not every variant

Related

Draw it in your own map

MapLibre GL JS

Leaflet

Mapbox GL JS

Google Maps

Props

Track data still belongs to OSM

In code

Preview

Usage

Installation

Unique corridors, not every variant

Related

Draw it in your own map

MapLibre GL JS

Leaflet

Mapbox GL JS

Google Maps

Props

Track data still belongs to OSM

In code

Preview

Usage

Installation

Unique corridors, not every variant

Related

Draw it in your own map

MapLibre GL JS

Leaflet

Mapbox GL JS

Google Maps

Props

Track data still belongs to OSM

In code