Bus stops, lines and departures

England's bus stops and lines from NaPTAN and the BODS timetables, kept apart from the basemap, with a click on a stop fetching its timetabled departures. The times are the timetable's; MapMap does not plan journeys or predict arrivals.

import { createMap, TransitStopsLayer } from "@mapmap/maps";

const map = createMap({
  container: "map",
  apiKey: "snk_...",
  attributionPosition: "bottom-left",
  center: [-0.1281, 51.508],
  zoom: 15,
});
await map.whenReady();

const board = document.querySelector("#board")!;

// Lines from zoom 6 in the route's own colour where one is published,
// stops from zoom 11, both at slot "middle" and kept through setStyle.
const transit = new TransitStopsLayer(map, {
  onStopClick: async (stop) => {
    // stop.id is the NaPTAN ATCO code; stop.lines the lines calling there.
    const res = await fetch(
      "https://api.mapmap.ai/v1/transit/departures?stop=" + encodeURIComponent(stop.id),
      { headers: { Authorization: "Bearer snk_..." } },
    );
    const body = await res.json();
    // Show the label with the times: it says what they are.
    board.textContent = [
      stop.name + (stop.indicator ? " (" + stop.indicator + ")" : ""),
      ...body.departures.map((d: { line: string; destination: string; scheduled_at: string }) =>
        d.line + " to " + d.destination + " at " + d.scheduled_at.slice(11, 16)),
      body.label,
    ].join("\n");
  },
});
await transit.ready;   // false when no transit archives are published

Worth knowing

Departure times are the timetable's (basis: timetable). A live entry means a bus on that line was seen heading towards the stop; it is an observation of where that bus is, not a forecast of when it arrives. Pass the label on with the times.
With an API key on the map the layer reads the stops and lines tiles through the keyed tile API, metered like basemap tiles. stopsUrl and linesUrl point it at a copy you host yourself.
Coverage is England's bus and coach stops; rail, tram, metro and ferry are not included. The layer adds the NaPTAN and BODS short credits to the map's credit line.

Buses: live positions, stops, lines and timetables Next: Truck route with dimensions and ADR