@tileflow/maps 0.1.0-alpha.14 → 0.1.0-alpha.16

package/dist/index.js

@@ -8401,6 +8401,15 @@ import {
   field as field9,
   token as token6
 } from "@tileflow/core";
+
+// src/official/streets-transit-icons.ts
+var streetsTransitNetworks = [
+  { id: "transit-madrid-metro", networks: ["Metro de Madrid"] },
+  { id: "transit-madrid-cercanias", networks: ["Cercan\xEDas Madrid"] },
+  { id: "transit-madrid-emt", networks: ["EMT Madrid"] }
+];
+
+// src/official/streets-poi.ts
 var streetsPoiDiscColors = Object.freeze({
   light: {
     "arts-entertainment": "#F37CCC",
@@ -8658,7 +8667,9 @@ function streetsPoiImageTokens(variant) {
       `poi.${category}`,
       image2(id)
     ]),
-    ...Object.keys(streetsPoiPictograms).map((id) => [`poi.pictogram.${id}`, image2(id)])
+    ...Object.keys(streetsPoiPictograms).map((id) => [`poi.pictogram.${id}`, image2(id)]),
+    // A network has one source SVG, shared by every time-of-day and palette variant.
+    ...streetsTransitNetworks.map(({ id }) => [`poi.network.${id}`, id])
   ]);
 }
 function streetsPoiImage() {
@@ -8683,7 +8694,7 @@ function streetsPoiImage() {
     labels: [...labels8],
     value: streetsPoiPictogramToken(id)
   }));
