@mapmap/maps 0.5.2 → 0.7.0

package/dist/index.js

@@ -1,5 +1,5 @@
-import { directionIcons, iconNameForStep } from './chunk-CH53LJR7.js';
-export { directionIconSvg, directionIcons, iconNameForManeuver, iconNameForStep } from './chunk-CH53LJR7.js';
+import { directionIcons, iconNameForStep } from './chunk-J657OWYE.js';
+export { directionIconSvg, directionIcons, iconNameForManeuver, iconNameForStep, iconNamesForSteps } from './chunk-J657OWYE.js';
 import maplibregl from 'maplibre-gl';
 import { Protocol } from 'pmtiles';
 
@@ -619,6 +619,10 @@ function num(v, fallback, min, max) {
 function optNum(v, min, max) {
   return typeof v === "number" && Number.isFinite(v) ? Math.min(max, Math.max(min, v)) : void 0;
 }
+function dashArray(v) {
+  if (!Array.isArray(v) || v.length === 0) return void 0;
+  return v.every((n) => typeof n === "number" && Number.isFinite(n) && n >= 0) ? v : void 0;
+}
 function bool(v, fallback) {
   return typeof v === "boolean" ? v : fallback;
 }
@@ -692,13 +696,23 @@ function parseNavDesign(value) {
   const route = isRecord(value.route) ? value.route : {};
   const puck = isRecord(value.puck) ? value.puck : {};
   const banner = isRecord(value.banner) ? value.banner : {};
+  const casingWidth = optNum(route.casingWidth, 0.5, 40);
+  const casingOpacity = optNum(route.casingOpacity, 0, 1);
+  const dash = dashArray(route.dash);
   return {
     version: 1,
     route: {
       color: str(route.color, d.route.color),
       width: num(route.width, d.route.width, 0.5, 20),
       opacity: num(route.opacity, d.route.opacity, 0, 1),
-      casingColor: str(route.casingColor, d.route.casingColor)
+      casingColor: str(route.casingColor, d.route.casingColor),
+      // Casing width/opacity and the dash pattern stay OPTIONAL: absent must
+      // round-trip as absent so `RouteLayer` keeps its documented `width + 4`
+      // and shared-opacity fallbacks, and a theme saved before these fields
+      // existed re-exports byte-identical.
+      ...casingWidth !== void 0 ? { casingWidth } : {},
+      ...casingOpacity !== void 0 ? { casingOpacity } : {},
+      ...dash !== void 0 ? { dash } : {}
     },
     puck: {
       color: str(puck.color, d.puck.color),
@@ -1098,8 +1112,22 @@ function landcoverColour(p) {
     base
   ];
 }
+var NOT_A_ROAD_CLASSES = [
+  "rail",
+  "transit",
+  "ferry",
+  "path",
+  "track",
+  "pedestrian",
+  "aerialway",
+  "bridge",
+  "pier"
+];
 function notARoadFilter() {
-  return ["!in", "class", "rail", "transit", "ferry", "path", "track", "pedestrian", "aerialway"];
+  return ["!in", "class", ...NOT_A_ROAD_CLASSES];
+}
+function minorRoadFilter() {
+  return ["!in", "class", "motorway", "trunk", "primary", ...NOT_A_ROAD_CLASSES];
 }
 function tunnelOpacity() {
   return ["match", ["get", "brunnel"], "tunnel", 0.55, 1];
@@ -1346,12 +1374,23 @@ function buildStyle(options = {}) {
       source: "territory",
       "source-layer": "transportation",
       minzoom: 14,
-      // A fill layer only ever draws polygonal geometry, so the class match
-      // is the whole filter. An explicit ["==", ["geometry-type"], "Polygon"]
-      // clause looks right but matches NOTHING here: MapLibre reports these
-      // multi-ring plazas as "MultiPolygon" (verified live — the clause
-      // rendered 0 of 73 features).
-      filter: ["match", ["get", "class"], ["path", "pedestrian"], true, false],
+      // The geometry-type clause is LOAD-BEARING, not belt and braces. A fill
+      // layer does not skip line geometry: MapLibre's FillBucket tessellates
+      // every ring `loadGeometry()` hands it, so an open footway LineString
+      // gets closed and filled, and the chord from its last vertex back to its
+      // first is drawn as a solid wedge. Over land that wedge hides in the
+      // landuse beige; over water it is a grey slab across the bay. Class
+      // alone matched 206 features at Lugano z15, 165 of them lines.
+      //
+      // Both Polygon and MultiPolygon are needed: MapLibre reports a plaza as
+      // "MultiPolygon" as soon as it has more than one ring (a hole is
+      // enough), so matching only "Polygon" silently drops the
+      // doughnut-shaped plazas.
+      filter: [
+        "all",
+        ["match", ["get", "class"], ["path", "pedestrian"], true, false],
+        ["in", ["geometry-type"], ["literal", ["Polygon", "MultiPolygon"]]]
+      ],
       paint: {
         "fill-color": p("path"),
         "fill-opacity": 0.7
@@ -1391,19 +1430,7 @@ function buildStyle(options = {}) {
       type: "line",
       source: "territory",
       "source-layer": "transportation",
-      filter: [
-        "!in",
-        "class",
-        "motorway",
-        "trunk",
-        "primary",
-        "rail",
-        "transit",
-        "path",
-        "track",
-        "pedestrian",
-        "ferry"
-      ],
+      filter: minorRoadFilter(),
       layout: { "line-cap": "round", "line-join": "round" },
       paint: {
         "line-color": mixColour(p("road"), p("textSecondary"), 0.45),
@@ -1472,19 +1499,7 @@ function buildStyle(options = {}) {
       type: "line",
       source: "territory",
       "source-layer": "transportation",
-      filter: [
-        "!in",
-        "class",
-        "motorway",
-        "trunk",
-        "primary",
-        "rail",
-        "transit",
-        "path",
-        "track",
-        "pedestrian",
-        "ferry"
-      ],
+      filter: minorRoadFilter(),
       layout: { "line-cap": "round", "line-join": "round" },
       paint: {
         "line-color": p("road"),
@@ -1870,7 +1885,14 @@ var MapMapMap = class {
     this.effectName = null;
     this.effectOptions = {};
     this.effectExplicit = false;
+    /** True while an effect re-apply is already queued behind the style. */
+    this.effectWaiting = false;
+    // Lifecycle: `destroy()` must silence anything still queued behind a
+    // style load, and the cleanups let it detach those listeners.
+    this.destroyed = false;
+    this.pendingWaits = /* @__PURE__ */ new Set();
     this.handleStyleLoadForEffects = () => {
+      if (this.destroyed) return;
       if (!this.effectExplicit) {
         const block = effectsFromStyleMetadata(this.styleMetadata());
         this.effectName = block?.route ?? null;
@@ -1909,6 +1931,37 @@ var MapMapMap = class {
       apiKey: this.apiKey
     });
   }
+  /**
+   * Run `action` as soon as the style can take layer edits, or now if it
+   * already can.
+   *
+   * Never wait on `load` alone: MapLibre fires it exactly once per map, so
+   * anything deferred after the first load is dropped for good - and
+   * `isStyleLoaded()` reports false for the whole of every `style.load`
+   * (the new style's sources are still loading) and whenever a source is
+   * loading afterwards. Waiting for whichever of `style.load` / `idle` /
+   * `load` arrives first covers the first load and every later style swap,
+   * and the listeners detach as soon as one fires (or on `destroy()`).
+   */
+  whenStyleReady(action) {
+    if (this.destroyed) return;
+    if (this.map.isStyleLoaded()) {
+      action();
+      return;
+    }
+    const events = ["style.load", "idle", "load"];
+    const run = () => {
+      cleanup();
+      if (this.destroyed) return;
+      action();
+    };
+    const cleanup = () => {
+      this.pendingWaits.delete(cleanup);
+      for (const event of events) this.map.off(event, run);
+    };
+    this.pendingWaits.add(cleanup);
+    for (const event of events) this.map.on(event, run);
+  }
   /** The current style's `metadata`, if it can be read yet. */
   styleMetadata() {
     try {
@@ -1948,10 +2001,10 @@ var MapMapMap = class {
   setRouteEffect(effect, options = {}) {
     this.effectExplicit = true;
     const { geometry, ...flowOptions } = options;
+    this.removeEffectLayer();
     this.effectName = effect;
     this.effectOptions = flowOptions;
     if (geometry) this.effectGeometry = geometry;
-    this.removeEffectLayer();
     this.applyRouteEffect();
   }
   /**
@@ -1984,7 +2037,12 @@ var MapMapMap = class {
       return;
     }
     if (!this.map.isStyleLoaded()) {
-      this.map.once("load", () => this.applyRouteEffect());
+      if (this.effectWaiting) return;
+      this.effectWaiting = true;
+      this.whenStyleReady(() => {
+        this.effectWaiting = false;
+        this.applyRouteEffect();
+      });
       return;
     }
     if (this.effectLayer && this.map.getLayer(id)) {
@@ -2013,7 +2071,7 @@ var MapMapMap = class {
    */
   setBuildings3d(enabled) {
     if (!this.map.isStyleLoaded()) {
-      this.map.once("load", () => this.setBuildings3d(enabled));
+      this.whenStyleReady(() => this.setBuildings3d(enabled));
       return;
     }
     if (enabled === (this.map.getLayer("building-3d") !== void 0)) return;
@@ -2036,18 +2094,45 @@ var MapMapMap = class {
       this.map.setLayerZoomRange("building", minzoom, 24);
     }
   }
-  /** Resolves once the style and first tiles are loaded. */
+  /**
+   * Resolves once the style and first tiles are loaded.
+   *
+   * Safe to call at any point in the map's life, not just before its
+   * first load: `map.loaded()` goes false again whenever a source is
+   * loading (a theme swap, a pan into new tiles) while `load` only ever
+   * fires once, so this waits on `idle` too rather than hanging.
+   */
   whenReady() {
     return new Promise((resolve) => {
       if (this.map.loaded()) {
         resolve();
         return;
       }
-      this.map.once("load", () => resolve());
+      const events = ["load", "idle"];
+      const done = () => {
+        for (const event of events) this.map.off(event, done);
+        this.pendingWaits.delete(cleanup);
+        resolve();
+      };
+      const cleanup = () => {
+        for (const event of events) this.map.off(event, done);
+        this.pendingWaits.delete(cleanup);
+      };
+      this.pendingWaits.add(cleanup);
+      for (const event of events) this.map.on(event, done);
     });
   }
-  /** Remove the map and release its WebGL context. */
+  /**
+   * Remove the map and release its WebGL context. Anything still queued
+   * behind a style load is dropped first, so nothing touches the map
+   * after this returns.
+   */
   destroy() {
+    this.destroyed = true;
+    for (const cleanup of [...this.pendingWaits]) cleanup();
+    this.pendingWaits.clear();
+    this.effectWaiting = false;
+    this.effectLayer = void 0;
     this.map.remove();
   }
 };
@@ -2153,12 +2238,544 @@ function numberOr(value, fallback) {
   return typeof value === "number" && Number.isFinite(value) ? value : fallback;
 }
 
+// src/marker-icons.ts
+var MARKER_GLYPH_IDS = [
+  "pin",
+  "dot",
+  "star",
+  "heart",
+  "flag",
+  "home",
+  "work",
+  "food",
+  "cafe",
+  "bar",
+  "shop",
+  "hotel",
+  "parking",
+  "fuel",
+  "charging",
+  "transit",
+  "bike",
+  "camera",
+  "music",
+  "warning",
+  "info"
+];
+function isMarkerGlyphId(value) {
+  return typeof value === "string" && MARKER_GLYPH_IDS.includes(value);
+}
+var markerGlyphPaths = {
+  pin: "M7 12a5 5 0 1 1 10 0a5 5 0 1 1-10 0Z",
+  dot: "M4 12a8 8 0 1 1 16 0a8 8 0 1 1-16 0Z",
+  star: "M12 3L14.41 9.483L21.32 9.772L15.899 14.067L17.76 20.728L12 16.9L6.24 20.728L8.101 14.067L2.68 9.772L9.59 9.483Z",
+  heart: "M12 21C6.5 16.5 3 13.2 3 9.5C3 6.5 5.4 4.5 8 4.5C9.7 4.5 11.2 5.4 12 6.8C12.8 5.4 14.3 4.5 16 4.5C18.6 4.5 21 6.5 21 9.5C21 13.2 17.5 16.5 12 21Z",
+  flag: "M5.5 2.5h2v19h-2V2.5Zm2 2H19l-2.8 4l2.8 4H7.5v-8Z",
+  home: "M12 3.2l9 7.6h-2.6v9.7h-4.9v-5.9h-3v5.9H5.6v-9.7H3l9-7.6Z",
+  work: "M9.5 4h5a1.5 1.5 0 0 1 1.5 1.5V7h4a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h4V5.5A1.5 1.5 0 0 1 9.5 4Zm0.5 3h4V5.5h-4V7Z",
+  food: "M6.75 8.25V3.75a0.75 0.75 0 0 1 1.5 0V8.25a0.75 0.75 0 0 1-1.5 0ZM20.25 3.75V21a0.75 0.75 0 0 1-1.5 0V16.5H14.25a0.75 0.75 0 0 1-0.75-0.75 25.195 25.195 0 0 1 0.677-5.333c0.917-3.796 2.655-6.34 5.028-7.357A0.75 0.75 0 0 1 20.25 3.75ZM18.75 5.053c-3.016 2.303-3.607 7.914-3.722 9.947H18.75ZM11.24 3.627a0.75 0.75 0 1 0-1.479 0.247L10.5 8.309a3 3 0 0 1-6 0l0.739-4.435a0.75 0.75 0 1 0-1.479-0.247l-0.75 4.5A0.766 0.766 0 0 0 3 8.25a4.507 4.507 0 0 0 3.75 4.436V21a0.75 0.75 0 0 0 1.5 0V12.686A4.507 4.507 0 0 0 12 8.25a0.766 0.766 0 0 0-0.01-0.123Z",
+  cafe: "M3 6.2h13.4v6.3a5.5 5.5 0 0 1-5.5 5.5H8.5A5.5 5.5 0 0 1 3 12.5V6.2Zm13.4 2h2.4a3.2 3.2 0 0 1 0 6.4h-1.6v-2.2h1.6a1 1 0 0 0 0-2h-2.4V8.2Z",
+  bar: "M3.5 4h17l-7.2 8.2V19h3.7v2H7v-2h3.3v-6.8L3.5 4Z",
+  shop: "M20.25 3.75H3.75A1.5 1.5 0 0 0 2.25 5.25V18.75a1.5 1.5 0 0 0 1.5 1.5H20.25a1.5 1.5 0 0 0 1.5-1.5V5.25A1.5 1.5 0 0 0 20.25 3.75Zm0 15H3.75V5.25H20.25V18.75ZM16.5 8.25a4.5 4.5 0 0 1-9 0 0.75 0.75 0 0 1 1.5 0 3 3 0 0 0 6 0 0.75 0.75 0 0 1 1.5 0Z",
+  hotel: "M20.25 6.75H3V4.5a0.75 0.75 0 0 0-1.5 0V19.5a0.75 0.75 0 0 0 1.5 0V16.5H22.5v3a0.75 0.75 0 0 0 1.5 0V10.5A3.75 3.75 0 0 0 20.25 6.75ZM3 8.25h6.75v6.75H3Zm8.25 6.75V8.25h9a2.25 2.25 0 0 1 2.25 2.25v4.5Z",
+  parking: "M7.5 3.5h6.2a5.4 5.4 0 0 1 0 10.8h-3v6.2H7.5V3.5Zm3.2 3v4.8h3a2.4 2.4 0 0 0 0-4.8h-3Z",
+  fuel: "M4.5 3h9a1 1 0 0 1 1 1v17h-11V4a1 1 0 0 1 1-1Zm2 2.5v3.8h5V5.5h-5ZM15.5 9h1.4l2.7 2.7c0.3 0.3 0.5 0.7 0.5 1.1V17a2.3 2.3 0 0 1-4.6 0V9Z",
+  charging: "M13.4 2L5.2 13.2h4.9L9 22l8.3-11.4h-5L13.4 2Z",
+  transit: "M17.25 2.25H6.75A3 3 0 0 0 3.75 5.25V17.25a3 3 0 0 0 3 3h0.75L6.15 22.05a0.75 0.75 0 1 0 1.2 0.9L9.375 20.25h5.25l2.025 2.7a0.75 0.75 0 1 0 1.2-0.9L16.5 20.25h0.75a3 3 0 0 0 3-3V5.25A3 3 0 0 0 17.25 2.25ZM6.75 3.75H17.25a1.5 1.5 0 0 1 1.5 1.5v6H5.25V5.25A1.5 1.5 0 0 1 6.75 3.75ZM17.25 18.75H6.75a1.5 1.5 0 0 1-1.5-1.5V12.75H18.75v4.5A1.5 1.5 0 0 1 17.25 18.75ZM9 16.125a1.125 1.125 0 1 1-1.125-1.125A1.125 1.125 0 0 1 9 16.125Zm8.25 0a1.125 1.125 0 1 1-1.125-1.125A1.125 1.125 0 0 1 17.25 16.125Z",
+  bike: "M2.3 16.9a3.9 3.9 0 1 1 7.8 0a3.9 3.9 0 1 1-7.8 0ZM3.9 16.9a2.3 2.3 0 1 0 4.6 0a2.3 2.3 0 1 0-4.6 0ZM13.9 16.9a3.9 3.9 0 1 1 7.8 0a3.9 3.9 0 1 1-7.8 0ZM15.5 16.9a2.3 2.3 0 1 0 4.6 0a2.3 2.3 0 1 0-4.6 0ZM6.9 17.2l3-6.7h4.6l2.9 6.7l-1.4 0.6l-2.3-5.3h-2.9l-2.5 5.6l-1.4-0.6Z",
+  camera: "M9.2 4.5h5.6l1.6 2.2H20a1.6 1.6 0 0 1 1.6 1.6v9.6a1.6 1.6 0 0 1-1.6 1.6H4a1.6 1.6 0 0 1-1.6-1.6V8.3A1.6 1.6 0 0 1 4 6.7h3.6L9.2 4.5ZM8.1 12.9a3.9 3.9 0 1 0 7.8 0a3.9 3.9 0 1 0-7.8 0ZM9.9 12.9a2.1 2.1 0 1 1 4.2 0a2.1 2.1 0 1 1-4.2 0Z",
+  music: "M4.9 18.2a2.7 2.7 0 1 1 5.4 0a2.7 2.7 0 1 1-5.4 0ZM14.1 16.4a2.7 2.7 0 1 1 5.4 0a2.7 2.7 0 1 1-5.4 0ZM8.5 7h1.8v11.2H8.5ZM17.7 5.2h1.8v11.2h-1.8ZM8.5 7l11-1.8v3l-11 1.8V7Z",
+  warning: "M12 2.8L22.3 20.5H1.7L12 2.8Zm-1 6.6v5.4h2V9.4h-2Zm0 7.2v2.2h2v-2.2h-2Z",
+  info: "M2.5 12a9.5 9.5 0 1 1 19 0a9.5 9.5 0 1 1-19 0ZM11 6.4v2.4h2V6.4h-2Zm0 4.2v6.9h2v-6.9h-2Z"
+};
+var MARKER_PIN_BODY_PATH = "M12 24C7 17.2 3 13.2 3 9.4a9 9 0 0 1 18 0C21 13.2 17 17.2 12 24Z";
+var MARKER_GLYPH_VIEWBOX = 24;
+
+// src/markers.ts
+var MARKER_SIZES = ["s", "m", "l"];
+var MARKER_SIZES_PX = {
+  s: 24,
+  m: 32,
+  l: 40
+};
+var MARKER_LABEL_TEXT_SIZES = {
+  s: 12,
+  m: 13,
+  l: 14
+};
+var MARKER_DEFAULT_COLOUR = "#1a6bff";
+var MAX_MARKER_IMAGE_BYTES = 64 * 1024;
+var MAX_MARKER_ITEMS = 200;
+var MAX_MARKER_ID_LENGTH = 64;
+var MAX_MARKER_LABEL_LENGTH = 120;
+var MAX_MARKER_TEXT_LENGTH = 3;
+var MARKERS_ID = "mm-user-markers";
+var MARKER_IMAGE_MIME = /^data:image\/(png|jpeg|webp|svg\+xml);base64,/;
+function isRecord3(v) {
+  return typeof v === "object" && v !== null && !Array.isArray(v);
+}
+function boundedNumber(v, min, max) {
+  return typeof v === "number" && Number.isFinite(v) && v >= min && v <= max ? v : void 0;
+}
+function markerColour(v) {
+  return typeof v === "string" && /^#[0-9a-fA-F]{6}$/.test(v.trim()) ? v.trim().toLowerCase() : MARKER_DEFAULT_COLOUR;
+}
+function dataUriBytes(uri) {
+  const comma = uri.indexOf(",");
+  const payload = comma === -1 ? "" : uri.slice(comma + 1);
+  const meta = comma === -1 ? uri : uri.slice(0, comma);
+  if (!/;base64$/i.test(meta) && !/;base64;/i.test(meta)) return payload.length;
+  return Math.floor(payload.replace(/=+$/, "").length * 3 / 4);
+}
+function truncateChars(text, max) {
+  const chars = Array.from(text);
+  return chars.length <= max ? text : chars.slice(0, max).join("");
+}
+function markerImage(v) {
+  if (typeof v !== "string") return void 0;
+  const uri = v.trim();
+  if (!MARKER_IMAGE_MIME.test(uri)) return void 0;
+  if (dataUriBytes(uri) > MAX_MARKER_IMAGE_BYTES) return void 0;
+  return uri;
+}
+function parseMarkers(value) {
+  const block = isRecord3(value) ? value : {};
+  const items = [];
+  if (block.version !== 1) return { version: 1, items };
+  const seen = /* @__PURE__ */ new Set();
+  const rawItems = Array.isArray(block.items) ? block.items : [];
+  for (const raw of rawItems) {
+    if (items.length >= MAX_MARKER_ITEMS) break;
+    if (!isRecord3(raw)) continue;
+    const id = typeof raw.id === "string" ? raw.id : void 0;
+    if (!id || id.length === 0 || Array.from(id).length > MAX_MARKER_ID_LENGTH) continue;
+    if (seen.has(id)) continue;
+    const lng = boundedNumber(raw.lng, -180, 180);
+    const lat = boundedNumber(raw.lat, -90, 90);
+    if (lng === void 0 || lat === void 0) continue;
+    seen.add(id);
+    const item = {
+      id,
+      lng,
+      lat,
+      icon: isMarkerGlyphId(raw.icon) ? raw.icon : "pin",
+      colour: markerColour(raw.colour),
+      size: raw.size === "s" || raw.size === "l" ? raw.size : "m"
+    };
+    const image = markerImage(raw.image);
+    if (image !== void 0) item.image = image;
+    if (typeof raw.label === "string" && raw.label.length > 0) {
+      item.label = truncateChars(raw.label, MAX_MARKER_LABEL_LENGTH);
+    }
+    items.push(item);
+  }
+  return { version: 1, items };
+}
+function markersFromTheme(theme) {
+  const extra = theme?.extra;
+  if (typeof extra !== "object" || extra === null || !("markers" in extra)) {
+    return void 0;
+  }
+  return parseMarkers(extra.markers);
+}
+async function markersFromThemeUrl(url, fetchImpl) {
+  const doFetch = fetchImpl ?? ((input) => globalThis.fetch(input));
+  const response = await doFetch(url);
+  if (!response.ok) {
+    throw new Error(`fetching theme ${url}: HTTP ${response.status}`);
+  }
+  const theme = await response.json();
+  return markersFromTheme(theme);
+}
+function markerImageKey(icon, colour2, size) {
+  return `mm-marker-${icon}-${colour2.toLowerCase()}-${size}`;
+}
+function markerText(value) {
+  if (typeof value !== "string") return void 0;
+  const text = truncateChars(value.trim(), MAX_MARKER_TEXT_LENGTH);
+  return text.length > 0 ? text : void 0;
+}
+function markerTextImageKey(text, colour2, size) {
+  return `mm-marker-text-${text}-${colour2.toLowerCase()}-${size}`;
+}
+function fnv1a(text) {
+  let hash = 2166136261;
+  for (let i = 0; i < text.length; i++) {
+    hash ^= text.charCodeAt(i);
+    hash = Math.imul(hash, 16777619);
+  }
+  return (hash >>> 0).toString(16).padStart(8, "0");
+}
+function markerImageDataKey(dataUri) {
+  return `mm-marker-image-${fnv1a(dataUri)}`;
+}
+var GLYPH_FRACTION = 0.62;
+var PIN_HEAD_CENTRE_Y = 9.4;
+var PIN_HEAD_RADIUS = 9;
+var DOT_RADIUS = 8;
+var DOT_STROKE = 2;
+var PIN_TEXT_FONT_STACK = "system-ui, sans-serif";
+function pinTextStartSize(length) {
+  if (length <= 1) return 10;
+  return length === 2 ? 8.2 : 6.6;
+}
+var PIN_TEXT_MIN_SIZE = 4.5;
+var PIN_TEXT_WIDTH_FRACTION = 0.78;
+function renderMarkerImage(options = {}) {
+  const text = markerText(options.text);
+  const icon = options.icon ?? "pin";
+  const colour2 = options.colour ?? MARKER_DEFAULT_COLOUR;
+  const sizePx = MARKER_SIZES_PX[options.size ?? "m"];
+  const g = globalThis;
+  if (!g.document || !g.Path2D) return null;
+  const side = sizePx * 2;
+  const canvas = g.document.createElement("canvas");
+  canvas.width = side;
+  canvas.height = side;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return null;
+  const scale = side / MARKER_GLYPH_VIEWBOX;
+  if (icon === "dot" && text === void 0) {
+    const cx = side / 2;
+    const cy = side / 2;
+    const r = DOT_RADIUS * scale;
+    ctx.beginPath();
+    ctx.arc(cx, cy, r, 0, Math.PI * 2);
+    ctx.fillStyle = colour2;
+    ctx.fill();
+    ctx.lineWidth = DOT_STROKE * scale;
+    ctx.strokeStyle = "#ffffff";
+    ctx.stroke();
+    return { image: ctx.getImageData(0, 0, side, side), pixelRatio: 2 };
+  }
+  ctx.save();
+  ctx.scale(scale, scale);
+  ctx.fillStyle = colour2;
+  ctx.fill(new g.Path2D(MARKER_PIN_BODY_PATH));
+  ctx.restore();
+  if (text !== void 0) {
+    const maxWidth = PIN_HEAD_RADIUS * 2 * PIN_TEXT_WIDTH_FRACTION * scale;
+    let unitSize = pinTextStartSize(text.length);
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.fillStyle = "#ffffff";
+    const canMeasure = typeof ctx.measureText === "function";
+    for (; ; ) {
+      ctx.font = `bold ${unitSize * scale}px ${PIN_TEXT_FONT_STACK}`;
+      if (!canMeasure || unitSize <= PIN_TEXT_MIN_SIZE) break;
+      if (ctx.measureText(text).width <= maxWidth) break;
+      unitSize -= 0.5;
+    }
+    ctx.fillText(text, side / 2, PIN_HEAD_CENTRE_Y * scale);
+    return { image: ctx.getImageData(0, 0, side, side), pixelRatio: 2 };
+  }
+  const glyphSide = PIN_HEAD_RADIUS * 2 * GLYPH_FRACTION * scale;
+  const glyphScale = glyphSide / MARKER_GLYPH_VIEWBOX;
+  ctx.save();
+  ctx.translate(
+    side / 2 - glyphSide / 2,
+    PIN_HEAD_CENTRE_Y * scale - glyphSide / 2
+  );
+  ctx.scale(glyphScale, glyphScale);
+  ctx.fillStyle = "#ffffff";
+  ctx.fill(new g.Path2D(markerGlyphPaths[icon]));
+  ctx.restore();
+  return { image: ctx.getImageData(0, 0, side, side), pixelRatio: 2 };
+}
+var TEXT_OFFSET_EXPRESSION = [
+  "match",
+  ["get", "offsetKey"],
+  "tip",
+  ["literal", [0, 0.4]],
+  "cs",
+  ["literal", [0, 1.3]],
+  "cm",
+  ["literal", [0, 1.55]],
+  "cl",
+  ["literal", [0, 1.75]],
+  ["literal", [0, 0.4]]
+];
+var MARKER_TEXT_FONT = "MapMap Sans Regular";
+var MarkersLayer = class {
+  constructor(map, markers, options = {}) {
+    this.items = [];
+    this.destroyed = false;
+    /**
+     * Bumped by {@link clear} (and {@link destroy}). An image load started
+     * before the bump resolves into a cleared layer, so its handler compares
+     * the generation it was started in and drops out — without this a
+     * pending `loadImage` would rebuild and RE-INSTALL the layer on a map the
+     * caller had already cleaned up.
+     */
+    this.generation = 0;
+    /** Custom images by cache key, once loaded (kept across style swaps). */
+    this.loadedImages = /* @__PURE__ */ new Map();
+    /** Custom-image cache keys that failed to load (pin fallback, once). */
+    this.failedImages = /* @__PURE__ */ new Set();
+    /** Custom-image cache keys with a load in flight. */
+    this.pendingImages = /* @__PURE__ */ new Set();
+    /**
+     * Every `map.addImage` key this layer currently owns, so a rebuild can
+     * drop the ones nothing references any more and teardown removes exactly
+     * what it added (the RouteLayer endpoints pattern). Without it every
+     * icon/colour/size change leaked a 2x RGBA image — 25 KB per click at
+     * the 40px preset — and re-invalidated the sprite atlas.
+     */
+    this.registeredImageKeys = /* @__PURE__ */ new Set();
+    this.handleStyleLoad = () => {
+      if (this.data) this.install();
+    };
+    this.map = map instanceof MapMapMap ? map.map : map;
+    this.options = options;
+    this.map.on("style.load", this.handleStyleLoad);
+    if (markers) this.setMarkers(markers);
+  }
+  /**
+   * Replace the layer's markers with a parsed block (`undefined` or an
+   * empty block clears the map of markers but keeps the layer alive).
+   * Custom images load asynchronously: their markers render as default
+   * pins until the image arrives, then swap in place; a failed or
+   * oversized image keeps the pin fallback.
+   */
+  setMarkers(markers) {
+    this.items = markers?.items ?? [];
+    this.rebuild();
+  }
+  /** The layer's current markers. */
+  get current() {
+    return this.items;
+  }
+  /**
+   * The MapLibre source/layer ids - public API for escape-hatch styling.
+   * Both are the contract id `mm-user-markers`.
+   */
+  get ids() {
+    return { source: MARKERS_ID, layer: MARKERS_ID };
+  }
+  /**
+   * Rebuild the source data from the items and (re)install. Mirrors
+   * PlacesLayer's never-drop-an-update rule: once the source exists the
+   * data is applied immediately (even while `isStyleLoaded()` is
+   * transiently false mid-render); before first installation the latest
+   * data is stashed for the next `style.load`.
+   */
+  rebuild() {
+    this.data = {
+      type: "FeatureCollection",
+      features: this.items.map((item) => this.featureFor(item))
+    };
+    const source = this.map.getSource(MARKERS_ID);
+    if (source) {
+      this.registerImages();
+      source.setData(this.data);
+    } else if (this.map.isStyleLoaded()) {
+      this.install();
+    }
+  }
+  /** Build one feature, kicking off the custom-image load if needed. */
+  featureFor(item) {
+    const sizePx = MARKER_SIZES_PX[item.size];
+    const textSize = MARKER_LABEL_TEXT_SIZES[item.size];
+    let iconImage;
+    let iconSize;
+    let anchor;
+    const imageKey = item.image !== void 0 ? markerImageDataKey(item.image) : void 0;
+    const loaded = imageKey !== void 0 ? this.loadedImages.get(imageKey) : void 0;
+    if (item.image !== void 0 && imageKey !== void 0 && !this.failedImages.has(imageKey)) {
+      if (loaded) {
+        iconImage = imageKey;
+        iconSize = loaded.data.width > 0 ? sizePx / loaded.data.width : 1;
+        anchor = "center";
+      } else {
+        this.loadCustomImage(imageKey, item.image);
+        iconImage = markerImageKey(item.icon, item.colour, item.size);
+        iconSize = 1;
+        anchor = item.icon === "dot" ? "center" : "bottom";
+      }
+    } else {
+      iconImage = markerImageKey(item.icon, item.colour, item.size);
+      iconSize = 1;
+      anchor = item.icon === "dot" ? "center" : "bottom";
+    }
+    const properties = {
+      id: item.id,
+      iconImage,
+      iconSize,
+      iconAnchor: anchor,
+      textSize,
+      offsetKey: anchor === "bottom" ? "tip" : `c${item.size}`
+    };
+    if (item.label !== void 0) properties["label"] = item.label;
+    return {
+      type: "Feature",
+      geometry: { type: "Point", coordinates: [item.lng, item.lat] },
+      properties
+    };
+  }
+  /** Load a custom `data:` image once; rebuild the features when done. */
+  loadCustomImage(key, uri) {
+    if (this.pendingImages.has(key)) return;
+    this.pendingImages.add(key);
+    const generation = this.generation;
+    const stale = () => this.destroyed || generation !== this.generation;
+    void this.map.loadImage(uri).then((image) => {
+      this.pendingImages.delete(key);
+      if (stale()) return;
+      this.loadedImages.set(key, {
+        data: image.data,
+        raw: image.data
+      });
+      this.rebuild();
+    }).catch((error) => {
+      this.pendingImages.delete(key);
+      if (stale()) return;
+      this.failedImages.add(key);
+      this.options.onImageError?.(uri, error);
+      this.rebuild();
+    });
+  }
+  /**
+   * Register every image the current features reference and drop the ones
+   * they no longer do (idempotent). Runtime images survive a diffed
+   * `setStyle` and are rebuilt after a full reload, so this runs on every
+   * install as well as every data rebuild.
+   */
+  registerImages() {
+    const needed = /* @__PURE__ */ new Set();
+    for (const item of this.items) {
+      const imageKey = item.image !== void 0 ? markerImageDataKey(item.image) : void 0;
+      const loaded = imageKey !== void 0 ? this.loadedImages.get(imageKey) : void 0;
+      if (imageKey !== void 0 && loaded && !this.failedImages.has(imageKey)) {
+        needed.add(imageKey);
+        if (!this.map.hasImage(imageKey)) {
+          this.map.addImage(imageKey, loaded.raw);
+        }
+        continue;
+      }
+      const key = markerImageKey(item.icon, item.colour, item.size);
+      needed.add(key);
+      if (this.map.hasImage(key)) continue;
+      const rendered = renderMarkerImage({
+        icon: item.icon,
+        colour: item.colour,
+        size: item.size
+      });
+      if (rendered) {
+        this.map.addImage(key, rendered.image, { pixelRatio: rendered.pixelRatio });
+      }
+    }
+    for (const key of this.registeredImageKeys) {
+      if (needed.has(key)) continue;
+      if (this.map.hasImage(key)) this.map.removeImage(key);
+      this.registeredImageKeys.delete(key);
+    }
+    for (const key of needed) this.registeredImageKeys.add(key);
+  }
+  /** Add-or-update the images, source and layer on the current style. */
+  install() {
+    if (!this.data) return;
+    this.registerImages();
+    const existing = this.map.getSource(MARKERS_ID);
+    if (existing) {
+      existing.setData(this.data);
+    } else {
+      this.map.addSource(MARKERS_ID, { type: "geojson", data: this.data });
+    }
+    if (!this.map.getLayer(MARKERS_ID)) {
+      const layer = {
+        id: MARKERS_ID,
+        type: "symbol",
+        source: MARKERS_ID,
+        layout: {
+          "icon-image": ["get", "iconImage"],
+          "icon-size": ["get", "iconSize"],
+          "icon-anchor": ["get", "iconAnchor"],
+          "icon-allow-overlap": true,
+          "text-field": ["get", "label"],
+          "text-font": [MARKER_TEXT_FONT],
+          "text-size": ["get", "textSize"],
+          "text-anchor": "top",
+          "text-offset": TEXT_OFFSET_EXPRESSION,
+          "text-optional": true
+        },
+        paint: {
+          "text-color": "#333333",
+          "text-halo-color": "#ffffff",
+          "text-halo-width": 1.5
+        }
+      };
+      this.map.addLayer(layer);
+    }
+  }
+  /**
+   * Remove the markers' layer, source and registered images from the map.
+   * Images are removed by the keys this layer REGISTERED, not by whatever
+   * `items` happens to hold now — deriving them from the items meant
+   * `setMarkers(undefined)` followed by `clear()`/`destroy()` removed
+   * nothing at all.
+   */
+  clear() {
+    if (this.map.getLayer(MARKERS_ID)) this.map.removeLayer(MARKERS_ID);
+    if (this.map.getSource(MARKERS_ID)) this.map.removeSource(MARKERS_ID);
+    for (const key of this.registeredImageKeys) {
+      if (this.map.hasImage(key)) this.map.removeImage(key);
+    }
+    this.registeredImageKeys.clear();
+    this.items = [];
+    this.data = void 0;
+    this.loadedImages.clear();
+    this.failedImages.clear();
+    this.pendingImages.clear();
+    this.generation++;
+  }
+  /**
+   * Remove the markers and detach the style.load listener. Call when
+   * disposing of the layer (the map is left untouched). Any image load
+   * still in flight resolves into a no-op.
+   */
+  destroy() {
+    this.destroyed = true;
+    this.map.off("style.load", this.handleStyleLoad);
+    this.clear();
+  }
+};
+
 // src/route.ts
 var SIGNAL_BLUE = "#3a86ff";
 var CASING_COLOR = "#1f438a";
 var CORRIDOR_COLOR = "#e05c6c";
 var CORRIDOR_OPACITY = 0.55;
+var ENDPOINT_START_COLOUR = "#3ecf8e";
+var DEFAULT_START = {
+  icon: "dot",
+  colour: ENDPOINT_START_COLOUR,
+  size: "m"
+};
+var DEFAULT_END = {
+  icon: "pin",
+  colour: SIGNAL_BLUE,
+  size: "m"
+};
+var DEFAULT_WAYPOINT = {
+  icon: "pin",
+  colour: SIGNAL_BLUE,
+  size: "s"
+};
+function resolveEndpoints(option) {
+  if (option === void 0 || option === false) return void 0;
+  const design = option === true ? {} : option;
+  const merge = (value, fallback) => value === false ? false : { ...fallback, ...value };
+  return {
+    start: merge(design.start, DEFAULT_START),
+    end: merge(design.end, DEFAULT_END),
+    waypoint: merge(design.waypoint, DEFAULT_WAYPOINT),
+    numberWaypoints: design.numberWaypoints ?? true
+  };
+}
 var PROGRESS_COLOR = "#b0b0b0";
+var ALT_CASING_COLOR = "#5a6b84";
+var ALT_LINE_COLOR = "#aebdd2";
+var FERRY_COLOR = "#eaf1fb";
 function arrowImage() {
   const size = 24;
   const data = new Uint8Array(size * size * 4);
@@ -2184,15 +2801,81 @@ function arrowImage() {
   }
   return { width: size, height: size, data };
 }
+var ENDPOINT_TEXT_FONT = "MapMap Sans Regular";
+var ENDPOINT_TEXT_OFFSET = [
+  "match",
+  ["get", "offsetKey"],
+  "tip",
+  ["literal", [0, 0.4]],
+  "cs",
+  ["literal", [0, 1.3]],
+  "cm",
+  ["literal", [0, 1.55]],
+  "cl",
+  ["literal", [0, 1.75]],
+  ["literal", [0, 0.4]]
+];
+function endpointRender(marker, coordinates, role, numbered) {
+  const size = marker.size ?? "m";
+  const icon = marker.icon ?? "pin";
+  const colour2 = marker.colour ?? SIGNAL_BLUE;
+  const text = markerText(marker.text) ?? markerText(numbered);
+  const key = text !== void 0 ? markerTextImageKey(text, colour2, size) : markerImageKey(icon, colour2, size);
+  const anchor = icon === "dot" && text === void 0 ? "center" : "bottom";
+  const properties = {
+    role,
+    iconImage: key,
+    iconAnchor: anchor,
+    textSize: MARKER_LABEL_TEXT_SIZES[size],
+    offsetKey: anchor === "bottom" ? "tip" : `c${size}`
+  };
+  if (marker.label !== void 0) properties["label"] = marker.label;
+  return {
+    feature: {
+      type: "Feature",
+      geometry: { type: "Point", coordinates },
+      properties
+    },
+    key,
+    render: text !== void 0 ? { text, colour: colour2, size } : { icon, colour: colour2, size }
+  };
+}
 var RouteLayer = class {
   constructor(map, options = {}) {
+    /** Intermediate stops for the endpoint markers, `[lng, lat]` each. */
+    this.waypoints = [];
+    /** Marker images this layer registered, so teardown can remove them. */
+    this.endpointImageKeys = /* @__PURE__ */ new Set();
+    /** Unselected alternatives, drawn beneath the selected route. */
+    this.alternatives = [];
+    /** Ferry legs of the selected route, drawn as dashes over its line. */
+    this.ferrySegments = [];
     this.progress = 0;
     this.corridors = [];
+    /**
+     * Monotonic id of the newest route request. A response only draws when it
+     * still owns this value - see {@link RouteLayer.routePath}.
+     */
+    this.requestSeq = 0;
+    /** Whether the alternative-line click listener is currently attached. */
+    this.altClickBound = false;
     this.handleStyleLoad = () => {
+      this.installAlternatives();
       if (this.lastRoute) this.install(this.lastRoute);
       else this.installManeuver();
       this.installCorridors();
+      this.installFerry();
+    };
+    this.handleAlternativeClick = (event) => {
+      if (!this.selectHandler) return;
+      const raw = event.features?.[0]?.properties?.["index"];
+      const position = typeof raw === "number" ? raw : Number(raw);
+      if (!Number.isInteger(position)) return;
+      const original = this.altOriginalIndices[position];
+      if (original !== void 0) this.selectHandler(original);
     };
+    /** Original array position of each drawn alternative, by its own index. */
+    this.altOriginalIndices = [];
     if (map instanceof MapMapMap) {
       this.map = map.map;
       this.owner = map;
@@ -2219,9 +2902,38 @@ var RouteLayer = class {
     this.arrowImageId = `${id}-arrow`;
     this.corridorSourceId = `${id}-corridor-src`;
     this.corridorLayerId = `${id}-corridor`;
+    this.altSourceId = `${id}-alt-src`;
+    this.altCasingLayerId = `${id}-alt-casing`;
+    this.altLineLayerId = `${id}-alt-line`;
+    this.ferrySourceId = `${id}-ferry-src`;
+    this.ferryLayerId = `${id}-ferry`;
+    this.endpointsSourceId = `${id}-endpoints`;
+    this.endpointsLayerId = `${id}-endpoints`;
+    this.endpoints = resolveEndpoints(options.endpoints);
     this.progressColor = options.progressColor ?? PROGRESS_COLOR;
+    this.altCasingColor = options.alternativeCasingColor ?? ALT_CASING_COLOR;
+    this.altColor = options.alternativeColor ?? ALT_LINE_COLOR;
+    this.ferryColor = options.ferryColor ?? FERRY_COLOR;
     this.map.on("style.load", this.handleStyleLoad);
   }
+  /**
+   * The MapLibre source and layer ids this layer owns - public API for
+   * escape-hatch styling and layer ordering (`map.moveLayer`). All are
+   * derived from the `id` option (default `mapmap-route`).
+   */
+  get ids() {
+    return {
+      source: this.sourceId,
+      casing: this.casingLayerId,
+      line: this.lineLayerId,
+      maneuverSource: this.maneuverSourceId,
+      maneuver: this.maneuverLayerId,
+      corridorSource: this.corridorSourceId,
+      corridor: this.corridorLayerId,
+      endpointsSource: this.endpointsSourceId,
+      endpoints: this.endpointsLayerId
+    };
+  }
   /**
    * Route from `from` to `to` (with optional intermediate `via` points passed
    * through `options` is not supported here - pass a coordinate list to
@@ -2230,8 +2942,21 @@ var RouteLayer = class {
   async route(from, to, options = {}) {
     return this.routePath([from, to], options);
   }
-  /** Route through an ordered list of coordinates and draw the result. */
+  /**
+   * Route through an ordered list of coordinates and draw the result.
+   *
+   * Concurrent calls are ordered by ISSUE, not by arrival: only the newest
+   * request draws. A destination retyped while the first request is still in
+   * flight used to leave the map showing whichever response happened to land
+   * last, so a driver could be looking at the line to the address they had
+   * already replaced. Each caller still receives its own parsed route, so a
+   * caller that wants the data of a superseded request keeps getting it -
+   * only the drawing is suppressed. {@link RouteLayer.clear} likewise
+   * supersedes anything in flight.
+   */
   async routePath(points, options = {}) {
+    const seq = ++this.requestSeq;
+    this.waypoints = points.slice(1, -1).map(toLngLat);
     const url = buildRouteUrl(
       this.baseUrl,
       options.profile ?? "driving",
@@ -2253,7 +2978,7 @@ var RouteLayer = class {
       }
     }
     const parsed = parseOsrmRoute(body);
-    this.draw(parsed);
+    if (seq === this.requestSeq) this.draw(parsed);
     return parsed;
   }
   /** The most recently drawn route, if any. */
@@ -2285,7 +3010,9 @@ var RouteLayer = class {
     }
     if (this.map.getLayer(this.casingLayerId) && this.map.getLayer(this.lineLayerId)) {
       this.applyProgress();
+      this.applyLineStyle();
       this.installManeuver();
+      this.installEndpoints();
       return;
     }
     const casing = {
@@ -2295,8 +3022,8 @@ var RouteLayer = class {
       layout: { "line-cap": "round", "line-join": "round" },
       paint: this.design ? {
         "line-color": this.design.casingColor,
-        "line-width": this.design.width + 4,
-        "line-opacity": this.design.opacity
+        "line-width": this.design.casingWidth ?? this.design.width + 4,
+        "line-opacity": this.design.casingOpacity ?? this.design.opacity
       } : {
         "line-color": CASING_COLOR,
         "line-width": ["interpolate", ["linear"], ["zoom"], 8, 6, 16, 12]
@@ -2310,7 +3037,8 @@ var RouteLayer = class {
       paint: this.design ? {
         "line-color": this.design.color,
         "line-width": this.design.width,
-        "line-opacity": this.design.opacity
+        "line-opacity": this.design.opacity,
+        ...this.design.dash ? { "line-dasharray": this.design.dash } : {}
       } : {
         "line-color": SIGNAL_BLUE,
         "line-width": ["interpolate", ["linear"], ["zoom"], 8, 3, 16, 8]
@@ -2319,7 +3047,316 @@ var RouteLayer = class {
     if (!this.map.getLayer(this.casingLayerId)) this.map.addLayer(casing);
     if (!this.map.getLayer(this.lineLayerId)) this.map.addLayer(line);
     this.applyProgress();
+    this.applyLineStyle();
     this.installManeuver();
+    this.installEndpoints();
+  }
+  /**
+   * Set the intermediate stops drawn by the endpoint markers, in order.
+   * {@link routePath} fills these in from its own via points, so this is
+   * only needed when drawing a route parsed elsewhere (e.g. a route fetched
+   * by the app and handed to {@link draw}). An empty array clears them.
+   */
+  setWaypoints(waypoints) {
+    this.waypoints = waypoints.map(toLngLat);
+    if (this.lastRoute && this.map.isStyleLoaded()) this.installEndpoints();
+  }
+  /** The intermediate stops currently drawn, `[lng, lat]` each. */
+  get currentWaypoints() {
+    return this.waypoints;
+  }
+  /**
+   * Build one Point feature per endpoint marker: start (first route
+   * coordinate), each waypoint in order, then end (last coordinate). The
+   * end is added last so it wins MapLibre's symbol-collision ordering when
+   * markers overlap on a short route.
+   */
+  endpointFeatures(route) {
+    const design = this.endpoints;
+    if (!design) return [];
+    const line = route.geometry.coordinates;
+    const first = line[0];
+    const last = line[line.length - 1];
+    if (!first || !last) return [];
+    const rendered = [];
+    const push = (marker, coordinates, role, numbered) => {
+      if (marker === false) return;
+      rendered.push(endpointRender(marker, coordinates, role, numbered));
+    };
+    push(design.start, first, "start");
+    this.waypoints.forEach((coordinates, index) => {
+      const numbered = design.numberWaypoints ? String(index + 1) : void 0;
+      push(design.waypoint, coordinates, "waypoint", numbered);
+    });
+    push(design.end, last, "end");
+    return rendered;
+  }
+  /**
+   * Register every endpoint marker image the current features need
+   * (idempotent; `setStyle` wipes runtime images, so this runs on each
+   * install). Keys are remembered so teardown removes exactly what this
+   * layer added.
+   */
+  registerEndpointImages(rendered) {
+    for (const item of rendered) {
+      this.endpointImageKeys.add(item.key);
+      if (this.map.hasImage(item.key)) continue;
+      const image = renderMarkerImage(item.render);
+      if (image) {
+        this.map.addImage(item.key, image.image, { pixelRatio: image.pixelRatio });
+      }
+    }
+  }
+  /** Add-or-update the endpoint markers' source and symbol layer. */
+  installEndpoints() {
+    if (!this.endpoints || !this.lastRoute) return;
+    const rendered = this.endpointFeatures(this.lastRoute);
+    const data = {
+      type: "FeatureCollection",
+      features: rendered.map((item) => item.feature)
+    };
+    this.registerEndpointImages(rendered);
+    const source = this.map.getSource(this.endpointsSourceId);
+    if (source) {
+      source.setData(data);
+    } else {
+      this.map.addSource(this.endpointsSourceId, { type: "geojson", data });
+    }
+    if (this.map.getLayer(this.endpointsLayerId)) return;
+    const layer = {
+      id: this.endpointsLayerId,
+      type: "symbol",
+      source: this.endpointsSourceId,
+      layout: {
+        "icon-image": ["get", "iconImage"],
+        "icon-anchor": ["get", "iconAnchor"],
+        "icon-allow-overlap": true,
+        "text-field": ["get", "label"],
+        "text-font": [ENDPOINT_TEXT_FONT],
+        "text-size": ["get", "textSize"],
+        "text-anchor": "top",
+        "text-offset": ENDPOINT_TEXT_OFFSET,
+        "text-optional": true
+      },
+      paint: {
+        "text-color": "#333333",
+        "text-halo-color": "#ffffff",
+        "text-halo-width": 1.5
+      }
+    };
+    this.map.addLayer(layer);
+  }
+  /** Remove the endpoint markers, their source and their images. */
+  clearEndpoints() {
+    if (this.map.getLayer(this.endpointsLayerId)) {
+      this.map.removeLayer(this.endpointsLayerId);
+    }
+    if (this.map.getSource(this.endpointsSourceId)) {
+      this.map.removeSource(this.endpointsSourceId);
+    }
+    for (const key of this.endpointImageKeys) {
+      if (this.map.hasImage(key)) this.map.removeImage(key);
+    }
+    this.endpointImageKeys.clear();
+  }
+  /**
+   * Draw a bare line from coordinates, without a parsed OSRM route.
+   *
+   * {@link RouteLayer.draw} expects a {@link ParsedRoute} because it is
+   * normally fed by {@link RouteLayer.route}. Callers that already have
+   * geometry and nothing else — an agent tool result, a stored polyline,
+   * a hand-built preview — had to invent a `ParsedRoute` with zeroed
+   * distance and duration that `draw` never reads. This is that path,
+   * named honestly.
+   */
+  drawGeometry(coordinates) {
+    this.draw({
+      distanceM: 0,
+      durationS: 0,
+      geometry: { type: "LineString", coordinates },
+      raw: {}
+    });
+  }
+  /**
+   * Draw a set of routes: one selected, the rest as dimmer alternatives
+   * beneath it. Offering alternatives is table stakes for a navigation UI,
+   * and the selected route keeps every feature of {@link RouteLayer.draw}
+   * (progress, manoeuvre arrow, corridors, route effects).
+   *
+   * Pass the index of the route to select; out-of-range values clamp to the
+   * first route. Calling with a single route is equivalent to `draw`, and
+   * calling with an empty array clears everything.
+   */
+  drawAlternatives(routes, selectedIndex = 0) {
+    if (routes.length === 0) {
+      this.clear();
+      return;
+    }
+    const index = selectedIndex >= 0 && selectedIndex < routes.length ? selectedIndex : 0;
+    this.alternatives = routes.filter((_, i) => i !== index);
+    this.altOriginalIndices = routes.map((_, i) => i).filter((i) => i !== index);
+    this.installAlternatives();
+    this.draw(routes[index]);
+  }
+  /** Which alternatives are currently drawn, in the order given. */
+  get alternativeRoutes() {
+    return this.alternatives;
+  }
+  /**
+   * Register a click handler for the alternative lines. The index is the
+   * position within the array last passed to
+   * {@link RouteLayer.drawAlternatives}, so a caller can re-issue that call
+   * with the new selection. Passing `undefined` removes the handler.
+   */
+  onSelectAlternative(handler) {
+    this.selectHandler = handler;
+  }
+  /**
+   * Draw ferry legs of the selected route as dashes over its line, so water
+   * crossings do not read as driving.
+   *
+   * Supplied as explicit geometries rather than derived from the route,
+   * because `line-dasharray` cannot be data-driven: a ferry leg needs its
+   * own layer, and only the caller knows which parts of their route are
+   * ferries.
+   */
+  setFerrySegments(segments) {
+    this.ferrySegments = segments;
+    if (this.map.isStyleLoaded()) this.installFerry();
+  }
+  /** Remove the ferry dashes. */
+  clearFerrySegments() {
+    this.ferrySegments = [];
+    if (this.map.getLayer(this.ferryLayerId)) this.map.removeLayer(this.ferryLayerId);
+    if (this.map.getSource(this.ferrySourceId)) this.map.removeSource(this.ferrySourceId);
+  }
+  /** Add-or-update the alternative-route source and its two layers. */
+  installAlternatives() {
+    if (this.alternatives.length === 0) {
+      this.removeAlternativeLayers();
+      return;
+    }
+    if (!this.map.isStyleLoaded()) return;
+    const data = {
+      type: "FeatureCollection",
+      features: this.alternatives.map((route, i) => ({
+        type: "Feature",
+        properties: { index: i },
+        geometry: route.geometry
+      }))
+    };
+    const existing = this.map.getSource(this.altSourceId);
+    if (existing) existing.setData(data);
+    else this.map.addSource(this.altSourceId, { type: "geojson", data });
+    const below = this.map.getLayer(this.casingLayerId) ? this.casingLayerId : void 0;
+    if (!this.map.getLayer(this.altCasingLayerId)) {
+      this.map.addLayer({
+        id: this.altCasingLayerId,
+        type: "line",
+        source: this.altSourceId,
+        layout: { "line-cap": "round", "line-join": "round" },
+        paint: {
+          "line-color": this.altCasingColor,
+          "line-width": 7,
+          "line-opacity": 0.55
+        }
+      }, below);
+    }
+    if (!this.map.getLayer(this.altLineLayerId)) {
+      this.map.addLayer({
+        id: this.altLineLayerId,
+        type: "line",
+        source: this.altSourceId,
+        layout: { "line-cap": "round", "line-join": "round" },
+        paint: {
+          "line-color": this.altColor,
+          "line-width": 4,
+          "line-opacity": 0.9
+        }
+      }, below);
+    }
+    if (!this.altClickBound) {
+      this.map.on("click", this.altLineLayerId, this.handleAlternativeClick);
+      this.altClickBound = true;
+    }
+  }
+  removeAlternativeLayers() {
+    if (this.altClickBound) {
+      this.map.off("click", this.altLineLayerId, this.handleAlternativeClick);
+      this.altClickBound = false;
+    }
+    if (this.map.getLayer(this.altLineLayerId)) {
+      this.map.removeLayer(this.altLineLayerId);
+    }
+    if (this.map.getLayer(this.altCasingLayerId)) this.map.removeLayer(this.altCasingLayerId);
+    if (this.map.getSource(this.altSourceId)) this.map.removeSource(this.altSourceId);
+  }
+  /** Add-or-update the ferry-dash overlay above the selected route. */
+  installFerry() {
+    if (this.ferrySegments.length === 0) {
+      this.clearFerrySegments();
+      return;
+    }
+    if (!this.map.isStyleLoaded()) return;
+    const data = {
+      type: "FeatureCollection",
+      features: this.ferrySegments.map((coordinates) => ({
+        type: "Feature",
+        properties: {},
+        geometry: { type: "LineString", coordinates }
+      }))
+    };
+    const existing = this.map.getSource(this.ferrySourceId);
+    if (existing) existing.setData(data);
+    else this.map.addSource(this.ferrySourceId, { type: "geojson", data });
+    if (!this.map.getLayer(this.ferryLayerId)) {
+      this.map.addLayer({
+        id: this.ferryLayerId,
+        type: "line",
+        source: this.ferrySourceId,
+        layout: { "line-cap": "butt", "line-join": "round" },
+        paint: {
+          "line-color": this.ferryColor,
+          "line-width": 2.5,
+          "line-dasharray": [1.2, 1.6]
+        }
+      });
+    }
+  }
+  /**
+   * Override the drawn line's paint at runtime, over whatever the design or
+   * the built-in look set.
+   *
+   * Route styling is not always static: a route can be provisional, or a
+   * straight-line approximation that must not be mistaken for a surveyed
+   * one. That is a paint change on a route already drawn, so it belongs
+   * here rather than in the constructor's design.
+   *
+   * Overrides survive style reloads. Pass `{}` to clear them.
+   */
+  setLineStyle(style) {
+    this.lineStyle = Object.keys(style).length > 0 ? style : void 0;
+    this.applyLineStyle();
+  }
+  /** Apply any runtime override; a no-op when the layers are absent. */
+  applyLineStyle() {
+    const style = this.lineStyle;
+    if (!style) return;
+    if (this.map.getLayer(this.lineLayerId)) {
+      if (style.color !== void 0) {
+        this.map.setPaintProperty(this.lineLayerId, "line-color", style.color);
+      }
+      if (style.dash !== void 0) {
+        this.map.setPaintProperty(
+          this.lineLayerId,
+          "line-dasharray",
+          style.dash ?? [1, 0]
+        );
+      }
+    }
+    if (style.casingOpacity !== void 0 && this.map.getLayer(this.casingLayerId)) {
+      this.map.setPaintProperty(this.casingLayerId, "line-opacity", style.casingOpacity);
+    }
   }
   /**
    * Sets how much of the route has been travelled, as a fraction in `[0, 1]`
@@ -2457,10 +3494,21 @@ var RouteLayer = class {
       this.map.setPaintProperty(this.corridorLayerId, "line-width", width);
     }
   }
-  /** Remove the route's layers and source from the map. */
+  /**
+   * Remove the route's layers and source from the map. Any route request
+   * still in flight is superseded, so a late response cannot redraw a route
+   * the caller has already cleared.
+   */
   clear() {
+    this.requestSeq += 1;
     this.clearManeuver();
     this.clearAlertCorridors();
+    this.clearFerrySegments();
+    this.alternatives = [];
+    this.altOriginalIndices = [];
+    this.removeAlternativeLayers();
+    this.clearEndpoints();
+    this.waypoints = [];
     for (const layerId of [this.lineLayerId, this.casingLayerId]) {
       if (this.map.getLayer(layerId)) this.map.removeLayer(layerId);
     }
@@ -2530,7 +3578,7 @@ function alertContrastIssues(design) {
   return issues;
 }
 var MAX_PUCK_IMAGE_BYTES = 64 * 1024;
-function dataUriBytes(uri) {
+function dataUriBytes2(uri) {
   const comma = uri.indexOf(",");
   const payload = comma === -1 ? "" : uri.slice(comma + 1);
   const meta = comma === -1 ? uri : uri.slice(0, comma);
@@ -2539,7 +3587,7 @@ function dataUriBytes(uri) {
 function effectiveImageUrl(design) {
   const url = design.imageUrl?.trim();
   if (!url) return void 0;
-  if (/^data:/i.test(url) && dataUriBytes(url) > MAX_PUCK_IMAGE_BYTES) {
+  if (/^data:/i.test(url) && dataUriBytes2(url) > MAX_PUCK_IMAGE_BYTES) {
     return void 0;
   }
   return url;
@@ -2858,7 +3906,7 @@ async function uploadProbeBatch(baseUrl, apiKey, body, options = {}) {
     } catch {
       outcome = "gaveUp";
     }
-    if (outcome === "gaveUp" && attempt < maxAttempts) {
+    if (outcome === "gaveUp" && attempt < maxAttempts && options.signal?.aborted !== true) {
       await sleep(backoffMs(attempt));
       continue;
     }
@@ -2904,6 +3952,8 @@ function haversineDistanceM(a, b) {
 }
 var PlacesLayer = class {
   constructor(map, options = {}) {
+    /** Per-place icon keys whose image failed to load (circle fallback). */
+    this.failedIconKeys = /* @__PURE__ */ new Set();
     this.places = [];
     this.fitted = false;
     this.destroyed = false;
@@ -2956,13 +4006,21 @@ var PlacesLayer = class {
     this.clustersLayerId = `${id}-clusters`;
     this.clusterCountLayerId = `${id}-cluster-count`;
     this.pointsLayerId = `${id}-points`;
+    this.pointsFallbackLayerId = `${id}-points-fallback`;
+    this.labelsLayerId = `${id}-labels`;
     this.iconImageId = `${id}-icon`;
     this.cluster = options.cluster ?? true;
     this.clusterRadius = options.clusterRadius;
     this.clusterMaxZoom = options.clusterMaxZoom;
     this.color = options.color ?? SIGNAL_BLUE;
     this.clusterColor = options.clusterColor ?? (typeof this.color === "string" ? this.color : SIGNAL_BLUE);
-    this.icon = options.icon;
+    if (options.icon && typeof options.icon.url === "string") {
+      this.singleIcon = options.icon;
+    } else if (options.icon) {
+      this.iconRecord = options.icon;
+    }
+    this.iconProperty = options.iconProperty ?? "kind";
+    this.label = options.label === true ? {} : options.label ? options.label : void 0;
     this.wantFitBounds = options.fitBounds ?? false;
     this.onPlaceClick = options.onPlaceClick;
     this.popupFn = options.popup;
@@ -2970,6 +4028,11 @@ var PlacesLayer = class {
     this.map.on("click", this.pointsLayerId, this.handlePlaceClick);
     this.map.on("mouseenter", this.pointsLayerId, this.handleMouseEnter);
     this.map.on("mouseleave", this.pointsLayerId, this.handleMouseLeave);
+    if (this.iconRecord) {
+      this.map.on("click", this.pointsFallbackLayerId, this.handlePlaceClick);
+      this.map.on("mouseenter", this.pointsFallbackLayerId, this.handleMouseEnter);
+      this.map.on("mouseleave", this.pointsFallbackLayerId, this.handleMouseLeave);
+    }
     if (this.cluster) {
       this.map.on("click", this.clustersLayerId, this.handleClusterClick);
       this.map.on("mouseenter", this.clustersLayerId, this.handleMouseEnter);
@@ -3029,7 +4092,9 @@ var PlacesLayer = class {
       source: this.sourceId,
       points: this.pointsLayerId,
       clusters: this.clustersLayerId,
-      clusterCounts: this.clusterCountLayerId
+      clusterCounts: this.clusterCountLayerId,
+      labels: this.labelsLayerId,
+      pointsFallback: this.pointsFallbackLayerId
     };
   }
   /**
@@ -3073,6 +4138,11 @@ var PlacesLayer = class {
    * attached; unreachable places (`null` duration) are dropped. Needs the
    * gateway `baseUrl`/`apiKey` - picked up from a `MapMapMap` automatically,
    * or pass them as layer options.
+   *
+   * Answers always describe the places that were asked about: the list is
+   * snapshotted at call time, so a `setPlaces` landing mid-flight (a
+   * search-as-you-type filter, say) cannot mis-pair the matrix rows with a
+   * different set of places.
    */
   async nearestByDriveTime(origin, options = {}) {
     if (!this.baseUrl) {
@@ -3080,7 +4150,8 @@ var PlacesLayer = class {
         "PlacesLayer needs a baseUrl (or a MapMapMap) for nearestByDriveTime"
       );
     }
-    if (this.places.length === 0) return [];
+    const places = this.places;
+    if (places.length === 0) return [];
     const headers = {
       "Content-Type": "application/json",
       Accept: "application/json"
@@ -3088,7 +4159,7 @@ var PlacesLayer = class {
     if (this.apiKey) headers["Authorization"] = `Bearer ${this.apiKey}`;
     const body = {
       sources: [{ lat: origin.lat, lon: origin.lon }],
-      targets: this.places.map((p) => ({ lat: p.lat, lon: p.lon })),
+      targets: places.map((p) => ({ lat: p.lat, lon: p.lon })),
       costing: options.costing ?? "auto"
     };
     if (options.costingOptions) body["costing_options"] = options.costingOptions;
@@ -3107,7 +4178,7 @@ var PlacesLayer = class {
     }
     const { durations, distances } = matrixRows(payload);
     const reachable = [];
-    this.places.forEach((place, index) => {
+    places.forEach((place, index) => {
       const durationS = durations[index];
       if (typeof durationS !== "number") return;
       const distanceM = distances?.[index];
@@ -3136,6 +4207,38 @@ var PlacesLayer = class {
     }
     if (this.cluster) this.installClusterLayers();
     this.installPointsLayer();
+    this.installLabelsLayer();
+  }
+  /**
+   * The per-place name labels layer (only with a `label` option): the map
+   * font with a halo, anchored just below each unclustered point, hidden
+   * before colliding (`text-optional`). Re-installed with the rest of the
+   * layers on every `style.load`.
+   */
+  installLabelsLayer() {
+    if (!this.label || this.map.getLayer(this.labelsLayerId)) return;
+    const labels = {
+      id: this.labelsLayerId,
+      type: "symbol",
+      source: this.sourceId,
+      ...this.cluster ? { filter: ["!", ["has", "point_count"]] } : {},
+      layout: {
+        "text-field": ["get", this.label.property ?? "name"],
+        "text-font": [CLUSTER_TEXT_FONT],
+        "text-size": this.label.size ?? 12,
+        "text-anchor": "top",
+        "text-offset": [0, 0.9],
+        "text-optional": true
+      },
+      paint: {
+        // Both spellings are accepted (British wins) — see
+        // PlacesLabelOptions.
+        "text-color": this.label.colour ?? this.label.color ?? "#333333",
+        "text-halo-color": this.label.haloColour ?? this.label.haloColor ?? "#ffffff",
+        "text-halo-width": 1.5
+      }
+    };
+    this.map.addLayer(labels);
   }
   /** Cluster circles (sized by count) and the count badge on top. */
   installClusterLayers() {
@@ -3177,8 +4280,12 @@ var PlacesLayer = class {
    * circle look if it fails, like PositionPuck's image fallback).
    */
   installPointsLayer() {
+    if (this.iconRecord) {
+      this.installPerPlaceIconLayers(this.iconRecord);
+      return;
+    }
     if (this.map.getLayer(this.pointsLayerId)) return;
-    if (!this.icon) {
+    if (!this.singleIcon) {
       this.addCirclePointsLayer();
       return;
     }
@@ -3186,7 +4293,7 @@ var PlacesLayer = class {
       this.addIconPointsLayer();
       return;
     }
-    void this.map.loadImage(this.icon.url).then((image) => {
+    void this.map.loadImage(this.singleIcon.url).then((image) => {
       if (this.destroyed || this.map.getLayer(this.pointsLayerId)) return;
       if (!this.map.hasImage(this.iconImageId)) {
         this.map.addImage(this.iconImageId, image.data);
@@ -3197,6 +4304,103 @@ var PlacesLayer = class {
       this.addCirclePointsLayer();
     });
   }
+  /** The `map.addImage` id for one key of the per-place icon record. */
+  iconImageIdFor(key) {
+    return `${this.iconImageId}-${key}`;
+  }
+  /**
+   * Per-place icon mode: load every record image (each key independently -
+   * one bad URL never sinks the rest), then install a symbol layer whose
+   * `icon-image` is a match expression on `iconProperty`, plus a circle
+   * fallback layer for places whose property value has no loaded icon.
+   */
+  installPerPlaceIconLayers(record) {
+    const keys = Object.keys(record);
+    if (keys.length === 0) {
+      if (!this.map.getLayer(this.pointsLayerId)) this.addCirclePointsLayer();
+      return;
+    }
+    const toLoad = keys.filter(
+      (key) => !this.map.hasImage(this.iconImageIdFor(key)) && !this.failedIconKeys.has(key)
+    );
+    if (toLoad.length === 0) {
+      this.addPerPlaceLayers(record);
+      return;
+    }
+    void Promise.all(
+      toLoad.map(async (key) => {
+        try {
+          const image = await this.map.loadImage(record[key].url);
+          if (this.destroyed) return;
+          if (!this.map.hasImage(this.iconImageIdFor(key))) {
+            this.map.addImage(this.iconImageIdFor(key), image.data);
+          }
+        } catch {
+          this.failedIconKeys.add(key);
+        }
+      })
+    ).then(() => {
+      if (!this.destroyed) this.addPerPlaceLayers(record);
+    });
+  }
+  /** Install the per-place icon symbol layer + circle fallback layer. */
+  addPerPlaceLayers(record) {
+    const loaded = Object.keys(record).filter(
+      (key) => this.map.hasImage(this.iconImageIdFor(key))
+    );
+    const unclustered = ["!", ["has", "point_count"]];
+    if (!this.map.getLayer(this.pointsFallbackLayerId)) {
+      const notCovered = [
+        "!",
+        ["in", ["get", this.iconProperty], ["literal", loaded]]
+      ];
+      const fallback = {
+        id: this.pointsFallbackLayerId,
+        type: "circle",
+        source: this.sourceId,
+        filter: this.cluster ? ["all", unclustered, notCovered] : notCovered,
+        paint: {
+          "circle-color": this.color,
+          "circle-radius": 7,
+          "circle-stroke-color": "#ffffff",
+          "circle-stroke-width": 2
+        }
+      };
+      this.map.addLayer(fallback);
+    }
+    if (loaded.length === 0) return;
+    if (this.map.getLayer(this.pointsLayerId)) return;
+    const iconImage = [
+      "match",
+      ["get", this.iconProperty],
+      ...loaded.flatMap((key) => [key, this.iconImageIdFor(key)]),
+      this.iconImageIdFor(loaded[0])
+      // unreachable under the filter
+    ];
+    const iconSize = [
+      "match",
+      ["get", this.iconProperty],
+      ...loaded.flatMap((key) => [key, record[key]?.size ?? 1]),
+      1
+    ];
+    const covered = [
+      "in",
+      ["get", this.iconProperty],
+      ["literal", loaded]
+    ];
+    const points = {
+      id: this.pointsLayerId,
+      type: "symbol",
+      source: this.sourceId,
+      filter: this.cluster ? ["all", unclustered, covered] : covered,
+      layout: {
+        "icon-image": iconImage,
+        "icon-size": iconSize,
+        "icon-allow-overlap": true
+      }
+    };
+    this.map.addLayer(points);
+  }
   addCirclePointsLayer() {
     const points = {
       id: this.pointsLayerId,
@@ -3220,7 +4424,7 @@ var PlacesLayer = class {
       ...this.cluster ? { filter: ["!", ["has", "point_count"]] } : {},
       layout: {
         "icon-image": this.iconImageId,
-        "icon-size": this.icon?.size ?? 1,
+        "icon-size": this.singleIcon?.size ?? 1,
         "icon-allow-overlap": true
       }
     };
@@ -3244,7 +4448,9 @@ var PlacesLayer = class {
     this.popup?.remove();
     this.popup = void 0;
     for (const layerId of [
+      this.labelsLayerId,
       this.pointsLayerId,
+      this.pointsFallbackLayerId,
       this.clusterCountLayerId,
       this.clustersLayerId
     ]) {
@@ -3254,6 +4460,11 @@ var PlacesLayer = class {
     if (this.map.hasImage(this.iconImageId)) {
       this.map.removeImage(this.iconImageId);
     }
+    for (const key of Object.keys(this.iconRecord ?? {})) {
+      if (this.map.hasImage(this.iconImageIdFor(key))) {
+        this.map.removeImage(this.iconImageIdFor(key));
+      }
+    }
     this.places = [];
     this.data = void 0;
   }
@@ -3267,6 +4478,11 @@ var PlacesLayer = class {
     this.map.off("click", this.pointsLayerId, this.handlePlaceClick);
     this.map.off("mouseenter", this.pointsLayerId, this.handleMouseEnter);
     this.map.off("mouseleave", this.pointsLayerId, this.handleMouseLeave);
+    if (this.iconRecord) {
+      this.map.off("click", this.pointsFallbackLayerId, this.handlePlaceClick);
+      this.map.off("mouseenter", this.pointsFallbackLayerId, this.handleMouseEnter);
+      this.map.off("mouseleave", this.pointsFallbackLayerId, this.handleMouseLeave);
+    }
     if (this.cluster) {
       this.map.off("click", this.clustersLayerId, this.handleClusterClick);
       this.map.off("mouseenter", this.clustersLayerId, this.handleMouseEnter);
@@ -3276,16 +4492,26 @@ var PlacesLayer = class {
   }
 };
 function boundsOf(places) {
-  let minLng = Infinity;
   let minLat = Infinity;
-  let maxLng = -Infinity;
   let maxLat = -Infinity;
-  for (const { lon, lat } of places) {
-    if (lon < minLng) minLng = lon;
+  for (const { lat } of places) {
     if (lat < minLat) minLat = lat;
-    if (lon > maxLng) maxLng = lon;
     if (lat > maxLat) maxLat = lat;
   }
+  const lngs = places.map((p) => p.lon).sort((a, b) => a - b);
+  let widestGap = -Infinity;
+  let cutAfter = lngs.length - 1;
+  for (let i = 0; i < lngs.length; i++) {
+    const here = lngs[i];
+    const next = i === lngs.length - 1 ? lngs[0] + 360 : lngs[i + 1];
+    if (next - here > widestGap) {
+      widestGap = next - here;
+      cutAfter = i;
+    }
+  }
+  const minLng = lngs[(cutAfter + 1) % lngs.length];
+  let maxLng = lngs[cutAfter];
+  if (maxLng < minLng) maxLng += 360;
   return [
     [minLng, minLat],
     [maxLng, maxLat]
@@ -3404,7 +4630,7 @@ var NavigationCamera = class {
     if (!route || route.coordinates.length === 0) return;
     this.clearRecentreTimer();
     this.currentMode = "overview";
-    this.m.fitBounds(boundsOf2(route.coordinates), {
+    this.m.fitBounds(boundsOf2(unwrapLngs(route.coordinates)), {
       padding: OVERVIEW_PADDING_PX,
       pitch: 0,
       bearing: 0,
@@ -3767,10 +4993,20 @@ var IsochroneLayer = class {
   get current() {
     return this.lastData;
   }
-  /** Draw (or update) a ring collection. Safe before the style has loaded. */
+  /**
+   * Draw (or update) a ring collection. Safe before the style has loaded.
+   * Never silently drops an update: once the source exists the data is
+   * applied immediately, even while `isStyleLoaded()` is transiently
+   * `false` mid-render (PlacesLayer has the same rule) - otherwise the map
+   * would keep showing the previous rings until the next style swap.
+   * Calls made before the source has first been installed are stashed in
+   * `lastData` - the latest wins - and installed on the next `style.load`.
+   */
   draw(collection) {
     this.lastData = collection;
-    if (!this.map.isStyleLoaded()) return;
+    if (!this.map.getSource(this.sourceId) && !this.map.isStyleLoaded()) {
+      return;
+    }
     this.install(collection);
   }
   /** Add-or-update the source and ring layers on the current style. */
@@ -3926,10 +5162,13 @@ var AdrCheck = class {
       throw new Error("ADR check returned a non-object response");
     }
     const obj = body;
-    const result = {
-      status: typeof obj["status"] === "string" ? obj["status"] : "unknown",
-      raw: obj
-    };
+    const status = obj["status"];
+    if (status !== "allowed" && status !== "blocked") {
+      throw new Error(
+        `ADR check returned an undecodable decision (status ${JSON.stringify(status)}) - refusing to report a non-blocking result for a compliance check`
+      );
+    }
+    const result = { status, raw: obj };
     if (typeof obj["reason"] === "string") result.reason = obj["reason"];
     return result;
   }
@@ -4008,9 +5247,15 @@ function bannerLanes(banner) {
     const lane = { directions: c.directions ?? [] };
     if (c.active !== void 0) lane.active = c.active;
     if (c.active === true) lane.valid = true;
+    if (typeof c.active_direction === "string" && c.active_direction.length > 0) {
+      lane.activeDirection = c.active_direction;
+    }
     return lane;
   });
 }
+function laneArrowDirection(lane) {
+  return lane.activeDirection ?? lane.directions[0] ?? "none";
+}
 function directionArrow(direction) {
   switch (direction) {
     case "left":
@@ -4101,13 +5346,13 @@ var GuidanceBanner = class {
         laneRow.style.cssText = `margin-left:auto;letter-spacing:${spacing}px;white-space:nowrap`;
         for (const lane of lanes) {
           const glyph = doc.createElement("span");
-          glyph.textContent = directionArrow(lane.directions[0] ?? "none");
+          glyph.textContent = directionArrow(laneArrowDirection(lane));
           glyph.style.opacity = lane.active ? "0.95" : "0.35";
           laneRow.appendChild(glyph);
         }
       } else {
         laneRow.style.cssText = "margin-left:auto;letter-spacing:4px";
-        laneRow.textContent = lanes.map((lane) => directionArrow(lane.directions[0] ?? "none")).join("");
+        laneRow.textContent = lanes.map((lane) => directionArrow(laneArrowDirection(lane))).join("");
         laneRow.style.opacity = "0.9";
       }
       children.push(laneRow);
@@ -4143,11 +5388,11 @@ function cameraKindsShownOnMap(design, mode = "browse") {
 }
 function cameraSymbolLayer(design, source, mode = "browse", variant = "dark", id = "safety-cameras") {
   const kinds = cameraKindsShownOnMap(design, mode);
-  const iconImage = ["match", ["get", "kind"]];
-  for (const kind of NAV_CAMERA_KINDS) {
-    if (kind === "unknown") continue;
-    const values = kind === "red_light" ? ["red_light", "redlight"] : [kind];
-    iconImage.push(values.length === 1 ? values[0] : values, cameraSpriteName(kind, variant));
+  const kind = cameraKindExpression();
+  const iconImage = ["match", kind];
+  for (const canonical of NAV_CAMERA_KINDS) {
+    if (canonical === "unknown") continue;
+    iconImage.push(canonical, cameraSpriteName(canonical, variant));
   }
   iconImage.push(cameraSpriteName("unknown", variant));
   return {
@@ -4155,7 +5400,7 @@ function cameraSymbolLayer(design, source, mode = "browse", variant = "dark", id
     type: "symbol",
     source,
     minzoom: design.mapMinZoom,
-    filter: ["in", ["get", "kind"], ["literal", kinds]],
+    filter: ["in", kind, ["literal", kinds]],
     layout: {
       "icon-image": iconImage,
       "icon-size": design.mapIconSize,
@@ -4164,6 +5409,22 @@ function cameraSymbolLayer(design, source, mode = "browse", variant = "dark", id
     }
   };
 }
+var CAMERA_KIND_WIRE_SPELLINGS = {
+  fixed: ["fixed", "permanent"],
+  average: ["average", "average_speed", "section", "section_control"],
+  red_light: ["red_light", "redlight", "traffic_signals"],
+  mobile_site: ["mobile_site", "mobile"],
+  unknown: ["unknown"]
+};
+function cameraKindExpression(property = "kind") {
+  const match = ["match", ["to-string", ["get", property]]];
+  for (const canonical of NAV_CAMERA_KINDS) {
+    if (canonical === "unknown") continue;
+    match.push(CAMERA_KIND_WIRE_SPELLINGS[canonical], canonical);
+  }
+  match.push("unknown");
+  return match;
+}
 function cameraSpriteName(kind, variant = "dark") {
   const normalised = navCameraKind(kind);
   const slug = normalised === "red_light" ? "redlight" : normalised.replace(/_/g, "-");
@@ -4426,6 +5687,6 @@ function clampVolume(volume) {
   return Math.min(1, Math.max(0, volume));
 }
 
-export { ALERT_CONTRAST_MIN, AdrCheck, CameraAlertChip, DEFAULT_GLYPHS_URL, DEFAULT_TERRITORY_TILES_URL, EFFECTS_METADATA_KEY, FLOW_DEFAULTS, FULL_ATTRIBUTION, FlowRouteEffectLayer, GuidanceBanner, IsochroneLayer, LOGO_SVG, LogoControl, MAX_PUCK_IMAGE_BYTES, MapMapMap, NAV_ALERT_AUDIO_MODES, NAV_ALERT_CHIP_POSITIONS, NAV_ALERT_ICON_SETS, NAV_ALERT_LEAD_DISTANCES, NAV_ALERT_LEAD_DISTANCE_M, NAV_ALERT_MODES, NAV_ALERT_SOUNDS, NAV_ALERT_SOUND_BASE_URL, NAV_ALERT_SOUND_FILES, NAV_CAMERA_DEFAULTS, NAV_CAMERA_KINDS, NavigationCamera, OPENMAPTILES_ATTRIBUTION, OSM_ATTRIBUTION, PALETTE_SLOTS, POI_CATEGORY_COLORS, POI_CATEGORY_IDS, POI_CLASS_CATEGORIES, PlacesLayer, PositionPuck, RIBBON_FLOATS_PER_VERTEX, ROUTE_EFFECTS, RouteLayer, SIGNAL_BLUE, SOURCE_LAYERS, ThemeScheduler, VoiceGuidance, alertChipContent, alertContrastIssues, alertIconSvg, alertIconUrl, alertPresentation, alertSoundUrl, alertSpeedReadoutColor, applyPoiDesign, bannerLanes, bearingBetween, bindFlythroughToScroll, buildAdrCheckBody, buildProbeUrl, buildRouteQuery, buildRouteUrl, buildStyle, builtInPoiColor, cameraKindLabel, cameraKindsShownOnMap, cameraShownOnMap, cameraSpriteName, cameraSymbolLayer, contrastRatio, createMap, createRouteEffect, defaultNavAlertsDesign, defaultNavDesign, defaultPoiDesign, directionArrow, effectsFromStyleMetadata, extractGuidance, flythrough, flythroughPose, formatCoord, formatCoords, haversineDistanceM, isNameTextField, languageTextField, lngLatToMercator, navAlertLeadDistanceM, navAlertSoundUrl, navCameraKind, navDesignFromTheme, navDesignFromThemeUrl, parseCssColour, parseHexColor, parseNavAlertsDesign, parseNavDesign, parseOsrmRoute, parsePoiDesign, placesFromGeoJSON, poiDesignFromTheme, poiDesignFromThemeUrl, poiDesignIsDefault, poiTextColorExpression, prefersReducedMotion, registerPmtilesProtocol, relativeLuminance, resetDiagnostics, resolveTheme, runMapDiagnostics, setMapLanguage, severityProsody, shortestArcDeg, shortestArcDelta, speak, ssmlToText, sunTimes, tessellateRouteRibbon, toLngLat, toPmtilesUrl, uploadProbeBatch };
+export { ALERT_CONTRAST_MIN, AdrCheck, CameraAlertChip, DEFAULT_GLYPHS_URL, DEFAULT_TERRITORY_TILES_URL, EFFECTS_METADATA_KEY, FLOW_DEFAULTS, FULL_ATTRIBUTION, FlowRouteEffectLayer, GuidanceBanner, IsochroneLayer, LOGO_SVG, LogoControl, MARKERS_ID, MARKER_DEFAULT_COLOUR, MARKER_GLYPH_IDS, MARKER_GLYPH_VIEWBOX, MARKER_LABEL_TEXT_SIZES, MARKER_PIN_BODY_PATH, MARKER_SIZES, MARKER_SIZES_PX, MAX_MARKER_ID_LENGTH, MAX_MARKER_IMAGE_BYTES, MAX_MARKER_ITEMS, MAX_MARKER_LABEL_LENGTH, MAX_MARKER_TEXT_LENGTH, MAX_PUCK_IMAGE_BYTES, MapMapMap, MarkersLayer, NAV_ALERT_AUDIO_MODES, NAV_ALERT_CHIP_POSITIONS, NAV_ALERT_ICON_SETS, NAV_ALERT_LEAD_DISTANCES, NAV_ALERT_LEAD_DISTANCE_M, NAV_ALERT_MODES, NAV_ALERT_SOUNDS, NAV_ALERT_SOUND_BASE_URL, NAV_ALERT_SOUND_FILES, NAV_CAMERA_DEFAULTS, NAV_CAMERA_KINDS, NavigationCamera, OPENMAPTILES_ATTRIBUTION, OSM_ATTRIBUTION, PALETTE_SLOTS, POI_CATEGORY_COLORS, POI_CATEGORY_IDS, POI_CLASS_CATEGORIES, PlacesLayer, PositionPuck, RIBBON_FLOATS_PER_VERTEX, ROUTE_EFFECTS, RouteLayer, SIGNAL_BLUE, SOURCE_LAYERS, ThemeScheduler, VoiceGuidance, alertChipContent, alertContrastIssues, alertIconSvg, alertIconUrl, alertPresentation, alertSoundUrl, alertSpeedReadoutColor, applyPoiDesign, bannerLanes, bearingBetween, bindFlythroughToScroll, buildAdrCheckBody, buildProbeUrl, buildRouteQuery, buildRouteUrl, buildStyle, builtInPoiColor, cameraKindLabel, cameraKindsShownOnMap, cameraShownOnMap, cameraSpriteName, cameraSymbolLayer, contrastRatio, createMap, createRouteEffect, defaultNavAlertsDesign, defaultNavDesign, defaultPoiDesign, directionArrow, effectsFromStyleMetadata, extractGuidance, flythrough, flythroughPose, formatCoord, formatCoords, haversineDistanceM, isMarkerGlyphId, isNameTextField, laneArrowDirection, languageTextField, lngLatToMercator, markerGlyphPaths, markerImage, markerImageDataKey, markerImageKey, markerText, markerTextImageKey, markersFromTheme, markersFromThemeUrl, navAlertLeadDistanceM, navAlertSoundUrl, navCameraKind, navDesignFromTheme, navDesignFromThemeUrl, parseCssColour, parseHexColor, parseMarkers, parseNavAlertsDesign, parseNavDesign, parseOsrmRoute, parsePoiDesign, placesFromGeoJSON, poiDesignFromTheme, poiDesignFromThemeUrl, poiDesignIsDefault, poiTextColorExpression, prefersReducedMotion, registerPmtilesProtocol, relativeLuminance, renderMarkerImage, resetDiagnostics, resolveTheme, runMapDiagnostics, setMapLanguage, severityProsody, shortestArcDeg, shortestArcDelta, speak, ssmlToText, sunTimes, tessellateRouteRibbon, toLngLat, toPmtilesUrl, truncateChars, uploadProbeBatch };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map