leaflet-city-mapper 0.0.2 → 0.0.4

package/src/traffic/groundTraffic.js

@@ -0,0 +1,19 @@
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+import { cameraByMap } from '../globals/cameraByMap.js';
+
+
+import { getElevation } from '../terrain/getElevation.js';
+
+export function groundTraffic(state) {
+  const { layer, lanes } = state;
+  const terrain = sceneByLayer.get(cameraByMap.get(layer._map)._terrain3D)?._terrainReady && cameraByMap.get(layer._map)._terrain3D, base = sceneByLayer.get(layer).root.position[1];
+  let lane, i, elevation;
+  for (lane of lanes) {
+    for (i = 0; i < lane.points.length; i++) {
+      elevation = terrain && (lane.elevation ?? getElevation(terrain, lane.latlngs[i]));
+      lane.points[i][2] = Number.isFinite(elevation) && Number.isFinite(base) ? elevation - base : 0;
+    }
+  }
+  state.lanesDirty = true;
+  state.nextCheck = -Infinity;
+}

package/src/traffic/initTraffic.js

@@ -0,0 +1,66 @@
+import { L } from '../globals/L.js';
+import { speed as sharedSpeed } from '../globals/speed.js';
+import { trafficEmptyOptions } from '../globals/trafficEmptyOptions.js';
+import { vehicles } from '../globals/vehicles.js';
+import { trafficShader } from '../globals/trafficShader.js';
+import { trafficByLayer } from '../globals/trafficByLayer.js';
+
+
+/**
+ * Vehicles moving along GeoJSON lanes; a compute pass places them on the GPU every frame.
+ * Source options:
+ * - `url`: GeoJSON (Multi)LineStrings, or a JS module whose default export `(time, layer, signal)` returns them (time-dependent data);
+ * - `vehicle`: 'car' (default), 'boat', 'bus', 'tram', 'metro', 'bicycle' or 'pedestrian'; `side`: offset right of the lane centreline in metres (vehicle default);
+ * - `speed`: m/s of `flow` lanes; `outline`: draw the lanes.
+ * Lane properties: `flow` (vehicles/h) or `timetable` (see scheduledTrips.js), optional fixed `elevation`
+ * in metres, `name`/`description` for the default tooltip. The status line (count and vehicle type) sits under the layer's entry in the layers control.
+ * L.Control.Time on the same map drives the time; without one, vehicles run live.
+ */
+import { build } from '../geometry/build.js';
+import { init3D } from '../scene/init3D.js';
+import { tooltip } from './tooltip.js';
+
+
+
+import { addTraffic } from './addTraffic.js';
+import { placeTraffic } from './placeTraffic.js';
+import { removeTraffic } from './removeTraffic.js';
+import { readyTraffic } from './readyTraffic.js';
+import { tickTraffic } from './tickTraffic.js';
+import { updateTraffic } from './updateTraffic.js';
+import { updateTrafficTerrain } from './updateTrafficTerrain.js';
+
+export function initTraffic(layer, { url, vehicle = 'car', side, outline, speed: velocity = sharedSpeed, ...options } = trafficEmptyOptions) {
+  const { model, lights, side: defaultSide } = vehicles[vehicle];
+  side ??= defaultSide;
+  init3D(layer, /* alloc */ {
+    tooltip,
+    nightLight: Boolean(lights),
+    ...options,
+  });
+  const status = L.DomUtil.create('small', 'traffic-status');
+  status.style.cssText = 'flex:0 1 auto;padding:1px 5px;border-radius:3px;background:#00000008;color:#555;';
+  status.title = vehicle;
+  status.textContent = `${vehicle}: loading…`;
+  const template = build(model(0)), stride = template.position.length, vertices = stride / 3;
+  const params = /* alloc */ new ArrayBuffer(16);
+  const paramFloats = /* alloc */ new Float32Array(params);
+  const paramInts = /* alloc */ new Uint32Array(params);
+  const state = /* alloc */ {
+    layer, url, model, lights, side, outline, velocity, vehicle, status, template, stride, vertices,
+    params, paramFloats, paramInts,
+    ready: false, frame: undefined, request: undefined, lanes: /* alloc */ [], tripsKey: undefined,
+    mesh: undefined, route: undefined, litAt: -Infinity,
+    trips: /* alloc */ [], rebasedAt: 0, nextCheck: -Infinity, elapsed: 0, gpu: null,
+    lanesDirty: true, stale: false, loaded: undefined, file: undefined,
+  };
+  // Lane points are [x, z, ground, cumulative length]. Mirrors along() and place().
+  state.shader = trafficShader;
+  state.tick = tickTraffic.bind(null, state);
+  state.update = updateTraffic.bind(null, state);
+  state.terrain = updateTrafficTerrain.bind(null, state);
+  trafficByLayer.set(layer, state);
+  layer.on('ready', readyTraffic.bind(null, state));
+  layer.on('add', addTraffic.bind(null, state));
+  layer.on('remove', removeTraffic.bind(null, state));
+}