-  return expr10.match(
+  const genericImage = expr10.match(
     expr10.get(field9("mode")),
     [firstMode, ...otherModes],
     expr10.match(
@@ -8692,11 +8703,41 @@ function streetsPoiImage() {
       token6.image("poi.landmark")
     )
   );
+  const [firstNetwork, ...otherNetworks] = streetsTransitNetworks.map(({ id, networks }) => ({
+    labels: [...networks],
+    value: token6.image(`poi.network.${id}`)
+  }));
+  return expr10.case(
+    [
+      {
+        when: expr10.eq(expr10.get(field9("poiCategory")), "transport"),
+        value: expr10.match(
+          expr10.get(field9("network")),
+          [firstNetwork, ...otherNetworks],
+          genericImage
+        )
+      }
+    ],
+    genericImage
+  );
 }
 
 // src/official/streets-themes.ts
 import { defineTheme as defineTheme3, token as token7 } from "@tileflow/core";
 
+// src/official/streets-building-colors.ts
+function streetsBuildingColors(base, dark) {
+  const rgb = [1, 3, 5].map((offset) => parseInt(base.slice(offset, offset + 2), 16));
+  const gray = rgb.reduce((sum, value) => sum + value, 0) / 3;
+  const hex2 = (values) => "#" + values.map((v) => Math.round(v).toString(16).padStart(2, "0")).join("").toUpperCase();
+  return {
+    "buildings.modelSurface": base,
+    "buildings.modelSecondary": hex2(rgb.map((v) => v + (255 - v) * (dark ? 0.018 : 0.24))),
+    "buildings.modelRoof": hex2(rgb.map((v) => (v * 0.8 + gray * 0.2) * 0.97)),
+    "buildings.modelAccent": hex2(rgb.map((v) => v + (255 - v) * (dark ? 0.025 : 0.34)))
+  };
+}
+
 // src/official/streets-cartography-colors.ts
 var profiles = [
   "default-dawn",
@@ -10064,6 +10105,21 @@ function streetsModelLighting(preset, family) {
 }
 
 // src/official/streets-road-colors.ts
+var streetsDayRoadFillColors = {
+  "roads.major": "#AAB9C9",
+  "roads.motorway": "#AAB9C9",
+  "roads.trunk": "#AAB9C9",
+  "roads.primary": "#AAB9C9",
+  "roads.city.primary": "#D5DBDF",
+  "roads.default": "#BDCCD9",
+  "roads.minor": "#BDCCD9",
+  "roads.secondary": "#BDCCD9",
+  "roads.tertiary": "#BDCCD9",
+  "roads.bridge": "#BDCCD9",
+  "roads.city.secondary": "#DEE3E6",
+  "roads.city.tertiary": "#E3E7E9",
+  "roads.city.minor": "#DDE2E5"
+};
 var standardRoadCasingProfiles = {
   "default-dawn": {
     generic: "#A49CA0",
@@ -10786,11 +10842,20 @@ function calibratedStreetsColors(preset, theme) {
   return { ...colors, "roads.detail.casing": roadCasings.hd };
 }
 function streetsPaletteColors(preset, colorTheme) {
-  return {
+  const palette = {
     ...calibratedStreetsColors(preset, colorTheme),
     ...streetsCartographyColors(colorTheme, preset),
+    ...colorTheme === "default" && preset === "day" ? streetsDayRoadFillColors : {}
+  };
+  return {
+    ...palette,
+    // The parts building models name water, vegetation and wood take the map's water and trees.
+    "buildings.modelWater": palette["hydro.water"],
+    "buildings.modelVegetation": palette["vegetation.tree.broadleaf.b"],
+    "buildings.modelWood": palette["vegetation.tree.bark"],
     "buildings.floodLight": !isDarkStreetsPreset(preset) ? "#FFFFFF" : colorTheme === "monochrome" ? "#E5E5E5" : colorTheme === "faded" ? "#F8E4C4" : "#F5CFA8",
     ...streetsModelLighting(preset, colorTheme).colors,
+    ...streetsBuildingColors(palette["buildings.extrusion"], isDarkStreetsPreset(preset)),
     ...streetsSkyTokens(preset, colorTheme).colors
   };
 }
@@ -11061,6 +11126,7 @@ var streetsVisual = {
     pathTransition: token7.color("roads.path.transition"),
     pathTunnel: token7.color("roads.path.tunnel"),
     pedestrianSurface: token7.color("roads.pedestrian.surface"),
+    primary: token7.color("roads.primary"),
     rail: token7.color("roads.rail"),
     railTransit: token7.color("roads.railTransit"),
     sidewalkSurface: token7.color("roads.sidewalk.surface"),
@@ -11526,11 +11592,17 @@ var streetsOverviewPalette = {
   admin1: streetsVisual.boundary.regional,
   label: streetsVisual.label.country
 };
-var detailedRoadTransitionStartZoom = 14;
+var detailedRoadTransitionStartZoom = 13;
 var detailedRoadZoom = 15;
 function cityRoadColorStops(minZoom, cityColor, detailedColor) {
   return [
-    [minZoom, cityColor],
+    // At regional scales the same classes connect towns. Do not wash them out
+    // against vegetation; the source has no reliable urban/rural discriminator.
+    ...minZoom < 12 ? [
+      [minZoom, detailedColor],
+      [10, detailedColor]
+    ] : [],
+    [12, cityColor],
     [detailedRoadTransitionStartZoom, cityColor],
     [detailedRoadZoom, detailedColor],
     [22, detailedColor]
@@ -11548,7 +11620,7 @@ var roadBorderTotalWidth = 1;
 var roadWidthInterpolationBase = 1.5;
 var roadSurfaceColor = mapboxRoadPalette.road;
 var roadCasingColor = mapboxRoadPalette.detailCasing;
-var primaryRoadSurfaceColor = mapboxRoadPalette.road;
+var primaryRoadSurfaceColor = streetsVisual.road.primary;
 var secondaryRoadSurfaceColor = mapboxRoadPalette.road;
 var tertiaryRoadSurfaceColor = mapboxRoadPalette.road;
 var buildingFillColor = mapboxBuildingPalette.fill;
@@ -11654,7 +11726,7 @@ function roadWidth(widths2, oneWayScale, rampWidths) {
       [{ labels: [1, -1], value: width * oneWayScale }],
       width
     );
-    const rampWidth = rampWidths?.find(([rampLevel]) => rampLevel === level)?.[1];
+    const rampWidth = rampWidths ? sampleRoadWidth(rampWidths, level) : void 0;
     const surfaceWidth = rampWidth === void 0 ? ordinaryWidth : expr12.case(
       [{ when: expr12.eq(expr12.get(field11("ramp")), 1), value: rampWidth }],
       ordinaryWidth
@@ -11671,6 +11743,27 @@ function roadWidth(widths2, oneWayScale, rampWidths) {
     ...widthStops.slice(1)
   ]);
 }
+function sampleRoadWidth(widths2, level) {
+  if (level <= widths2[0][0]) return widths2[0][1];
+  for (let i = 1; i < widths2.length; i++) {
+    const [end, endWidth] = widths2[i];
+    if (level > end) continue;
+    const [start, startWidth] = widths2[i - 1];
+    const t = (roadWidthInterpolationBase ** (level - start) - 1) / (roadWidthInterpolationBase ** (end - start) - 1);
+    return startWidth + t * (endWidth - startWidth);
+  }
+  return widths2.at(-1)[1];
+}
+function cityRoadWidths(widths2, at12, at14) {
+  return [
+    widths2[0],
+    [10, sampleRoadWidth(widths2, 10)],
+    [12, at12],
+    [14, at14],
+    [15, sampleRoadWidth(widths2, 15)],
+    ...widths2.filter(([level]) => level > 15)
+  ];
+}
 function roadCasingWidth(major) {
   return expr12.interpolate({ kind: "exponential", base: 1.5 }, expr12.zoom(), [
     [
@@ -12267,6 +12360,36 @@ function streetsLabelRenderStack() {
     })
   };
 }
+function cityRoadSurfaceColor(roadClass) {
+  const detailedColor = roadClass === "primary" ? primaryRoadSurfaceColor : roadSurfaceColor;
+  const stops = cityRoadColorStops(
+    roadClass === "minor" ? 12 : roadClass === "primary" ? 5 : 8,
+    streetsCityRoadPalette[roadClass],
+    detailedColor
+  );
+  const outputs = stops.map(
+    ([level, color]) => [
+      level,
+      expr12.case(
+        [
+          {
+            when: expr12.eq(expr12.get(field11("class")), `${roadClass}_construction`),
+            value: roadSurfaceColor
+          },
+          {
+            when: expr12.eq(expr12.get(field11("surface")), "unpaved"),
+            value: level >= 12 && level < 15 ? streetsCityRoadPalette[roadClass] : roadSurfaceColor
+          }
+        ],
+        color
+      )
+    ]
+  );
+  return expr12.interpolate({ kind: "linear" }, expr12.zoom(), [
+    outputs[0],
+    ...outputs.slice(1)
+  ]);
+}
 function streetsRoadEligibility() {
   return Object.fromEntries(
     ["motorway", "trunk", "primary", "secondary", "tertiary"].flatMap(
@@ -12278,7 +12401,11 @@ function streetsRoadEligibility() {
             kind: "all",
             selectors: [
               { kind: "geometry", geometry: "line" },
-              { kind: "in", field: "class", values: [roadClass, `${roadClass}_construction`] },
+              {
+                kind: "in",
+                field: "class",
+                values: [roadClass, `${roadClass}_construction`]
+              },
               {
                 kind: "compare",
                 field: "ramp",
@@ -12290,7 +12417,7 @@ function streetsRoadEligibility() {
                 fallback: { kind: "literal", value: true },
                 stops: [
                   {
-                    zoom: 5,
+                    zoom: 13,
                     selector: {
                       kind: "all",
                       selectors: [
@@ -12305,7 +12432,10 @@ function streetsRoadEligibility() {
           },
           // Core places links before receiving carriageways. Streets owns only
           // their reference-specific visibility threshold and palette/widths.
-          style: phase === "rampFill" ? { minZoom: 12 } : {},
+          style: {
+            ...phase === "rampFill" ? { minZoom: 12 } : {},
+            ...["primary", "secondary", "tertiary", "minor"].includes(roadClass) ? { color: cityRoadSurfaceColor(roadClass) } : {}
+          },
           target: `roads.classes.${roadClass}.surface.${phase}`
         })
       ])
@@ -12325,6 +12455,16 @@ function streetsRoadRenderStack() {
     }),
     ...parkPathRefinements(),
     ...streetsRoadEligibility(),
+    minorSurfaceColor: refineRenderTarget5({
+      renderer: "line",
+      style: { color: cityRoadSurfaceColor("minor") },
+      target: "roads.classes.minor.surface.fill"
+    }),
+    minorLinkColor: refineRenderTarget5({
+      renderer: "line",
+      style: { color: cityRoadSurfaceColor("minor") },
+      target: "roads.classes.minor.surface.rampFill"
+    }),
     oneWayMarkers: refineRenderTarget5({
       renderer: "symbol",
       style: {
@@ -12447,7 +12587,14 @@ function cityRoadStyle(color, widths2, options = {}) {
     surface: { casing, fill },
     bridge: {
       casing: { ...casing, cap: "butt", join: "miter", width: roadCasingWidth((minZoom ?? 0) < 12) },
-      fill: { ...fill, cap: "round", join: "miter", minZoom: Math.max(minZoom ?? 0, 13) }
+      // Local structures join their streets at z12; major structures take over
+      // the continuous overview strokes at z13.
+      fill: {
+        ...fill,
+        cap: "round",
+        join: "miter",
+        minZoom: Math.max(minZoom ?? 0, minZoom === 12 ? 12 : 13)
+      }
     },
     tunnel: tunnelVisible ? {
       casing: {
@@ -12468,7 +12615,7 @@ function cityRoadStyle(color, widths2, options = {}) {
         ...fill,
         cap: "butt",
         join: "miter",
-        minZoom: Math.max(minZoom ?? 0, 13),
+        minZoom: Math.max(minZoom ?? 0, minZoom === 12 ? 12 : 13),
         color: tunnelColor,
         opacity: zoom10.linear([
           [3, 0],
@@ -13188,12 +13335,16 @@ var streets = bindOfficialMapTheme(
             ),
             primary: cityRoadStyle(
               primaryRoadSurfaceColor,
-              [
-                [3, 0.8],
-                [12, 3],
-                [18, 28],
-                [22, 280]
-              ],
+              cityRoadWidths(
+                [
+                  [3, 0.8],
+                  [12, 3],
+                  [18, 28],
+                  [22, 280]
+                ],
+                2,
+                3.6
+              ),
               {
                 casingColorStops: cityRoadCasingColorStops(5),
                 colorStops: cityRoadColorStops(
@@ -13210,12 +13361,16 @@ var streets = bindOfficialMapTheme(
             ),
             secondary: cityRoadStyle(
               secondaryRoadSurfaceColor,
-              [
-                [3, 0],
-                [12, 2.2],
-                [18, 26],
-                [22, 260]
-              ],
+              cityRoadWidths(
+                [
+                  [3, 0],
+                  [12, 2.2],
+                  [18, 26],
+                  [22, 260]
+                ],
+                1.4,
+                3
+              ),
               {
                 casingColorStops: cityRoadCasingColorStops(8),
                 colorStops: cityRoadColorStops(
@@ -13231,12 +13386,16 @@ var streets = bindOfficialMapTheme(
             ),
             tertiary: cityRoadStyle(
               tertiaryRoadSurfaceColor,
-              [
-                [3, 0],
-                [12, 2.2],
-                [18, 26],
-                [22, 260]
-              ],
+              cityRoadWidths(
+                [
+                  [3, 0],
+                  [12, 2.2],
+                  [18, 26],
+                  [22, 260]
+                ],
+                1.1,
+                2.5
+              ),
               {
                 casingColorStops: cityRoadCasingColorStops(8),
                 colorStops: cityRoadColorStops(
@@ -13252,12 +13411,16 @@ var streets = bindOfficialMapTheme(
             ),
             minor: cityRoadStyle(
               roadSurfaceColor,
-              [
-                [3, 0],
-                [12, 0.5],
-                [18, 20],
-                [22, 200]
-              ],
+              cityRoadWidths(
+                [
+                  [3, 0],
+                  [12, 0.5],
+                  [18, 20],
+                  [22, 200]
+                ],
+                0.8,
+                2.1
+              ),
               {
                 casingColorStops: cityRoadCasingColorStops(12),
                 colorStops: cityRoadColorStops(12, streetsCityRoadPalette.minor, roadSurfaceColor),
@@ -13390,6 +13553,18 @@ var streets = bindOfficialMapTheme(
           // stand beside the flat fill, so they require this mode.
           mode: "flat",
           threeDimensional: {
+            edgeRadius: 1.5,
+            groundOcclusion: 0.12,
+            // Models name pools, planting and timber with these parts to follow the map's colours.
+            modelColors: {
+              surface: token9.color("buildings.modelSurface"),
+              secondary: token9.color("buildings.modelSecondary"),
+              roof: token9.color("buildings.modelRoof"),
+              accent: token9.color("buildings.modelAccent"),
+              water: token9.color("buildings.modelWater"),
+              vegetation: token9.color("buildings.modelVegetation"),
+              wood: token9.color("buildings.modelWood")
+            },
             floodLight: {
               intensity: token9.number("buildings.floodLight.intensity"),
               brightnessScale: token9.number("buildings.floodLight.brightnessScale"),
@@ -13397,21 +13572,22 @@ var streets = bindOfficialMapTheme(
             },
             modelLighting: {
               wall: {
-                emissiveStrength: token9.number("buildings.modelEmission.strength"),
-                emissiveColor: token9.color("buildings.modelEmission"),
-                emissiveHeight: [
-                  token9.number("buildings.modelEmission.start"),
-                  token9.number("buildings.modelEmission.end"),
-                  0,
-                  1,
-                  token9.number("buildings.modelEmission.curve")
-                ],
-                color: token9.color("buildings.modelEmission"),
+                shading: "map",
+                ambientOcclusion: 0.32,
+                color: token9.color("buildings.modelSurface"),
+                roughness: 1,
+                metallic: 0
+              },
+              roof: {
+                shading: "map",
+                ambientOcclusion: 0.32,
+                color: token9.color("buildings.modelRoof"),
                 roughness: 1,
                 metallic: 0
               },
-              roof: { color: token9.color("buildings.modelRoof"), roughness: 1, metallic: 0 },
               window: {
+                // Glass keeps its original role colour even on a shared stone part.
+                partColorMix: 0,
                 roughness: 0,
                 metallic: 1,
                 emissiveStrength: token9.number("buildings.modelWindow.strength"),
@@ -13437,22 +13613,11 @@ var streets = bindOfficialMapTheme(
                 ["unclassified", "door", "lamp", "logo"].map((role) => [
                   role,
                   {
+                    shading: "map",
+                    ambientOcclusion: 0.32,
+                    color: token9.color("buildings.modelSurface"),
                     roughness: 1,
-                    metallic: 0,
-                    emissiveStrength: role === "door" ? token9.number("buildings.modelDoor.strength") : role === "logo" ? 0.6 : 0,
-                    colorMix: role === "logo" ? token9.number("buildings.modelLogo.mix") : 1,
-                    colorVariation: {
-                      hue: [10, 70],
-                      saturation: [
-                        token9.number("buildings.modelOther.saturation"),
-                        token9.number("buildings.modelOther.saturation")
-                      ],
-                      lightness: [
-                        token9.number("buildings.modelOther.lightnessLow"),
-                        token9.number("buildings.modelOther.lightnessHigh")
-                      ],
-                      space: "linear"
-                    }
+                    metallic: 0
                   }
                 ])
               )
@@ -14069,6 +14234,9 @@ var streets = bindOfficialMapTheme(
         color: "category",
         density: 2,
         detailZoom: 18,
+        // World also calls botanical collections gardens. Keep only the main destinations;
+        // zooming in must not turn individual planting sections into named POIs.
+        maxRankByType: { garden: 1 },
         densityByCategory: {
           lodging: 1,
           "park-nature": 3,

package/docs/design-and-assets.md

@@ -1,5 +1,28 @@
 # Map designs and assets
 
+## Streets POIs
+
+Transport POIs with a recognized `network` use that network's symbol. The initial catalog covers
+`Metro de Madrid`, `Cercanías Madrid`, and `EMT Madrid`. Each network has one packaged SVG in a
+24px cell, shared across all themes without recoloring the identity. Matching uses the source's
+exact network value, including on older World tiles without `mode`; it never guesses from a
+station name or applies a city logo to every station. Unknown or missing networks retain the
+existing mode/type/category pictogram. Other railway services and intercity buses keep their
+generic symbols. Sources and asset licenses are recorded in `THIRD_PARTY_NOTICES.md`.
+
+POIs use World ranks with category density: parks and transport retain more detail than
+businesses, hotels and religious sites. Gardens are limited to World filter ranks 0–1 at every
+zoom, keeping principal destinations while suppressing botanical collections and other minor
+garden POIs. World currently classifies both as `garden`, so some small independent gardens are
+also omitted. Other park and landmark types keep their usual eligibility.
+
+All categories share importance order; the two most important ranks precede streets. Discs need
+names except parking and toilets. Native perspective and collisions select labels. See
+[label placement](https://github.com/tileflow/tileflow-sdk/blob/main/packages/core/docs/cartographic-defaults.md#label-density-and-perspective).
+Ordinary POI/transit names use 13 px, major destinations 18 px. World size rank zero alone does
+not enlarge small parks. Text padding falls from 6 px to 4 px between z16 and z17; collision
+determines which names fit.
+
 ## civica
 
 `civica` is a self-contained civic print design named “Cívica”. Pale paper, warm stone blocks,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tileflow/maps",
-  "version": "0.1.0-alpha.14",
+  "version": "0.1.0-alpha.16",
   "license": "Apache-2.0",
   "description": "Official themed Streets, Baedeker, Cívica, 1777, Siegfried, Soundings, and Blueprint maps for Tileflow.",
   "type": "module",
@@ -52,12 +52,12 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@tileflow/core": ">=0.1.0-alpha.40 <0.1.0-beta.0"
+    "@tileflow/core": ">=0.1.0-alpha.42 <0.1.0-beta.0"
   },
   "devDependencies": {
     "@maplibre/maplibre-gl-style-spec": "24.8.5",
     "@maplibre/maplibre-gl-style-spec-v6": "npm:@maplibre/maplibre-gl-style-spec@26.4.4",
-    "@tileflow/core": "0.1.0-alpha.40"
+    "@tileflow/core": "0.1.0-alpha.42"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm --dts --clean --no-splitting",