@mapmap/maps 0.3.0 → 0.5.0

package/dist/index.js

@@ -778,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"],
@@ -868,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,
@@ -1026,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),
     {
@@ -1052,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",
@@ -1062,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
       }
     },
     {
@@ -1074,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",
@@ -1098,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()
       }
     },
     {
@@ -1109,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]
       }
     },
     {
@@ -1139,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",
@@ -1162,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",
@@ -1177,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",
@@ -1469,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)