package/src/traffic/loadTraffic.js

@@ -0,0 +1,15 @@
+import { trafficNow } from './trafficNow.js';
+import { fetchTrafficLanes } from './fetchTrafficLanes.js';
+import { loadedTrafficLanes } from './loadedTrafficLanes.js';
+import { failedTrafficLoad } from './failedTrafficLoad.js';
+
+export function loadTraffic(state) {
+  const { time } = trafficNow(state);
+  if (!Number.isFinite(time?.getTime())) return;
+  state.request?.abort();
+  const { signal } = state.request = /* alloc */ new AbortController();
+  fetchTrafficLanes(state, time, signal).then(
+    loadedTrafficLanes.bind(null, state, signal),
+    failedTrafficLoad.bind(null, state, signal),
+  );
+}

package/src/traffic/loadedTrafficLanes.js

@@ -0,0 +1,16 @@
+import { toLanes } from './toLanes.js';
+import { prepareTraffic } from './prepareTraffic.js';
+
+export function loadedTrafficLanes(state, signal, data) {
+  if (signal.aborted || !state.layer._map) return;
+  state.error = null;
+  if (data === state.loaded) {
+    state.nextCheck = -Infinity;
+    if (!state.frame) state.tick();
+    return;
+  }
+  state.loaded = data;
+  state.lanes = toLanes(data);
+  prepareTraffic(state);
+  if (!state.frame) state.tick();
+}

package/src/traffic/locateTraffic.js

@@ -0,0 +1,11 @@
+import { along } from './along.js';
+
+export function locateTraffic(state, trip) {
+  const { points, lengths, length } = trip.lane;
+  let distance = trip.distance + state.elapsed * trip.speed;
+  distance -= length * Math.floor(distance / length);
+  const position = along(points, lengths, distance);
+  position.x -= position.dz * state.side;
+  position.z += position.dx * state.side;
+  return position;
+}

package/src/traffic/moveTraffic.js

@@ -0,0 +1,15 @@
+export function moveTraffic(state, seconds) {
+  const { device } = state.gpu;
+  state.paramFloats[0] = state.elapsed = seconds;
+  state.paramFloats[1] = state.side;
+  state.paramInts[2] = state.vertices;
+  state.paramInts[3] = state.trips.length * state.vertices;
+  device.queue.writeBuffer(state.gpu.params, 0, state.params);
+  const encoder = device.createCommandEncoder(), pass = encoder.beginComputePass();
+  pass.setPipeline(state.gpu.pipeline);
+  pass.setBindGroup(0, state.gpu.bindGroup);
+  pass.dispatchWorkgroups(state.trips.length);
+  pass.end();
+  device.queue.submit(/* alloc */ [encoder.finish()]);
+  state.stale = true;
+}

package/src/traffic/placeTraffic.js

