Add highways under construction

src/americana.js

@@ -9,6 +9,7 @@ import * as ShieldDef from "./js/shield_defs.js";
 import * as lyrAeroway from "./layer/aeroway.js";
 import * as lyrBackground from "./layer/background.js";
 import * as lyrBoundary from "./layer/boundary.js";
+import * as lyrConstruction from "./layer/construction.js";
 import * as lyrHighwayShield from "./layer/highway_shield.js";
 import * as lyrOneway from "./layer/oneway.js";
 import * as lyrPark from "./layer/park.js";
@@ -65,6 +66,8 @@ americanaLayers.push(
   lyrBackground.pierArea,
   lyrBackground.pierLine,
 
+  lyrConstruction.road,
+
   lyrRoad.motorwayLinkTunnel.casing(),
   lyrRoad.trunkLinkTunnel.casing(),
   lyrRoad.primaryLinkTunnel.casing(),
@@ -408,6 +411,8 @@ americanaLayers.push(
   lyrRoadLabel.service,
   lyrRoadLabel.smallService,
 
+  lyrConstruction.label,
+
   lyrPark.label,
   lyrPark.parkLabel,
   /* The ref label shows up at lower zoom levels and when the long name doesn't fit */

src/layer/construction.js

@@ -0,0 +1,82 @@
+const majorConstruction = [
+  "match",
+  ["get", "class"],
+  ["motorway_construction", "trunk_construction"],
+];
+
+const constructionColor = [
+  "interpolate-lab",
+  ["exponential", 2],
+  ["zoom"],
+  10,
+  [...majorConstruction, "lightcoral", "lightslategray"],
+  13,
+  [...majorConstruction, "maroon", "lightslategray"],
+  15,
+  [...majorConstruction, "maroon", "slategray"],
+];
+
+const constructionFilter = [
+  "in",
+  ["get", "class"],
+  [
+    "literal",
+    [
+      "motorway_construction",
+      "trunk_construction",
+      "primary_construction",
+      "secondary_construction",
+      "tertiary_construction",
+      "minor_construction",
+      "service_construction",
+    ],
+  ],
+];
+
+export const road = {
+  id: "highway-construction",
+  type: "line",
+  source: "openmaptiles",
+  "source-layer": "transportation",
+  filter: constructionFilter,
+  minzoom: 9,
+  paint: {
+    "line-color": constructionColor,
+    "line-opacity": ["interpolate", ["exponential", 2], ["zoom"], 10, 0, 11, 1],
+    "line-blur": 0.75,
+    "line-width": 1,
+    "line-dasharray": [2.5, 1.25],
+    "line-offset": 0,
+    "line-gap-width": [
+      "interpolate",
+      ["exponential", 1.2],
+      ["zoom"],
+      11,
+      0,
+      20,
+      2,
+    ],
+  },
+};
+
+export const label = {
+  id: "highway-construction-name",
+  type: "symbol",
+  source: "openmaptiles",
+  "source-layer": "transportation_name",
+  filter: constructionFilter,
+  minzoom: 15,
+  layout: {
+    "symbol-placement": "line",
+    "text-font": ["Metropolis Light"],
+    "text-size": 12,
+    "text-field": "{name}",
+    "text-anchor": "bottom",
+  },
+  paint: {
+    "text-color": constructionColor,
+    "text-halo-color": "white",
+    "text-halo-width": 2,
+    "text-halo-blur": 0.5,
+  },
+};