@mapmap/maps 0.2.0 → 0.4.0

package/dist/index.js

@@ -85,7 +85,7 @@ function watchForAuthFailures(map, apiKey) {
     on.call(map, "error", (ev) => {
       const status = ev?.error?.status;
       const message = ev?.error?.message ?? "";
-      const unauthorised = status === 401 || /\b401\b|unauthori[sz]ed/i.test(message);
+      const unauthorised = status === 401 || /unauthori[sz]ed/i.test(message);
       if (!unauthorised) return;
       report(
         "invalid-api-key",
@@ -96,6 +96,52 @@ function watchForAuthFailures(map, apiKey) {
   }
 }
 
+// src/coords.ts
+function toLngLat(point) {
+  if (Array.isArray(point)) {
+    const [lng2, lat2] = point;
+    assertFinite(lng2, lat2);
+    return [lng2, lat2];
+  }
+  const lng = "lng" in point ? point.lng : point.lon;
+  const lat = point.lat;
+  assertFinite(lng, lat);
+  return [lng, lat];
+}
+function formatCoord(point) {
+  const [lng, lat] = toLngLat(point);
+  return `${lng},${lat}`;
+}
+function formatCoords(points) {
+  if (points.length < 2) {
+    throw new Error("at least two coordinates are required for a route");
+  }
+  return points.map(formatCoord).join(";");
+}
+function unwrapLngs(coordinates) {
+  const out = [];
+  for (const [lng, lat] of coordinates) {
+    const prev = out[out.length - 1];
+    let unwrapped = lng;
+    if (prev) {
+      while (unwrapped - prev[0] > 180) unwrapped -= 360;
+      while (unwrapped - prev[0] < -180) unwrapped += 360;
+    }
+    out.push([unwrapped, lat]);
+  }
+  return out;
+}
+function assertFinite(lng, lat) {
+  if (!Number.isFinite(lng) || !Number.isFinite(lat)) {
+    throw new Error(`invalid coordinate: lng=${lng}, lat=${lat}`);
+  }
+  if (lng < -180 || lng > 180 || lat < -90 || lat > 90) {
+    throw new Error(
+      `coordinate out of range: lng=${lng} (\xB1180), lat=${lat} (\xB190) - check lng/lat order`
+    );
+  }
+}
+
 // src/effects.ts
 var FLOW_COLOUR = "#3a86ff";
 var EARTH_RADIUS_M = 63710088e-1;
@@ -115,7 +161,7 @@ function lngLatToMercator(lngLat) {
 }
 function tessellateRouteRibbon(coordinates) {
   const points = [];
-  for (const lngLat of coordinates) {
+  for (const lngLat of unwrapLngs(coordinates)) {
     const p = lngLatToMercator(lngLat);
     const last = points[points.length - 1];
     if (!last || last[0] !== p[0] || last[1] !== p[1]) points.push(p);
@@ -732,8 +778,8 @@ var PALETTE_SLOTS = [
   ["waterway", "#a8c8e8", "#1b2c40"],
   ["landcover", "#e3e8dd", "#182029"],
   ["landuse", "#ece8e1", "#171e26"],
-  ["park", "#cfe4c8", "#1a2a1f"],
-  ["building", "#e2ddd4", "#20272f"],
+  ["park", "#c8e2bf", "#1a2a1f"],
+  ["building", "#e0d6c4", "#252d37"],
   ["aeroway", "#dcd9d2", "#232b34"],
   ["road", "#ffffff", "#2b333d"],
   ["roadMajor", "#f6d9a0", "#4a5461"],
@@ -822,6 +868,73 @@ function resolvePalette(theme) {
   }
   return palette;
 }
+function mixColour(a, b, t) {
+  const parse = (s) => /^#[0-9a-fA-F]{6}$/.test(s) ? [
+    parseInt(s.slice(1, 3), 16),
+    parseInt(s.slice(3, 5), 16),
+    parseInt(s.slice(5, 7), 16)
+  ] : null;
+  const ca = parse(a);
+  const cb = parse(b);
+  if (!ca || !cb) return a;
+  const k = Math.min(1, Math.max(0, t));
+  const hex = (i) => Math.min(255, Math.max(0, Math.round(ca[i] + (cb[i] - ca[i]) * k))).toString(16).padStart(2, "0");
+  return `#${hex(0)}${hex(1)}${hex(2)}`;
+}
+function landuseColour(p) {
+  const base = p("landuse");
+  return [
+    "match",
+    ["get", "class"],
+    // Civic/medical: leans towards the building tone.
+    ["hospital"],
+    mixColour(base, p("building"), 0.55),
+    // Education campuses read as semi-green grounds.
+    ["school", "university", "college", "kindergarten", "library"],
+    mixColour(base, p("park"), 0.35),
+    ["cemetery"],
+    mixColour(base, p("park"), 0.6),
+    // Sports/play surfaces borrow the park green outright.
+    ["pitch", "playground"],
+    mixColour(base, p("park"), 0.75),
+    // Restricted land greys off.
+    ["military"],
+    mixColour(base, p("textSecondary"), 0.3),
+    ["retail", "commercial"],
+    mixColour(base, p("building"), 0.35),
+    ["residential", "suburb", "neighbourhood"],
+    mixColour(base, p("building"), 0.18),
+    ["railway"],
+    mixColour(base, p("textSecondary"), 0.2),
+    base
+  ];
+}
+function landcoverColour(p) {
+  const base = p("landcover");
+  return [
+    "match",
+    ["get", "class"],
+    ["wood", "forest"],
+    mixColour(base, p("park"), 0.75),
+    ["grass"],
+    mixColour(base, p("park"), 0.45),
+    ["wetland"],
+    mixColour(base, p("park"), 0.3),
+    ["farmland"],
+    mixColour(base, p("landuse"), 0.4),
+    ["sand"],
+    mixColour(base, p("building"), 0.5),
+    ["rock"],
+    mixColour(base, p("textSecondary"), 0.25),
+    base
+  ];
+}
+function notARoadFilter() {
+  return ["!in", "class", "rail", "transit", "ferry", "path", "track", "pedestrian", "aerialway"];
+}
+function tunnelOpacity() {
+  return ["match", ["get", "brunnel"], "tunnel", 0.55, 1];
+}
 function fill(id, sourceLayer, colour2, opacity, minzoom) {
   const layer = {
     id,
@@ -980,8 +1093,8 @@ function buildStyle(options = {}) {
       type: "background",
       paint: { "background-color": p("background") }
     },
-    fill("landcover", "landcover", p("landcover"), 0.6),
-    fill("landuse", "landuse", p("landuse"), 0.45),
+    fill("landcover", "landcover", landcoverColour(p), 0.6),
+    fill("landuse", "landuse", landuseColour(p), 0.45),
     fill("park", "park", p("park"), 0.7),
     fill("water", "water", p("water"), 1),
     {
@@ -1006,7 +1119,32 @@ function buildStyle(options = {}) {
         "line-width": ["interpolate", ["linear"], ["zoom"], 10, 1, 16, 6]
       }
     },
-    fill("building", "building", p("building"), 0.9, 13),
+    fill("building", "building", p("building"), 1, 13),
+    // Building footprints sit at barely 1.2:1 against the background, so at
+    // street zooms the fill alone reads as nothing. An outline restores the
+    // block structure without touching the `building` slot default or the
+    // fill opacity, which would alter every saved theme and preset. Starts
+    // at BUILDINGS_3D_MINZOOM so it hands off to the extrusion at exactly
+    // the zoom the flat fill does.
+    {
+      id: "building-outline",
+      type: "line",
+      source: "territory",
+      "source-layer": "building",
+      minzoom: BUILDINGS_3D_MINZOOM,
+      paint: {
+        "line-color": mixColour(p("building"), p("textSecondary"), 0.6),
+        "line-width": [
+          "interpolate",
+          ["exponential", 1.2],
+          ["zoom"],
+          15,
+          0.3,
+          20,
+          1.6
+        ]
+      }
+    },
     {
       id: "rail",
       type: "line",
@@ -1016,7 +1154,38 @@ function buildStyle(options = {}) {
       filter: ["in", "class", "rail", "transit"],
       paint: {
         "line-color": p("rail"),
-        "line-width": ["interpolate", ["linear"], ["zoom"], 8, 0.4, 16, 2]
+        "line-width": [
+          "interpolate",
+          ["exponential", 1.2],
+          ["zoom"],
+          8,
+          0.4,
+          14,
+          1.6,
+          20,
+          6
+        ]
+      }
+    },
+    // The `transportation` layer carries POLYGON features for pedestrian
+    // plazas and footway areas (61 in a single Soho tile). Without a fill
+    // they were only ever hairline-dashed as outlines, leaving town centres
+    // empty.
+    {
+      id: "pedestrian-areas",
+      type: "fill",
+      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],
+      paint: {
+        "fill-color": p("path"),
+        "fill-opacity": 0.7
       }
     },
     {
@@ -1028,10 +1197,104 @@ function buildStyle(options = {}) {
       filter: ["in", "class", "path", "track", "pedestrian"],
       paint: {
         "line-color": p("path"),
-        "line-width": ["interpolate", ["linear"], ["zoom"], 13, 0.5, 16, 2],
-        "line-dasharray": [2, 1]
+        "line-width": [
+          "interpolate",
+          ["exponential", 1.2],
+          ["zoom"],
+          13,
+          0.8,
+          16,
+          2.5,
+          18,
+          6,
+          20,
+          18
+        ],
+        "line-dasharray": [3, 1.5]
       }
     },
+    // Road casings. ALL casings are drawn beneath ALL road fills (rather
+    // than casing/fill pairs) so that at junctions a minor road's casing
+    // never paints over a major road's fill. Colours are derived, not new
+    // palette slots — see `mixColour`.
+    {
+      id: "road-minor-casing",
+      type: "line",
+      source: "territory",
+      "source-layer": "transportation",
+      filter: [
+        "!in",
+        "class",
+        "motorway",
+        "trunk",
+        "primary",
+        "rail",
+        "transit",
+        "path",
+        "track",
+        "pedestrian",
+        "ferry"
+      ],
+      layout: { "line-cap": "round", "line-join": "round" },
+      paint: {
+        "line-color": mixColour(p("road"), p("textSecondary"), 0.45),
+        "line-width": [
+          "interpolate",
+          ["exponential", 1.2],
+          ["zoom"],
+          12,
+          0.5,
+          14,
+          5,
+          16,
+          10,
+          17,
+          14,
+          18,
+          21,
+          19,
+          37,
+          20,
+          64
+        ],
+        "line-opacity": tunnelOpacity()
+      }
+    },
+    {
+      id: "road-major-casing",
+      type: "line",
+      source: "territory",
+      "source-layer": "transportation",
+      minzoom: 6,
+      filter: ["in", "class", "motorway", "trunk", "primary"],
+      layout: { "line-cap": "round", "line-join": "round" },
+      paint: {
+        "line-color": mixColour(p("roadMajor"), p("textSecondary"), 0.45),
+        "line-width": [
+          "interpolate",
+          ["exponential", 1.2],
+          ["zoom"],
+          6,
+          2,
+          14,
+          8,
+          16,
+          13,
+          17,
+          19,
+          18,
+          30,
+          19,
+          54,
+          20,
+          96
+        ],
+        "line-opacity": tunnelOpacity()
+      }
+    },
+    // Road widths ramp all the way to z20. They previously ended at z16, so
+    // z17+ rendered frozen at z16 weights (4 px minor) against a 15-30 px
+    // reference — the "schematic lines" bug.
     {
       id: "road-minor",
       type: "line",
@@ -1052,7 +1315,28 @@ function buildStyle(options = {}) {
       ],
       paint: {
         "line-color": p("road"),
-        "line-width": ["interpolate", ["linear"], ["zoom"], 8, 0.5, 16, 4]
+        "line-width": [
+          "interpolate",
+          ["exponential", 1.2],
+          ["zoom"],
+          8,
+          0.5,
+          13,
+          1.5,
+          14,
+          3,
+          16,
+          7,
+          17,
+          10,
+          18,
+          16,
+          19,
+          29,
+          20,
+          52
+        ],
+        "line-opacity": tunnelOpacity()
       }
     },
     {
@@ -1063,7 +1347,64 @@ function buildStyle(options = {}) {
       filter: ["in", "class", "motorway", "trunk", "primary"],
       paint: {
         "line-color": p("roadMajor"),
-        "line-width": ["interpolate", ["linear"], ["zoom"], 6, 1, 16, 8]
+        "line-width": [
+          "interpolate",
+          ["exponential", 1.2],
+          ["zoom"],
+          6,
+          1,
+          14,
+          5.5,
+          16,
+          10,
+          17,
+          15,
+          18,
+          24,
+          19,
+          44,
+          20,
+          80
+        ],
+        "line-opacity": tunnelOpacity()
+      }
+    },
+    // Bridges are REDRAWN on top of the whole flat road network (casing
+    // then fill) so an overpass reads as crossing over what it spans
+    // instead of as a flat junction. This is the proportionate treatment:
+    // true multi-level ordering would need one layer pair per distinct
+    // `layer` value, which is unbounded. The extra-wide casing supplies the
+    // shadow edge that sells the crossing.
+    {
+      id: "road-bridge-casing",
+      type: "line",
+      source: "territory",
+      "source-layer": "transportation",
+      minzoom: 13,
+      filter: ["all", ["==", "brunnel", "bridge"], notARoadFilter()],
+      layout: { "line-cap": "butt", "line-join": "round" },
+      paint: {
+        "line-color": mixColour(p("road"), p("textSecondary"), 0.8),
+        "line-width": ["interpolate", ["exponential", 1.2], ["zoom"], 13, 3, 16, 13, 17, 19, 18, 30, 19, 54, 20, 96]
+      }
+    },
+    {
+      id: "road-bridge",
+      type: "line",
+      source: "territory",
+      "source-layer": "transportation",
+      minzoom: 13,
+      filter: ["all", ["==", "brunnel", "bridge"], notARoadFilter()],
+      layout: { "line-cap": "round", "line-join": "round" },
+      paint: {
+        "line-color": [
+          "match",
+          ["get", "class"],
+          ["motorway", "trunk", "primary"],
+          p("roadMajor"),
+          p("road")
+        ],
+        "line-width": ["interpolate", ["exponential", 1.2], ["zoom"], 13, 1.5, 16, 8, 17, 15, 18, 24, 19, 44, 20, 80]
       }
     },
     {
@@ -1093,14 +1434,77 @@ function buildStyle(options = {}) {
     }
   ];
   if (theme.buildings_3d) {
-    const flat = layers.find((l) => l["id"] === "building");
-    flat["maxzoom"] = BUILDINGS_3D_MINZOOM;
+    for (const id of ["building", "building-outline"]) {
+      const flat = layers.find((l) => l["id"] === id);
+      flat["maxzoom"] = BUILDINGS_3D_MINZOOM;
+    }
     layers.push(buildings3dLayer(p("building")));
   }
   (theme.extra_layers ?? []).forEach((extra, index) => {
     layers.push(structuredClone(validateExtraLayer(index, extra)));
   });
   layers.push(
+    // One-way arrows, drawn as a TEXT symbol rather than a sprite icon. The
+    // skeleton ships no sprite at all (`sprite` is an optional user-supplied
+    // URL), so an `icon-image` arrow would render nothing for every default
+    // style - a text glyph needs only the glyph server the labels already use.
+    //
+    // The font is PINNED rather than following `theme.fonts`: U+2192 is absent
+    // from 5 of the 15 bundled fontstacks (Barlow, Noto Serif, Nunito, Open
+    // Sans, Rubik - verified by decoding their 8448-8703 glyph ranges), so a
+    // themed font would silently drop every arrow. "Noto Sans Regular" is the
+    // default fontstack and does carry it.
+    //
+    // `text-keep-upright` MUST be false: left at its `true` default MapLibre
+    // flips glyphs on right-to-left line segments to keep them readable, which
+    // would reverse the very thing the arrow encodes.
+    {
+      id: "road-oneway",
+      type: "symbol",
+      source: "territory",
+      "source-layer": "transportation",
+      minzoom: 16,
+      // `oneway` is 1 (forward), -1 (reverse) or 0/absent. The string forms
+      // are matched too: legacy `==` is strictly typed, and a tile build that
+      // encodes the attribute as a string would otherwise match nothing.
+      filter: [
+        "all",
+        [
+          "any",
+          ["==", "oneway", 1],
+          ["==", "oneway", -1],
+          ["==", "oneway", "1"],
+          ["==", "oneway", "-1"]
+        ],
+        notARoadFilter()
+      ],
+      layout: {
+        "symbol-placement": "line",
+        "symbol-spacing": 200,
+        "text-field": "\u2192",
+        "text-font": ["Noto Sans Regular"],
+        "text-size": ["interpolate", ["linear"], ["zoom"], 16, 8, 20, 12],
+        "text-rotation-alignment": "map",
+        "text-pitch-alignment": "map",
+        "text-keep-upright": false,
+        // -1 means the arrow points against the digitisation direction.
+        "text-rotate": [
+          "case",
+          ["any", ["==", ["get", "oneway"], -1], ["==", ["get", "oneway"], "-1"]],
+          180,
+          0
+        ],
+        // Arrows are road furniture, not labels: they should not lose
+        // collisions with names, nor push them out.
+        "text-allow-overlap": true,
+        "text-ignore-placement": true
+      },
+      paint: {
+        "text-color": mixColour(p("road"), p("textSecondary"), 0.55),
+        "text-halo-color": p("textHalo"),
+        "text-halo-width": 1
+      }
+    },
     symbol(
       "housenumber",
       "housenumber",
@@ -1116,11 +1520,18 @@ function buildStyle(options = {}) {
       "transportation_name",
       nameField,
       font,
-      11,
+      ["interpolate", ["linear"], ["zoom"], 12, 11, 16, 12.5, 20, 15],
       p("textSecondary"),
       p("textHalo"),
       12,
-      { "symbol-placement": "line" }
+      {
+        "symbol-placement": "line",
+        // Street names must be able to REPEAT along a long road: at z18 the
+        // map was drawing 80 POI labels to 11 road labels, reading as a pin
+        // cloud rather than a street network. Spacing tightens as the same
+        // street comes to fill more of the screen.
+        "symbol-spacing": ["interpolate", ["linear"], ["zoom"], 12, 400, 16, 260, 18, 320, 20, 520]
+      }
     ),
     symbol(
       "water-name",
@@ -1131,17 +1542,34 @@ function buildStyle(options = {}) {
       p("textSecondary"),
       p("textHalo")
     ),
-    symbol(
-      "poi-labels",
-      "poi",
-      nameField,
-      font,
-      11,
-      p("textSecondary"),
-      p("textHalo"),
-      14,
-      { "text-anchor": "top" }
-    ),
+    {
+      // POI rebalancing. `poi.rank` is populated on 100% of features (1 = most
+      // prominent), so it can do two jobs: a zoom-stepped ceiling admits only the
+      // headline POIs at mid zooms and opens right up by z18, where the user has
+      // asked for detail; and `symbol-sort-key` makes the survivors compete by
+      // rank, so when labels do collide the landmark wins and the vape shop
+      // loses. Lower sort key = placed first, and lower rank = more important, so
+      // `rank` can be used directly. This rebalances rather than hides.
+      ...symbol(
+        "poi-labels",
+        "poi",
+        nameField,
+        font,
+        11,
+        p("textSecondary"),
+        p("textHalo"),
+        14,
+        {
+          "text-anchor": "top",
+          "symbol-sort-key": ["coalesce", ["get", "rank"], 99]
+        }
+      ),
+      filter: [
+        "<=",
+        ["coalesce", ["get", "rank"], 99],
+        ["step", ["zoom"], 6, 15, 10, 16, 15, 17, 22, 18, 40, 19, 120]
+      ]
+    },
     symbol(
       "mountain-peak-labels",
       "mountain_peak",
@@ -1423,7 +1851,7 @@ var MapMapMap = class {
     }
     const minzoom = building.minzoom ?? 13;
     if (enabled) {
-      const colour2 = this.map.getPaintProperty("building", "fill-color") ?? "#e2ddd4";
+      const colour2 = this.map.getPaintProperty("building", "fill-color") ?? "#e0d6c4";
       this.map.addLayer(
         buildings3dLayer(colour2),
         buildings3dBeforeId(this.map)
@@ -1481,39 +1909,6 @@ function resolveStyle(style, territoryTilesUrl) {
   return style;
 }
 
-// src/coords.ts
-function toLngLat(point) {
-  if (Array.isArray(point)) {
-    const [lng2, lat2] = point;
-    assertFinite(lng2, lat2);
-    return [lng2, lat2];
-  }
-  const lng = "lng" in point ? point.lng : point.lon;
-  const lat = point.lat;
-  assertFinite(lng, lat);
-  return [lng, lat];
-}
-function formatCoord(point) {
-  const [lng, lat] = toLngLat(point);
-  return `${lng},${lat}`;
-}
-function formatCoords(points) {
-  if (points.length < 2) {
-    throw new Error("at least two coordinates are required for a route");
-  }
-  return points.map(formatCoord).join(";");
-}
-function assertFinite(lng, lat) {
-  if (!Number.isFinite(lng) || !Number.isFinite(lat)) {
-    throw new Error(`invalid coordinate: lng=${lng}, lat=${lat}`);
-  }
-  if (lng < -180 || lng > 180 || lat < -90 || lat > 90) {
-    throw new Error(
-      `coordinate out of range: lng=${lng} (\xB1180), lat=${lat} (\xB190) - check lng/lat order`
-    );
-  }
-}
-
 // src/osrm.ts
 function buildRouteQuery(truck, guidance) {
   const params = new URLSearchParams({
@@ -1587,10 +1982,38 @@ function numberOr(value, fallback) {
 // src/route.ts
 var SIGNAL_BLUE = "#3a86ff";
 var CASING_COLOR = "#1f438a";
+var PROGRESS_COLOR = "#b0b0b0";
+function arrowImage() {
+  const size = 24;
+  const data = new Uint8Array(size * size * 4);
+  const head = 13;
+  const put = (x, y, edge) => {
+    const i = (y * size + x) * 4;
+    const v = edge ? 31 : 255;
+    data[i] = v;
+    data[i + 1] = v;
+    data[i + 2] = edge ? 58 : 255;
+    data[i + 3] = 255;
+  };
+  for (let y = 2; y < head; y++) {
+    const half = Math.round((y - 2) / (head - 3) * 9);
+    for (let x = 11 - half; x <= 12 + half; x++) {
+      put(x, y, x === 11 - half || x === 12 + half || y === 2);
+    }
+  }
+  for (let y = head; y < 22; y++) {
+    for (let x = 9; x <= 14; x++) {
+      put(x, y, x === 9 || x === 14 || y === 21);
+    }
+  }
+  return { width: size, height: size, data };
+}
 var RouteLayer = class {
   constructor(map, options = {}) {
+    this.progress = 0;
     this.handleStyleLoad = () => {
       if (this.lastRoute) this.install(this.lastRoute);
+      else this.installManeuver();
     };
     if (map instanceof MapMapMap) {
       this.map = map.map;
@@ -1611,6 +2034,10 @@ var RouteLayer = class {
     this.sourceId = `${id}-src`;
     this.casingLayerId = `${id}-casing`;
     this.lineLayerId = `${id}-line`;
+    this.maneuverSourceId = `${id}-maneuver-src`;
+    this.maneuverLayerId = `${id}-maneuver`;
+    this.arrowImageId = `${id}-arrow`;
+    this.progressColor = options.progressColor ?? PROGRESS_COLOR;
     this.map.on("style.load", this.handleStyleLoad);
   }
   /**
@@ -1672,9 +2099,11 @@ var RouteLayer = class {
     if (existing) {
       existing.setData(data);
     } else {
-      this.map.addSource(this.sourceId, { type: "geojson", data });
+      this.map.addSource(this.sourceId, { type: "geojson", data, lineMetrics: true });
     }
     if (this.map.getLayer(this.casingLayerId) && this.map.getLayer(this.lineLayerId)) {
+      this.applyProgress();
+      this.installManeuver();
       return;
     }
     const casing = {
@@ -1707,15 +2136,86 @@ 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.installManeuver();
+  }
+  /**
+   * Sets how much of the route has been travelled, as a fraction in `[0, 1]`
+   * of the line's length. The travelled part dims to `progressColor` (the
+   * "vanishing route line"); `0` restores the untinted line. The value is
+   * remembered across {@link draw} calls and style swaps. Pair with the
+   * guidance module's distance-remaining to derive the fraction.
+   */
+  setProgress(fraction) {
+    this.progress = Math.min(1, Math.max(0, fraction));
+    if (this.map.getLayer(this.lineLayerId)) this.applyProgress();
+  }
+  /** Applies the current progress fraction to the line layer's gradient. */
+  applyProgress() {
+    const routeColor = this.design?.color ?? SIGNAL_BLUE;
+    const gradient = this.progress > 0 ? ["step", ["line-progress"], this.progressColor, this.progress, routeColor] : void 0;
+    this.map.setPaintProperty(this.lineLayerId, "line-gradient", gradient);
+  }
+  /**
+   * Shows (or moves) the upcoming-manoeuvre arrow: a small map-aligned
+   * arrow at `lngLat` rotated to `bearingDeg` (clockwise from north).
+   * Survives style swaps until {@link clearManeuver}.
+   */
+  setManeuver(lngLat, bearingDeg) {
+    this.maneuver = { lngLat, bearingDeg };
+    if (this.map.isStyleLoaded()) this.installManeuver();
+  }
+  /** Hides the manoeuvre arrow. */
+  clearManeuver() {
+    this.maneuver = void 0;
+    if (this.map.getLayer(this.maneuverLayerId)) this.map.removeLayer(this.maneuverLayerId);
+    if (this.map.getSource(this.maneuverSourceId)) this.map.removeSource(this.maneuverSourceId);
+  }
+  /** Add-or-update the manoeuvre arrow source/layer for the current style. */
+  installManeuver() {
+    if (!this.maneuver) return;
+    const data = {
+      type: "Feature",
+      properties: { bearing: this.maneuver.bearingDeg },
+      geometry: { type: "Point", coordinates: this.maneuver.lngLat }
+    };
+    const source = this.map.getSource(this.maneuverSourceId);
+    if (source) {
+      source.setData(data);
+    } else {
+      this.map.addSource(this.maneuverSourceId, { type: "geojson", data });
+    }
+    if (!this.map.hasImage(this.arrowImageId)) {
+      this.map.addImage(this.arrowImageId, arrowImage());
+    }
+    if (!this.map.getLayer(this.maneuverLayerId)) {
+      this.map.addLayer({
+        id: this.maneuverLayerId,
+        type: "symbol",
+        source: this.maneuverSourceId,
+        layout: {
+          "icon-image": this.arrowImageId,
+          "icon-rotate": ["get", "bearing"],
+          "icon-rotation-alignment": "map",
+          "icon-allow-overlap": true,
+          "icon-ignore-placement": true,
+          "icon-size": ["interpolate", ["linear"], ["zoom"], 12, 0.7, 18, 1.4]
+        }
+      });
+    } else {
+      this.map.setLayoutProperty(this.maneuverLayerId, "icon-rotate", ["get", "bearing"]);
+    }
   }
   /** Remove the route's layers and source from the map. */
   clear() {
+    this.clearManeuver();
     for (const layerId of [this.lineLayerId, this.casingLayerId]) {
       if (this.map.getLayer(layerId)) this.map.removeLayer(layerId);
     }
     if (this.map.getSource(this.sourceId)) this.map.removeSource(this.sourceId);
     this.lastRoute = void 0;
     this.owner?.setRouteEffectGeometry(null);
+    this.progress = 0;
   }
   /**
    * Remove the route and detach the layer's `style.load` listener. Call
@@ -1741,6 +2241,12 @@ function effectiveImageUrl(design) {
   }
   return url;
 }
+function shortestArcDeg(fromDeg, toDeg) {
+  const raw = ((toDeg - fromDeg) % 360 + 360) % 360;
+  return raw > 180 ? raw - 360 : raw;
+}
+var MAX_TWEEN_MS = 900;
+var MIN_TWEEN_MS = 100;
 var PositionPuck = class {
   /**
    * Creates the puck (not yet on the map - it appears on the first
@@ -1748,12 +2254,17 @@ var PositionPuck = class {
    * `navDesign.puck` when given a `MapMapMap` whose theme carried an
    * `extra.nav` block, then to the built-in blue puck.
    */
-  constructor(map, design) {
+  constructor(map, design, options) {
     this.added = false;
     this.map = map instanceof MapMapMap ? map.map : map;
     this.design = design ?? (map instanceof MapMapMap ? map.navDesign?.puck : void 0) ?? defaultNavDesign().puck;
     this.element = createPuckElement();
     stylePuckElement(this.element, this.design);
+    this.interpolate = options?.interpolate ?? true;
+    this.now = options?.now ?? Date.now;
+    const g = globalThis;
+    this.requestFrame = options?.requestFrame ?? (g.requestAnimationFrame ? (cb) => g.requestAnimationFrame(() => cb()) : void 0);
+    this.cancelFrame = options?.cancelFrame ?? (g.cancelAnimationFrame ? (h) => g.cancelAnimationFrame(h) : void 0);
     this.marker = new maplibregl.Marker({
       element: this.element,
       rotationAlignment: "map",
@@ -1764,20 +2275,72 @@ var PositionPuck = class {
    * Moves the puck (adding it to the map on the first call). `headingDeg`
    * rotates the whole element - arrow or custom image - clockwise from
    * north; omit it to keep the previous heading.
+   *
+   * With interpolation on (the default) every call after the first glides
+   * from the currently rendered position - a fix arriving mid-tween
+   * retargets smoothly rather than jumping.
    */
   setLocation(location, headingDeg) {
-    this.marker.setLngLat([location.lon, location.lat]);
-    if (headingDeg !== void 0) this.marker.setRotation(headingDeg);
-    if (!this.added) {
+    const first = !this.added;
+    const nowMs = this.now();
+    const interval = this.lastFixAt === void 0 ? MAX_TWEEN_MS : nowMs - this.lastFixAt;
+    this.lastFixAt = nowMs;
+    this.cancelTween();
+    const from = this.rendered;
+    const target = {
+      lat: location.lat,
+      lon: location.lon,
+      heading: headingDeg ?? from?.heading ?? 0
+    };
+    const duration = Math.min(MAX_TWEEN_MS, interval);
+    if (first || !this.interpolate || !this.requestFrame || !from || duration < MIN_TWEEN_MS) {
+      this.render(target);
+    } else {
+      this.tween(from, target, nowMs, duration);
+    }
+    if (first) {
       this.marker.addTo(this.map);
       this.added = true;
     }
   }
-  /** Removes the puck from the map. `setLocation` re-adds it. */
+  /** Removes the puck from the map (cancelling any tween). `setLocation` re-adds it. */
   remove() {
+    this.cancelTween();
     this.marker.remove();
     this.added = false;
   }
+  /** Applies a position/heading to the marker immediately. */
+  render(state) {
+    this.marker.setLngLat([state.lon, state.lat]);
+    this.marker.setRotation(state.heading);
+    this.rendered = state;
+  }
+  /** Runs a linear position lerp + shortest-arc heading tween via rAF. */
+  tween(from, to, startedAt, duration) {
+    const headingDelta = shortestArcDeg(from.heading, to.heading);
+    const step = () => {
+      const t = Math.min(1, (this.now() - startedAt) / duration);
+      this.render({
+        lat: from.lat + (to.lat - from.lat) * t,
+        lon: from.lon + (to.lon - from.lon) * t,
+        heading: from.heading + headingDelta * t
+      });
+      if (t < 1) {
+        this.frameHandle = this.requestFrame(step);
+      } else {
+        this.frameHandle = void 0;
+        this.render(to);
+      }
+    };
+    this.frameHandle = this.requestFrame(step);
+  }
+  /** Cancels an in-flight tween, leaving the marker where it rendered last. */
+  cancelTween() {
+    if (this.frameHandle !== void 0) {
+      this.cancelFrame?.(this.frameHandle);
+      this.frameHandle = void 0;
+    }
+  }
 };
 function createPuckElement() {
   const doc = globalThis.document;
@@ -1826,6 +2389,186 @@ function stylePuckElement(el, puck) {
   dot.style.cssText = `position:absolute;inset:0;border-radius:50%;background:${puck.color};border:2px solid #ffffff;box-shadow:0 1px 6px rgba(0,0,0,0.45)`;
   arrow.style.cssText = puck.headingArrow ? `position:absolute;left:50%;top:${(-s * 0.55).toFixed(1)}px;transform:translateX(-50%);width:0;height:0;border-left:${(s * 0.35).toFixed(1)}px solid transparent;border-right:${(s * 0.35).toFixed(1)}px solid transparent;border-bottom:${(s * 0.6).toFixed(1)}px solid ${puck.color}` : "display:none";
 }
+
+// src/daynight.ts
+var DEG = Math.PI / 180;
+var DAY_MS = 864e5;
+var JULIAN_EPOCH = 24405875e-1;
+var J2000 = 2451545;
+function fromJulian(julian) {
+  return new Date((julian - JULIAN_EPOCH) * DAY_MS);
+}
+function sunTimes(date, lat, lng) {
+  const julianDay = Math.ceil(date.getTime() / DAY_MS + JULIAN_EPOCH - J2000 - 9e-4 + lng / 360);
+  const meanSolarTime = julianDay + 9e-4 - lng / 360;
+  const meanAnomalyDeg = (357.5291 + 0.98560028 * meanSolarTime) % 360;
+  const m = meanAnomalyDeg * DEG;
+  const centreDeg = 1.9148 * Math.sin(m) + 0.02 * Math.sin(2 * m) + 3e-4 * Math.sin(3 * m);
+  const eclipticLngDeg = (meanAnomalyDeg + centreDeg + 180 + 102.9372) % 360;
+  const l = eclipticLngDeg * DEG;
+  const transit = J2000 + meanSolarTime + 53e-4 * Math.sin(m) - 69e-4 * Math.sin(2 * l);
+  const sinDeclination = Math.sin(l) * Math.sin(23.4397 * DEG);
+  const cosDeclination = Math.cos(Math.asin(sinDeclination));
+  const cosHourAngle = (Math.sin(-0.833 * DEG) - Math.sin(lat * DEG) * sinDeclination) / (Math.cos(lat * DEG) * cosDeclination);
+  if (cosHourAngle < -1) return "polarDay";
+  if (cosHourAngle > 1) return "polarNight";
+  const hourAngleDeg = Math.acos(cosHourAngle) / DEG;
+  return {
+    sunrise: fromJulian(transit - hourAngleDeg / 360),
+    sunset: fromJulian(transit + hourAngleDeg / 360)
+  };
+}
+function resolveTheme(date, lat, lng) {
+  const times = sunTimes(date, lat, lng);
+  if (times === "polarDay") return "light";
+  if (times === "polarNight") return "dark";
+  return date >= times.sunrise && date < times.sunset ? "light" : "dark";
+}
+var POLAR_RECHECK_MS = 6 * 36e5;
+var BOUNDARY_MARGIN_MS = 1e3;
+var ThemeScheduler = class {
+  constructor(options) {
+    this.disposed = false;
+    this.lat = options.lat;
+    this.lng = options.lng;
+    this.onLight = options.onLight;
+    this.onDark = options.onDark;
+    this.now = options.now ?? Date.now;
+    this.setTimeoutFn = options.setTimeoutFn ?? ((cb, ms) => setTimeout(cb, ms));
+    this.clearTimeoutFn = options.clearTimeoutFn ?? ((h) => clearTimeout(h));
+    this.evaluate();
+  }
+  /** The theme most recently applied, if any. */
+  get current() {
+    return this.applied;
+  }
+  /** Moves the observer (e.g. a new GPS fix region) and re-evaluates. */
+  setPosition(lat, lng) {
+    this.lat = lat;
+    this.lng = lng;
+    this.evaluate();
+  }
+  /** Stops all future flips. */
+  dispose() {
+    this.disposed = true;
+    if (this.handle !== void 0) this.clearTimeoutFn(this.handle);
+    this.handle = void 0;
+  }
+  /** Applies the theme for now and arms the timer for the next boundary. */
+  evaluate() {
+    if (this.disposed) return;
+    if (this.handle !== void 0) {
+      this.clearTimeoutFn(this.handle);
+      this.handle = void 0;
+    }
+    const nowDate = new Date(this.now());
+    const theme = resolveTheme(nowDate, this.lat, this.lng);
+    if (theme !== this.applied) {
+      this.applied = theme;
+      (theme === "light" ? this.onLight : this.onDark)();
+    }
+    const delay = this.nextBoundaryDelay(nowDate);
+    this.handle = this.setTimeoutFn(() => this.evaluate(), delay);
+  }
+  /** Milliseconds until the next sunrise/sunset (or the polar re-check). */
+  nextBoundaryDelay(nowDate) {
+    const nowMs = nowDate.getTime();
+    for (const dayOffset of [0, 1]) {
+      const times = sunTimes(new Date(nowMs + dayOffset * DAY_MS), this.lat, this.lng);
+      if (times === "polarDay" || times === "polarNight") continue;
+      for (const event of [times.sunrise, times.sunset]) {
+        const delta = event.getTime() - nowMs;
+        if (delta > 0) return delta + BOUNDARY_MARGIN_MS;
+      }
+    }
+    return POLAR_RECHECK_MS;
+  }
+};
+
+// src/language.ts
+var LANGUAGE_TAG = /^[a-z]{2,3}(-[A-Za-z0-9]{2,4})?$/;
+function languageTextField(language) {
+  if (language === null) {
+    return ["coalesce", ["get", "name:en"], ["get", "name"]];
+  }
+  return [
+    "coalesce",
+    ["get", `name:${language}`],
+    ["get", "name:latin"],
+    ["get", "name"]
+  ];
+}
+function isNameTextField(textField) {
+  if (typeof textField === "string") {
+    return /\{name(?::[A-Za-z0-9-]+)?\}/.test(textField);
+  }
+  if (Array.isArray(textField)) {
+    if (textField.length === 2 && textField[0] === "get" && typeof textField[1] === "string") {
+      return textField[1] === "name" || textField[1].startsWith("name:");
+    }
+    return textField.some((part) => isNameTextField(part));
+  }
+  return false;
+}
+function setMapLanguage(map, language) {
+  if (language !== null && !LANGUAGE_TAG.test(language)) {
+    throw new Error(
+      `invalid language tag ${JSON.stringify(language)}; use e.g. "de", "pt-BR", "zh-Hans"`
+    );
+  }
+  const ml = map instanceof MapMapMap ? map.map : map;
+  const layers = ml.getStyle()?.layers ?? [];
+  const changed = [];
+  for (const layer of layers) {
+    if (layer.type !== "symbol") continue;
+    const textField = layer.layout?.["text-field"];
+    if (textField === void 0 || !isNameTextField(textField)) continue;
+    ml.setLayoutProperty(layer.id, "text-field", languageTextField(language));
+    changed.push(layer.id);
+  }
+  return changed;
+}
+
+// src/probe.ts
+function buildProbeUrl(baseUrl) {
+  return `${baseUrl.replace(/\/+$/, "")}/v1/probe`;
+}
+async function uploadProbeBatch(baseUrl, apiKey, body, options = {}) {
+  const doFetch = options.fetch ?? globalThis.fetch;
+  const maxAttempts = options.maxAttempts ?? 4;
+  const backoffMs = options.backoffMs ?? ((attempt) => attempt * 1e3);
+  const sleep = options.sleep ?? ((ms) => new Promise((resolve) => setTimeout(resolve, ms)));
+  const url = buildProbeUrl(baseUrl);
+  for (let attempt = 1; ; attempt++) {
+    let outcome;
+    try {
+      const response = await doFetch(url, {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${apiKey}`,
+          "Content-Type": "application/json"
+        },
+        body,
+        signal: options.signal
+      });
+      outcome = classifyStatus(response.status);
+    } catch {
+      outcome = "gaveUp";
+    }
+    if (outcome === "gaveUp" && attempt < maxAttempts) {
+      await sleep(backoffMs(attempt));
+      continue;
+    }
+    return outcome;
+  }
+}
+function classifyStatus(status) {
+  if (status === 202) return "accepted";
+  if (status === 403) return "refused";
+  if (status === 501) return "notEnabled";
+  if (status >= 500 && status <= 599) return "gaveUp";
+  return "rejected";
+}
 var EARTH_RADIUS_M2 = 63710088e-1;
 var CLUSTER_TEXT_FONT = "Noto Sans Regular";
 function placesFromGeoJSON(collection) {
@@ -2464,8 +3207,9 @@ function shortestArcDelta(from, to) {
 }
 var PoseSampler = class {
   constructor(coordinates) {
-    this.points = coordinates.filter(
-      (p, i) => i === 0 || p[0] !== coordinates[i - 1][0] || p[1] !== coordinates[i - 1][1]
+    const unwrapped = unwrapLngs(coordinates);
+    this.points = unwrapped.filter(
+      (p, i) => i === 0 || p[0] !== unwrapped[i - 1][0] || p[1] !== unwrapped[i - 1][1]
     );
     if (this.points.length < 2) {
       throw new Error(
@@ -2576,6 +3320,7 @@ function flythrough(map, route, options = {}) {
     seek(to) {
       if (destroyed) return;
       t = Math.min(1, Math.max(0, to));
+      bearing = void 0;
       applyPose(1 / 60);
     },
     get speed() {
@@ -2748,6 +3493,7 @@ var IsochroneLayer = class {
         this.fillOpacity()
       );
       this.map.setPaintProperty(this.lineLayerId, "line-color", this.lastColor);
+      this.map.setPaintProperty(this.labelLayerId, "text-color", this.lastColor);
       return;
     }
     const fill2 = {
@@ -3138,6 +3884,6 @@ function clampVolume(volume) {
   return Math.min(1, Math.max(0, volume));
 }
 
-export { AdrCheck, 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_CAMERA_DEFAULTS, 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, VoiceGuidance, applyPoiDesign, bannerLanes, bearingBetween, bindFlythroughToScroll, buildAdrCheckBody, buildRouteQuery, buildRouteUrl, buildStyle, builtInPoiColor, createMap, createRouteEffect, defaultNavDesign, defaultPoiDesign, directionArrow, effectsFromStyleMetadata, extractGuidance, flythrough, flythroughPose, formatCoord, formatCoords, haversineDistanceM, lngLatToMercator, navDesignFromTheme, navDesignFromThemeUrl, parseCssColour, parseNavDesign, parseOsrmRoute, parsePoiDesign, placesFromGeoJSON, poiDesignFromTheme, poiDesignFromThemeUrl, poiDesignIsDefault, poiTextColorExpression, prefersReducedMotion, registerPmtilesProtocol, resetDiagnostics, runMapDiagnostics, severityProsody, shortestArcDelta, speak, ssmlToText, tessellateRouteRibbon, toLngLat, toPmtilesUrl };
+export { AdrCheck, 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_CAMERA_DEFAULTS, 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, applyPoiDesign, bannerLanes, bearingBetween, bindFlythroughToScroll, buildAdrCheckBody, buildProbeUrl, buildRouteQuery, buildRouteUrl, buildStyle, builtInPoiColor, createMap, createRouteEffect, defaultNavDesign, defaultPoiDesign, directionArrow, effectsFromStyleMetadata, extractGuidance, flythrough, flythroughPose, formatCoord, formatCoords, haversineDistanceM, isNameTextField, languageTextField, lngLatToMercator, navDesignFromTheme, navDesignFromThemeUrl, parseCssColour, parseNavDesign, parseOsrmRoute, parsePoiDesign, placesFromGeoJSON, poiDesignFromTheme, poiDesignFromThemeUrl, poiDesignIsDefault, poiTextColorExpression, prefersReducedMotion, registerPmtilesProtocol, resetDiagnostics, resolveTheme, runMapDiagnostics, setMapLanguage, severityProsody, shortestArcDeg, shortestArcDelta, speak, ssmlToText, sunTimes, tessellateRouteRibbon, toLngLat, toPmtilesUrl, uploadProbeBatch };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map