@@ -0,0 +1,21 @@
+import { locateTraffic } from './locateTraffic.js';
+
+export function placeTraffic(state) {
+  if (!state.mesh || !state.stale) return;
+  state.stale = false;
+  const { position, normal } = state.mesh.geometry.attributes;
+  let i, trip, cx, y, cz, dx, dz, k, o, lx, lz, nx, nz;
+  for (i = 0; i < state.trips.length; i++) {
+    trip = state.trips[i];
+    ({ x: cx, y, z: cz, dx, dz } = locateTraffic(state, trip));
+    for (k = 0, o = i * state.stride; k < state.stride; k += 3, o += 3) {
+      lx = state.template.position[k], lz = state.template.position[k + 2], nx = state.template.normal[k], nz = state.template.normal[k + 2];
+      position.data[o] = cx - lx * dz - lz * dx;
+      position.data[o + 1] = y + state.template.position[k + 1];
+      position.data[o + 2] = cz + lx * dx - lz * dz;
+      normal.data[o] = -nx * dz - nz * dx;
+      normal.data[o + 1] = state.template.normal[k + 1];
+      normal.data[o + 2] = nx * dx - nz * dz;
+    }
+  }
+}

package/src/traffic/prepareTraffic.js

@@ -0,0 +1,30 @@
+import { radians } from '../globals/radians.js';
+import { L } from '../globals/L.js';
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+
+
+import { disposeTrafficObject } from './disposeTrafficObject.js';
+import { groundTraffic } from './groundTraffic.js';
+
+export function prepareTraffic(state) {
+  const { layer, lanes } = state;
+  const crs = layer._map.options.crs, origin = crs.project(sceneByLayer.get(layer).location);
+  const metres = Math.cos(sceneByLayer.get(layer).location.lat * radians);
+  let lane, lat, lng, point, i;
+  for (lane of lanes) {
+    lane.points = /* alloc */ [];
+    for ([lat, lng] of lane.latlngs) {
+      point = crs.project(/* alloc */ new L.LatLng(lat, lng));
+      lane.points.push(/* alloc */ [(point.x - origin.x) * metres, -(point.y - origin.y) * metres, 0]);
+    }
+    lane.lengths = /* alloc */ [0];
+    for (i = 1; i < lane.points.length; i++) {
+      lane.lengths.push(lane.lengths[i - 1] + Math.hypot(lane.points[i][0] - lane.points[i - 1][0], lane.points[i][1] - lane.points[i - 1][1]));
+    }
+    lane.length = lane.lengths.at(-1);
+  }
+  groundTraffic(state);
+  disposeTrafficObject(state, state.route);
+  state.route = null;
+  state.tripsKey = null;
+}

package/src/traffic/readyTraffic.js

@@ -0,0 +1,6 @@
+import { startTraffic } from './startTraffic.js';
+
+export function readyTraffic(state) {
+  state.ready = true;
+  if (state.layer._map) startTraffic(state);
+}

package/src/traffic/rebaseTraffic.js

