Support for highway=track

scripts/taginfo_template.json

@@ -214,6 +214,13 @@
       "description": "Unpaved roads have an alternating dash pattern.",
       "doc_url": "https://openmaptiles.org/schema/#surface"
     },
+    {
+      "key": "surface",
+      "value": "track",
+      "object_types": ["way"],
+      "description": "Track roads have a two-track line pattern that is dashed if unpaved and solid if paved.",
+      "doc_url": "https://openmaptiles.org/schema/#transportation"
+    },
     {
       "key": "iata",
       "object_types": ["node", "area"],
@@ -388,6 +395,20 @@
       "description": "Major roads under construction have a dotted line pattern and a more prominent color.",
       "doc_url": "https://openmaptiles.org/schema/#transportation"
     },
+    {
+      "key": "highway",
+      "value": "track",
+      "object_types": ["way"],
+      "description": "Track roads have a two-track line pattern that is dashed if unpaved and solid if paved.",
+      "doc_url": "https://openmaptiles.org/schema/#transportation"
+    },
+    {
+      "key": "ford",
+      "value": "yes",
+      "object_types": ["way"],
+      "description": "The color of track roads changes from brown to blue for ways tagged as fords.",
+      "doc_url": "https://openmaptiles.org/schema/#transportation"
+    },
     {
       "key": "railway",
       "value": "rail",

src/js/legend_config.js

@@ -4,6 +4,7 @@ import * as PlaceLayers from "../layer/place.js";
 import * as LanduseLayers from "../layer/landuse.js";
 import * as BoundaryLayers from "../layer/boundary.js";
 import * as RoadLayers from "../layer/road.js";
+import * as TrackLayers from "../layer/track.js";
 import * as ConstructionLayers from "../layer/construction.js";
 import * as HighwayExitLayers from "../layer/highway_exit.js";
 import * as RailLayers from "../layer/rail.js";
@@ -28,6 +29,7 @@ export const sections = [
     name: "Roads",
     entries: [
       ...RoadLayers.legendEntries,
+      ...TrackLayers.legendEntries,
       ...ConstructionLayers.legendEntries,
       ...HighwayExitLayers.legendEntries,
     ],

src/layer/index.js

@@ -15,6 +15,7 @@ import * as lyrPlace from "./place.js";
 import * as lyrPoi from "./poi.js";
 import * as lyrRail from "./rail.js";
 import * as lyrRoad from "./road.js";
+import * as lyrTrack from "./track.js";
 import * as lyrTransportationLabel from "./transportation_label.js";
 import * as lyrWater from "./water.js";
 import * as lyrBuilding from "./building.js";
@@ -88,6 +89,9 @@ export function build(locales) {
     lyrAeroway.taxiway,
     lyrAeroway.taxiwayArea,
 
+    lyrTrack.track,
+    lyrTrack.pavedTrack,
+
     lyrRoad.motorwayLink.casing(),
     lyrRoad.trunkLink.casing(),
 
@@ -147,6 +151,9 @@ export function build(locales) {
   var bridgeLayers = [
     lyrRail.bridgeCasing,
 
+    lyrTrack.bridgeCasing,
+    lyrTrack.bridgeFill,
+
     lyrRoad.trunkLinkBridge.casing(),
     lyrRoad.motorwayLinkBridge.casing(),
 
@@ -183,6 +190,9 @@ export function build(locales) {
 
     lyrRoad.roadBridge.surface(),
 
+    lyrTrack.trackBridge,
+    lyrTrack.pavedTrackBridge,
+
     lyrRail.railBridge.dashes(),
     lyrRail.railServiceBridge.dashes(),
 

src/layer/track.js

@@ -0,0 +1,147 @@
+"use strict";
+
+import * as Color from "../constants/color.js";
+
+const trackSelect = ["==", ["get", "class"], "track"];
+const unpavedSelect = ["!=", ["get", "surface"], "paved"];
+const pavedSelect = ["==", ["get", "surface"], "paved"];
+const bridgeSelect = ["==", ["get", "brunnel"], "bridge"];
+const fordSelect = ["==", ["get", "brunnel"], "ford"];
+const notFordSelect = ["!=", ["get", "brunnel"], "ford"];
+const opacity = ["interpolate", ["exponential", 1.2], ["zoom"], 12, 0, 13, 1];
+const getBrunnel = ["get", "brunnel"];
+
+export const track = {
+  id: "highway-track",
+  type: "line",
+  source: "openmaptiles",
+  "source-layer": "transportation",
+  filter: ["all", trackSelect, unpavedSelect],
+  minzoom: 12,
+  paint: {
+    "line-color": ["match", getBrunnel, "ford", Color.waterLine, "#d4b791"],
+    "line-opacity": opacity,
+    "line-blur": 0.75,
+    "line-width": 0.5,
+    "line-dasharray": [12, 3],
+    "line-offset": 0,
+    "line-gap-width": [
+      "interpolate",
+      ["exponential", 1.2],
+      ["zoom"],
+      13,
+      0.7,
+      20,
+      6,
+    ],
+  },
+};
+
+export const pavedTrack = {
+  id: "highway-track-paved",
+  type: "line",
+  source: "openmaptiles",
+  "source-layer": "transportation",
+  filter: ["all", trackSelect, pavedSelect],
+  minzoom: 12,
+  paint: { ...track.paint },
+};
+pavedTrack["paint"]["line-dasharray"] = [1, 0];
+
+export const trackBridge = {
+  id: "highway-track-bridge",
+  type: "line",
+  source: "openmaptiles",
+  "source-layer": "transportation",
+  filter: ["all", trackSelect, unpavedSelect, bridgeSelect],
+  minzoom: 12,
+  paint: { ...track.paint },
+};
+
+export const pavedTrackBridge = {
+  id: "highway-track-paved-bridge",
+  type: "line",
+  source: "openmaptiles",
+  "source-layer": "transportation",
+  filter: ["all", trackSelect, pavedSelect, bridgeSelect],
+  minzoom: 12,
+  paint: { ...pavedTrack.paint },
+};
+
+// Bridge casing layers
+export const bridgeCasing = {
+  id: "track-bridge-casing",
+  type: "line",
+  source: "openmaptiles",
+  "source-layer": "transportation",
+  filter: ["all", bridgeSelect, trackSelect],
+  minzoom: 13,
+  layout: {
+    "line-cap": "butt",
+    "line-join": "bevel",
+    visibility: "visible",
+  },
+  paint: {
+    "line-color": "black",
+    "line-opacity": opacity,
+    "line-width": [
+      "interpolate",
+      ["exponential", 1.2],
+      ["zoom"],
+      13,
+      1.1,
+      20,
+      11,
+    ],
+  },
+};
+// Bridge casing layers
+export const bridgeFill = {
+  id: "track-bridge-fill",
+  type: "line",
+  source: "openmaptiles",
+  "source-layer": "transportation",
+  filter: ["all", bridgeSelect, trackSelect],
+  minzoom: 13,
+  layout: {
+    "line-cap": "butt",
+    "line-join": "bevel",
+    visibility: "visible",
+  },
+  paint: {
+    "line-color": Color.backgroundFill,
+    "line-opacity": opacity,
+    "line-width": [
+      "interpolate",
+      ["exponential", 1.2],
+      ["zoom"],
+      13,
+      1.0,
+      20,
+      10,
+    ],
+  },
+};
+
+export const legendEntries = [
+  {
+    description: "Unpaved track",
+    layers: [track.id],
+    filter: notFordSelect,
+  },
+  {
+    description: "Unpaved track - ford",
+    layers: [track.id],
+    filter: fordSelect,
+  },
+  {
+    description: "Paved track",
+    layers: [pavedTrack.id],
+    filter: notFordSelect,
+  },
+  {
+    description: "Paved track - ford",
+    layers: [pavedTrack.id],
+    filter: fordSelect,
+  },
+];

src/layer/transportation_label.js

@@ -8,7 +8,13 @@ const classSelector = ["match", ["get", "class"]];
 const motorwayToTrunk = ["motorway", "trunk"];
 const motorwayToPrimary = [...motorwayToTrunk, "primary"];
 const motorwayToSecondary = [...motorwayToPrimary, "secondary"];
-const motorwayToMinor = [...motorwayToSecondary, "tertiary", "minor", "busway"];
+const motorwayToMinor = [
+  ...motorwayToSecondary,
+  "tertiary",
+  "minor",
+  "busway",
+  "track",
+];
 const motorwayToService = [...motorwayToMinor, "service"];
 
 const majorConstruction = ["motorway_construction", "trunk_construction"];