add aerialways

src/constants/color.js

@@ -20,6 +20,8 @@ export const parkOutline = "hsla(136, 41%, 70%, 50%)";
 export const parkLabel = "hsl(136, 71%, 29%)";
 export const parkLabelHalo = "hsl(90, 27%, 94%)";
 
+export const aerialwayLine = "hsl(350, 70%, 50%)";
+
 export const airportFill = "hsl(250, 41%, 95%)";
 export const airportOutline = "hsl(250, 41%, 79%)";
 export const airportRunway = "hsl(250, 41%, 79%)";

src/js/legend_config.js

@@ -13,6 +13,7 @@ import * as ParkLayers from "../layer/park.js";
 import * as BuildingLayers from "../layer/building.js";
 import * as WaterLayers from "../layer/water.js";
 import * as FerryLayers from "../layer/ferry.js";
+import * as AerialwayLayers from "../layer/aerialway.js";
 
 export const sections = [
   {
@@ -40,6 +41,10 @@ export const sections = [
     name: "Railroads",
     entries: RailLayers.legendEntries,
   },
+  {
+    name: "Aerialways",
+    entries: AerialwayLayers.legendEntries,
+  },
   {
     name: "Aviation",
     entries: AerowayLayers.legendEntries,

src/layer/aerialway.js

@@ -0,0 +1,112 @@
+"use strict";
+
+import * as Color from "../constants/color.js";
+
+// Exponent base for inter-zoom interpolation
+let aerialwayExp = 1.2;
+
+export const lift = {
+  id: "lift",
+  type: "line",
+  paint: {
+    "line-color": Color.aerialwayLine,
+    "line-width": [
+      "interpolate",
+      ["exponential", aerialwayExp],
+      ["zoom"],
+      12,
+      0.6,
+      20,
+      2.4,
+    ],
+    "line-gap-width": [
+      "interpolate",
+      ["exponential", aerialwayExp],
+      ["zoom"],
+      12,
+      0.5,
+      20,
+      2,
+    ],
+  },
+  filter: [
+    "all",
+    ["==", ["get", "class"], "aerialway"],
+    [
+      "in",
+      ["get", "subclass"],
+      ["literal", ["chair_lift", "cable_car", "gondola", "mixed_lift"]],
+    ],
+  ],
+  layout: {
+    visibility: "visible",
+  },
+  source: "openmaptiles",
+  "source-layer": "transportation",
+};
+
+export const dragLift = {
+  id: "drag_lift",
+  type: "line",
+  paint: {
+    "line-color": Color.aerialwayLine,
+    "line-width": [
+      "interpolate",
+      ["exponential", aerialwayExp],
+      ["zoom"],
+      12,
+      1.5,
+      20,
+      6,
+    ],
+    "line-dasharray": [2, 0.5],
+  },
+  filter: [
+    "all",
+    ["==", ["get", "class"], "aerialway"],
+    [
+      "in",
+      ["get", "subclass"],
+      ["literal", ["drag_lift", "platter", "j-bar", "t-bar"]],
+    ],
+  ],
+  layout: {
+    visibility: "visible",
+  },
+  source: "openmaptiles",
+  "source-layer": "transportation",
+};
+
+export const casing = {
+  id: "aerialway_casing",
+  type: "line",
+  paint: {
+    "line-color": Color.backgroundFill,
+    "line-width": [
+      "interpolate",
+      ["exponential", aerialwayExp],
+      ["zoom"],
+      12,
+      2.5,
+      20,
+      10,
+    ],
+  },
+  filter: ["==", ["get", "class"], "aerialway"],
+  layout: {
+    visibility: "visible",
+  },
+  source: "openmaptiles",
+  "source-layer": "transportation",
+};
+
+export const legendEntries = [
+  {
+    description: "Aerial tramway or chairlift",
+    layers: [lift.id],
+  },
+  {
+    description: "Drag lift",
+    layers: [dragLift.id],
+  },
+];

src/layer/index.js

@@ -2,6 +2,7 @@
 
 import * as Label from "../constants/label.js";
 
+import * as lyrAerialway from "./aerialway.js";
 import * as lyrAeroway from "./aeroway.js";
 import * as lyrBackground from "./background.js";
 import * as lyrBoundary from "./boundary.js";
@@ -199,6 +200,10 @@ export function build(locales) {
 
   layers.push(
     //The labels at the end of the list draw on top of the layers at the beginning.
+    lyrAerialway.casing,
+    lyrAerialway.dragLift,
+    lyrAerialway.lift,
+
     lyrWater.waterwayLabel,
 
     lyrTransportationLabel.bridgeSpacer,

src/layer/transportation_label.js

@@ -3,7 +3,7 @@
 import * as Label from "../constants/label.js";
 import * as Color from "../constants/color.js";
 
-const highwaySelector = ["match", ["get", "class"]];
+const classSelector = ["match", ["get", "class"]];
 
 const motorwayToTrunk = ["motorway", "trunk"];
 const motorwayToPrimary = [...motorwayToTrunk, "primary"];
@@ -25,17 +25,19 @@ export const label = {
   type: "symbol",
   paint: {
     "text-color": [
-      ...highwaySelector,
+      ...classSelector,
       majorConstruction,
       "maroon",
       minorConstruction,
       "slategray",
       "ferry",
       Color.waterLineBold,
+      "aerialway",
+      Color.aerialwayLine,
       "#333",
     ],
     "text-halo-color": [
-      ...highwaySelector,
+      ...classSelector,
       "ferry",
       Color.waterFill,
       Color.backgroundFill,
@@ -45,17 +47,17 @@ export const label = {
     "text-opacity": [
       "step",
       ["zoom"],
-      [...highwaySelector, "motorway", 1, 0],
+      [...classSelector, "motorway", 1, 0],
       10,
-      [...highwaySelector, motorwayToTrunk, 1, 0],
+      [...classSelector, motorwayToTrunk, 1, 0],
       11,
-      [...highwaySelector, motorwayToPrimary, 1, "ferry", 1, 0],
+      [...classSelector, motorwayToPrimary, 1, "ferry", 1, 0],
       12,
-      [...highwaySelector, motorwayToSecondary, 1, "ferry", 1, 0],
+      [...classSelector, motorwayToSecondary, 1, ["ferry", "aerialway"], 1, 0],
       13,
-      [...highwaySelector, motorwayToMinor, 1, "ferry", 1, 0],
+      [...classSelector, motorwayToMinor, 1, ["ferry", "aerialway"], 1, 0],
       14,
-      [...highwaySelector, motorwayToService, 1, "ferry", 1, 0],
+      [...classSelector, motorwayToService, 1, ["ferry", "aerialway"], 1, 0],
       15,
       1,
     ],
@@ -70,13 +72,14 @@ export const label = {
         ...majorConstruction,
         ...minorConstruction,
         "ferry",
+        "aerialway",
       ],
     ],
   ],
   layout: {
     "text-font": [
-      ...highwaySelector,
-      "ferry",
+      ...classSelector,
+      ["ferry", "aerialway"],
       ["literal", ["OpenHistorical Italic"]],
       ["literal", ["OpenHistorical"]],
     ],
@@ -88,33 +91,35 @@ export const label = {
       ["zoom"],
       12,
       16,
-      [...highwaySelector, motorwayToTrunk, 10, 12],
+      [...classSelector, motorwayToTrunk, 10, 12],
       17,
-      [...highwaySelector, motorwayToSecondary, 10, 12],
+      [...classSelector, motorwayToSecondary, 10, 12],
     ],
     "text-anchor": [
       "step",
       ["zoom"],
       "bottom",
       16,
-      [...highwaySelector, motorwayToTrunk, "center", "bottom"],
+      [...classSelector, motorwayToTrunk, "center", "bottom"],
       17,
-      [...highwaySelector, motorwayToSecondary, "center", "bottom"],
+      [...classSelector, motorwayToSecondary, "center", "bottom"],
     ],
     "symbol-sort-key": [
       // TODO busway
-      ...highwaySelector,
-      "motorway",
+      ...classSelector,
+      "aerialway",
       0,
-      "trunk",
+      "motorway",
       1,
-      ["primary", "ferry"],
+      "trunk",
       2,
-      "secondary",
+      ["primary", "ferry"],
       3,
-      ["tertiary", "minor"],
+      "secondary",
       4,
+      ["tertiary", "minor"],
       5,
+      6,
     ],
   },
   source: "openmaptiles",