@@ -0,0 +1,60 @@
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+
+
+import { destroyTrafficGpu } from './destroyTrafficGpu.js';
+import { trafficStorage } from './trafficStorage.js';
+import { uploadTrafficLanes } from './uploadTrafficLanes.js';
+
+export function rebaseTraffic(state) {
+  const { device } = sceneByLayer.get(state.layer).renderer;
+  if (state.gpu?.device !== device) {
+    destroyTrafficGpu(state);
+    const template = /* alloc */ new Float32Array(
+      state.template.position.length + state.template.normal.length);
+    template.set(state.template.position);
+    template.set(state.template.normal, state.template.position.length);
+    state.gpu = /* alloc */ {
+      device,
+      pipeline: device.createComputePipeline(/* alloc */ {
+        layout: 'auto', compute: /* alloc */ {
+          module: device.createShaderModule(/* alloc */ { code: state.shader }), entryPoint: 'main',
+        },
+      }),
+      params: device.createBuffer(/* alloc */ { size: 16, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST }),
+      template: trafficStorage(device, template),
+    };
+    state.lanesDirty = true;
+  }
+  let i, trip, binding;
+  if (state.lanesDirty) uploadTrafficLanes(state, device);
+  const data = /* alloc */ new Float32Array(state.trips.length * 4);
+  const index = /* alloc */ new Uint32Array(data.buffer);
+  for (i = 0; i < state.trips.length; i++) {
+    trip = state.trips[i];
+    index[i * 4] = trip.lane.start;
+    index[i * 4 + 1] = trip.lane.points.length;
+    data[i * 4 + 2] = trip.distance;
+    data[i * 4 + 3] = trip.speed;
+    state.mesh.extras.featureFaces[i].properties = trip.properties;
+  }
+  if (state.gpu.vehicles?.size >= data.byteLength) device.queue.writeBuffer(state.gpu.vehicles, 0, data);
+  else {
+    state.gpu.vehicles?.destroy();
+    state.gpu.vehicles = trafficStorage(device, data);
+  }
+  const { position, normal } = state.mesh.geometry.attributes;
+  const entries = /* alloc */ [];
+  let buffer;
+  for (binding = 0; binding < 6; binding++) {
+    buffer = binding === 0 ? state.gpu.params : binding === 1 ? state.gpu.template
+      : binding === 2 ? state.gpu.points : binding === 3 ? state.gpu.vehicles
+        : binding === 4 ? position.buffer : normal.buffer;
+    entries.push(/* alloc */ {
+      binding, resource: /* alloc */ { buffer },
+    });
+  }
+  state.gpu.bindGroup = device.createBindGroup(/* alloc */ {
+    layout: state.gpu.pipeline.getBindGroupLayout(0),
+    entries,
+  });
+}

package/src/traffic/rebuildTrafficMesh.js

@@ -0,0 +1,32 @@
+import { trafficEmptyOptions } from '../globals/trafficEmptyOptions.js';
+import { build } from '../geometry/build.js';
+import { createTrafficMesh } from './createTrafficMesh.js';
+import { disposeTrafficObject } from './disposeTrafficObject.js';
+import { trafficBounds } from './trafficBounds.js';
+
+
+export function rebuildTrafficMesh(state) {
+  const { trips, model, vertices } = state;
+  disposeTrafficObject(state, state.mesh);
+  state.mesh = null;
+  if (!trips.length) return;
+  const color = /* alloc */ [];
+  const featureFaces = /* alloc */ [];
+  let i, trip, component;
+  for (i = 0; i < trips.length; i++) {
+    trip = trips[i];
+    for (component of build(model(i, trip.properties)).color) color.push(component);
+    featureFaces.push(/* alloc */ {
+      id: trip.id, properties: trip.properties, faceStart: i * vertices / 3, faceEnd: (i + 1) * vertices / 3,
+      vertexStart: i * vertices, vertexEnd: (i + 1) * vertices
+    });
+  }
+  const count = color.length / 3;
+  state.mesh = createTrafficMesh(state, /* alloc */ {
+    position: /* alloc */ new Array(color.length).fill(0),
+    normal: /* alloc */ new Array(color.length).fill(0), color,
+  }, featureFaces, trafficEmptyOptions, GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC);
+  state.mesh.geometry.drawRange.count = count;
+  state.mesh.extras.dynamicLights = true;
+  trafficBounds(state);
+}

package/src/traffic/refreshTrafficTrips.js

@@ -0,0 +1,32 @@
+import { tripsAt } from './tripsAt.js';
+import { failTraffic } from './failTraffic.js';
+import { drawTrafficRoute } from './drawTrafficRoute.js';
+import { rebuildTrafficMesh } from './rebuildTrafficMesh.js';
+import { rebaseTraffic } from './rebaseTraffic.js';
+import { trafficStatusText } from './trafficStatusText.js';
+
+export function refreshTrafficTrips(state, time, ms, valid) {
+  let text;
+  try {
+    if (valid) state.trips = tripsAt(time, state.lanes, state.velocity);
+    else state.trips.length = 0;
+    text = trafficStatusText(state, valid);
+  } catch (error) {
+    failTraffic(state, error);
+    return;
+  }
+  state.rebasedAt = ms;
+  state.nextCheck = ms + 1000;
+  let key = '', trip;
+  for (trip of state.trips) key += `${key ? ',' : ''}${trip.id}`;
+  const routeNeeded = state.outline && !state.route && state.lanes.length;
+  const changed = key !== state.tripsKey || Boolean(routeNeeded);
+  if (routeNeeded) drawTrafficRoute(state);
+  if (key !== state.tripsKey) { rebuildTrafficMesh(state); state.tripsKey = key; }
+  if (state.mesh) rebaseTraffic(state);
+  if (!state.error) {
+    if (state.status.textContent !== text) state.status.textContent = text;
+    state.status.removeAttribute('role');
+  }
+  return changed;
+}

package/src/traffic/removeTraffic.js

@@ -0,0 +1,20 @@
+import { trafficByLayer } from '../globals/trafficByLayer.js';
+
+
+import { disposeTrafficObject } from './disposeTrafficObject.js';
+import { destroyTrafficGpu } from './destroyTrafficGpu.js';
+
+export function removeTraffic(state) {
+  state.request?.abort();
+  cancelAnimationFrame(state.frame);
+  state.frame = undefined;
+  state.layer._map.off('simulationtimechange layerremove', state.update).off('terrainchange', state.terrain);
+  disposeTrafficObject(state, state.mesh);
+  disposeTrafficObject(state, state.route);
+  state.mesh = state.route = null;
+  trafficByLayer.delete(state.layer);
+  destroyTrafficGpu(state);
+  state.lanes.length = 0;
+  state.trips.length = 0;
+  state.tripsKey = state.loaded = null;
+}

package/src/traffic/routeColor.js

@@ -0,0 +1,6 @@
+export function routeColor(properties) {
+  const color = properties?.route_color;
+  if (!/^[\da-f]{6}$/i.test(color)) return /* alloc */ [0.1, 0.55, 0.65];
+  const value = Number.parseInt(color, 16);
+  return /* alloc */ [(value >> 16 & 255) / 255, (value >> 8 & 255) / 255, (value & 255) / 255];
+}

package/src/traffic/routeGeometry.js

@@ -0,0 +1,21 @@
+import { appendRouteSegment } from './appendRouteSegment.js';
+
+/** Dashed lane outline, in layer-local metres. */
+
+export function routeGeometry(lanes) {
+  const position = /* alloc */ [];
+  const normal = /* alloc */ [];
+  const color = /* alloc */ [];
+  let points, lengths, properties, raw, rgb, r, g, blue, i;
+  for ({ points, lengths, properties } of lanes) {
+    raw = properties?.route_color;
+    rgb = /^[\da-f]{6}$/i.test(raw) ? Number.parseInt(raw, 16) : null;
+    r = rgb === null ? 0.08 : (rgb >> 16 & 255) / 255;
+    g = rgb === null ? 0.7 : (rgb >> 8 & 255) / 255;
+    blue = rgb === null ? 0.85 : (rgb & 255) / 255;
+    for (i = 1; i < points.length; i++) {
+      appendRouteSegment(position, normal, color, points, lengths, i, r, g, blue);
+    }
+  }
+  return /* alloc */ { position, normal, color };
+}

package/src/traffic/scheduledTrips.js

@@ -0,0 +1,51 @@
+import { trafficClocks } from '../globals/trafficClocks.js';
+import { clockMinutes } from './clockMinutes.js';
+import { compareDepartures } from './compareDepartures.js';
+
+
+/**
+ * Trips of a frequency-based timetable (like GTFS frequencies.txt) underway at `date`, in the timetable's local time.
+ * @param {{timeZone: string, duration: number, services: Array<{from: string, to: string, every?: number, months?: number[], weekdays?: number[]}>}} timetable
+ * `duration` and `every` are minutes; `from`/`to` are 'HH:MM' first/last departures; months are 1-12, weekdays 0 (Sunday)-6.
+ * @returns {Array<{id: string, departure: string, progress: number}>} `progress` is 0-1 along the lane.
+ */
+
+export function scheduledTrips(date, { timeZone, duration, services }) {
+  const time = date instanceof Date ? date
+    : /* alloc */ new Date(date);
+  if (!Number.isFinite(time.getTime())) throw /* alloc */ new Error('Invalid date');
+  let clock = trafficClocks.get(timeZone);
+  if (!clock) {
+    clock = /* alloc */ new Intl.DateTimeFormat('en-GB',
+      /* alloc */ {
+        timeZone, year: 'numeric', month: '2-digit', day: '2-digit',
+        hour: '2-digit', minute: '2-digit', second: '2-digit', hourCycle: 'h23',
+      });
+    if (trafficClocks.size >= 32) {
+      trafficClocks.delete(trafficClocks.keys().next().value);
+    }
+    trafficClocks.set(timeZone, clock);
+  }
+  const parts = /* alloc */ {};
+  let part, from, to, every, months, weekdays, departure;
+  for (part of clock.formatToParts(time)) {
+    if (part.type !== 'literal') parts[part.type] = Number(part.value);
+  }
+  const minute = parts.hour * 60 + parts.minute + (parts.second + time.getUTCMilliseconds() / 1000) / 60;
+  const weekday = ((Math.floor(Date.UTC(parts.year, parts.month - 1, parts.day) / 86400000) + 4) % 7 + 7) % 7;
+  const departures = /* alloc */ [];
+  for ({ from, to, every = Infinity, months, weekdays } of services) {
+    if (months?.includes(parts.month) === false || weekdays?.includes(weekday) === false) continue;
+    for (departure = clockMinutes(from); departure <= clockMinutes(to); departure += every) departures.push(departure);
+  }
+  departures.sort(compareDepartures);
+  const trips = /* alloc */ [];
+  for (departure of departures) {
+    if (minute >= departure && minute < departure + duration) trips.push(/* alloc */ {
+      id: `${parts.year}-${parts.month}-${parts.day}-${departure}`,
+      departure: `${String(Math.floor(departure / 60)).padStart(2, '0')}:${String(departure % 60).padStart(2, '0')}`,
+      progress: (minute - departure) / duration,
+    });
+  }
+  return trips;
+}

package/src/traffic/startTraffic.js

@@ -0,0 +1,8 @@
+import { underEntry } from '../scene/underEntry.js';
+
+export function startTraffic(state) {
+  state.layer._map.off('simulationtimechange layerremove', state.update).on('simulationtimechange layerremove', state.update);
+  state.layer._map.off('terrainchange', state.terrain).on('terrainchange', state.terrain);
+  underEntry(state.layer, state.status);
+  state.update();
+}

package/src/traffic/tickTraffic.js

@@ -0,0 +1,26 @@
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+
+
+import { update as updateScene } from '../scene/update.js';
+import { trafficNow } from './trafficNow.js';
+import { refreshTrafficTrips } from './refreshTrafficTrips.js';
+import { updateTrafficPose } from './updateTrafficPose.js';
+
+export function tickTraffic(state) {
+  state.frame = undefined;
+  if (!state.ready || !state.layer._map) return;
+  if (!sceneByLayer.get(state.layer).renderer) { state.frame = requestAnimationFrame(state.tick); return; }
+  if (state.mesh && !(state.mesh.geometry.attributes.position.buffer.usage & GPUBufferUsage.STORAGE)) {
+    state.tripsKey = null;
+    state.nextCheck = -Infinity;
+  }
+  const { live, time } = trafficNow(state), ms = time?.getTime(), valid = Number.isFinite(ms);
+  let changed = false;
+  if (!live || !valid || !(ms >= state.rebasedAt && ms < state.nextCheck)) {
+    changed = refreshTrafficTrips(state, time, ms, valid);
+    if (changed === undefined) return;
+  }
+  updateTrafficPose(state, ms, live);
+  if (state.mesh || changed) updateScene(state.layer);
+  if (live && valid) state.frame = requestAnimationFrame(state.tick);
+}

package/src/traffic/toLanes.js

@@ -0,0 +1,24 @@
+import { trafficEmptyList } from '../globals/trafficEmptyList.js';
+// GeoJSON (Multi)LineStrings become lanes ({latlngs, properties, elevation?}); prepare() adds `points` ([x, z, ground]),
+// `lengths` and `length` in layer-local metres.
+
+
+
+export function toLanes({ features = trafficEmptyList }) {
+  const lanes = /* alloc */ [];
+  let geometry, properties, lines, line, latlngs, lng, lat, i;
+  for ({ geometry, properties } of features) {
+    if (geometry?.type !== 'LineString' && geometry?.type !== 'MultiLineString') continue;
+    lines = geometry.type === 'MultiLineString' ? geometry.coordinates : null;
+    for (i = 0; i < (lines ? lines.length : 1); i++) {
+      line = lines ? lines[i] : geometry.coordinates;
+      latlngs = /* alloc */ [];
+      for ([lng, lat] of line) latlngs.push(/* alloc */ [lat, lng]);
+      lanes.push(/* alloc */ {
+        latlngs, properties: properties ?? /* alloc */ {},
+        elevation: properties?.elevation,
+      });
+    }
+  }
+  return lanes;
+}

package/src/traffic/tooltip.js

@@ -0,0 +1,9 @@
+export function tooltip({ properties: p }) {
+  const content = document.createElement('div');
+  content.style.whiteSpace = 'pre-line';
+  let text = p.name ? String(p.name) : '';
+  if (p.departure) text += `${text ? '\n' : ''}Departure ${p.departure} ${p.timetable.timeZone}`;
+  if (p.description) text += `${text ? '\n' : ''}${p.description}`;
+  content.textContent = text;
+  return content;
+}

package/src/traffic/trafficBounds.js

@@ -0,0 +1,21 @@
+import { computeBounds } from '../geometry/computeBounds.js';
+
+export function trafficBounds(state) {
+  let radius = 20, height = 5;
+  let i, lane, x, z, y;
+  for (i = 0; i < state.template.position.length; i += 3) {
+    radius = Math.max(radius, Math.hypot(state.template.position[i], state.template.position[i + 2]) + Math.abs(state.side));
+    height = Math.max(height, state.template.position[i + 1]);
+  }
+  const data = /* alloc */ [];
+  for (lane of state.lanes) {
+    for ([x, z, y] of lane.points) data.push(x - radius, y, z - radius, x + radius, y + height, z + radius);
+  }
+  const extent = /* alloc */ {
+    attributes: /* alloc */ {
+      position: /* alloc */ { data },
+    },
+  };
+  computeBounds(extent);
+  state.mesh.geometry.bounds = extent.bounds;
+}

package/src/traffic/trafficNow.js

@@ -0,0 +1,10 @@
+import { cameraByMap } from '../globals/cameraByMap.js';
+
+
+export function trafficNow(state) {
+  const control = cameraByMap.get(state.layer._map)?._timeControl;
+  const live = control ? control.live : true;
+  return /* alloc */ {
+    live, time: live ? /* alloc */ new Date() : control.time,
+  };
+}

package/src/traffic/trafficStatusText.js

@@ -0,0 +1,5 @@
+export function trafficStatusText(state, valid) {
+  if (!valid) return `${state.vehicle}: select a valid simulation date`;
+  if (!state.loaded) return `${state.vehicle}: loading…`;
+  return `${state.trips.length} ${state.vehicle === 'boat' ? 'boats' : state.vehicle}`;
+}

package/src/traffic/trafficStorage.js

@@ -0,0 +1,5 @@
+export function trafficStorage(device, data) {
+  const buffer = device.createBuffer(/* alloc */ { size: Math.max(16, data.byteLength), usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST });
+  device.queue.writeBuffer(buffer, 0, data);
+  return buffer;
+}

package/src/traffic/tripsAt.js

@@ -0,0 +1,27 @@
+import { vehicleOffsets } from "./vehicleOffsets.js";
+import { scheduledTrips } from "./scheduledTrips.js";
+
+// A lane with a `timetable` runs scheduled trips end to end; one with a `flow` (vehicles/h) loops evenly spaced vehicles.
+
+export function tripsAt(time, lanes, velocity) {
+  const trips = /* alloc */ [];
+  let l, lane, timetable, flow, trip, travelled, offsets, k;
+  for (l = 0; l < lanes.length; l++) {
+    lane = lanes[l];
+    ({ timetable, flow = 0 } = lane.properties);
+    if (!lane.length) continue;
+    if (timetable) {
+      for (trip of scheduledTrips(time, timetable)) trips.push(/* alloc */ {
+        id: `${l}-${trip.id}`, lane, distance: trip.progress * lane.length, speed: lane.length / (timetable.duration * 60),
+        properties: /* alloc */ { ...lane.properties, departure: trip.departure },
+      });
+    } else {
+      travelled = time / 1000 * velocity;
+      offsets = lane.offsets ||= vehicleOffsets(lane.length, flow, velocity);
+      for (k = 0; k < offsets.length; k++) trips.push(/* alloc */ {
+        id: `${l}-${k}`, lane, distance: (offsets[k] + travelled) % lane.length, speed: velocity, properties: lane.properties,
+      });
+    }
+  }
+  return trips;
+}

package/src/traffic/updateTraffic.js

@@ -0,0 +1,11 @@
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+
+
+import { loadTraffic } from './loadTraffic.js';
+
+export function updateTraffic(state, event) {
+  if (event?.layer && !sceneByLayer.get(event.layer).control?.time) return;
+  cancelAnimationFrame(state.frame);
+  loadTraffic(state);
+  state.tick();
+}

package/src/traffic/updateTrafficLights.js

@@ -0,0 +1,16 @@
+import { locateTraffic } from './locateTraffic.js';
+
+export function updateTrafficLights(state) {
+  state.litAt = performance.now();
+  const lights = /* alloc */ [];
+  let trip, x, y, z, dx, dz, lx, ly, lz, light;
+  for (trip of state.trips) {
+    ({ x, y, z, dx, dz } = locateTraffic(state, trip));
+    for ({ position: [lx, ly, lz], ...light } of state.lights) {
+      lights.push(/* alloc */ {
+        ...light, position: /* alloc */ [x - lx * dz - lz * dx, y + ly, z + lx * dx - lz * dz],
+      });
+    }
+  }
+  state.mesh.extras.lights = lights;
+}

package/src/traffic/updateTrafficPose.js

@@ -0,0 +1,8 @@
+import { moveTraffic } from './moveTraffic.js';
+import { updateTrafficLights } from './updateTrafficLights.js';
+
+export function updateTrafficPose(state, ms, live) {
+  if (!state.mesh) return;
+  moveTraffic(state, (ms - state.rebasedAt) / 1000);
+  if (state.lights && (!live || !(performance.now() - state.litAt < 100))) updateTrafficLights(state);
+}

package/src/traffic/updateTrafficTerrain.js

@@ -0,0 +1,12 @@
+import { disposeTrafficObject } from './disposeTrafficObject.js';
+import { groundTraffic } from './groundTraffic.js';
+import { trafficBounds } from './trafficBounds.js';
+
+export function updateTrafficTerrain(state) {
+  if (!state.lanes.length) return;
+  groundTraffic(state);
+  disposeTrafficObject(state, state.route);
+  state.route = null;
+  if (state.mesh) trafficBounds(state);
+  if (!state.frame) state.tick();
+}