From bde2dbff887a7f484812a8b386d887a9bf97139e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Minh=20Nguy=E1=BB=85n?= <mxn@1ec5.org>
Date: Sun, 24 Sep 2023 04:03:04 -0700
Subject: [PATCH] Added bridge knockout and casing

---
 src/js/util.js     | 32 +++++++++++++++++++++++++++++---
 src/layer/index.js |  4 +++-
 src/layer/road.js  | 39 ++++++++++++++++++++++++++++-----------
 3 files changed, 60 insertions(+), 15 deletions(-)

diff --git a/src/js/util.js b/src/js/util.js
index 4c14a71a8..bce6d34aa 100644
--- a/src/js/util.js
+++ b/src/js/util.js
@@ -23,10 +23,20 @@ export function layerClone(def, id) {
 //Make a clone of a layer definition, with a filter added
 export function filteredClone(def, filterStep, idSuffix) {
   var clone = layerClone(def, def.id + idSuffix);
-  if (!["all", "any"].includes(clone.filter[0])) {
-    throw new TypeError("Unlikely filter");
+  switch (clone.filter[0]) {
+    case "all":
+    case "any":
+      clone.filter.push(filterStep);
+      break;
+    case "interpolate":
+    case "interpolate-hcl":
+    case "interpolate-lab":
+    case "step":
+      clone.filter = mapRampExpression(clone.filter, (input, output) => ["all", output, filterStep]);
+      break;
+    default:
+      throw new TypeError("Unlikely filter");
   }
-  clone.filter.push(filterStep);
   return clone;
 }
 
@@ -38,3 +48,19 @@ export function zoomMultiply(arr, multiplier) {
   }
   return transformedArray;
 }
+
+/**
+ * Returns a copy of the interpolate or step expression with each output replaced with the return value of the callback.
+ *
+ * @param expression An interpolate or step expression.
+ * @param callback A function that takes the expression's input value and output expression and returns a replacement expression.
+ * @returns A copy of the interpolate or step expression with the output expressions replaced.
+ */
+export function mapRampExpression(expression, callback) {
+  let copy = [...expression];
+  let start = copy[0] === "step" ? 1 : 3;
+  for (var i = start; i + 1 < copy.length; i += 2) {
+    copy[i + 1] = callback(copy[i], copy[i + 1]);
+  }
+  return copy;
+}
diff --git a/src/layer/index.js b/src/layer/index.js
index 536b7cb68..ba083d910 100644
--- a/src/layer/index.js
+++ b/src/layer/index.js
@@ -84,6 +84,7 @@ export function build(locales) {
     lyrAeroway.taxiway,
     lyrAeroway.taxiwayArea,
 
+    lyrRoad.roadBridgeCasing,
     lyrRoad.road,
 
     lyrRail.rail.dashes(),
@@ -109,7 +110,8 @@ export function build(locales) {
   var bridgeLayers = [
     lyrRail.bridgeCasing,
 
-    //lyrRoad.road,
+    lyrRoad.roadBridgeKnockout,
+    lyrRoad.road,
 
     lyrRail.railBridge.dashes(),
     lyrRail.railServiceBridge.dashes(),
diff --git a/src/layer/road.js b/src/layer/road.js
index 7b913aec0..d26ae59b4 100644
--- a/src/layer/road.js
+++ b/src/layer/road.js
@@ -1,5 +1,6 @@
 "use strict";
 
+import * as Color from "../constants/color.js";
 import * as Util from "../js/util.js";
 
 const motorwayHue = 218;
@@ -36,14 +37,6 @@ const isConstruction = ["in", "_construction", ["get", "class"]];
 const isNotConstruction = ["!", isConstruction];
 const isUnpaved = ["==", ["get", "surface"], "unpaved"];
 
-function mapRampExpression(expression, callback) {
-  let start = expression[0] === "step" ? 1 : 3;
-  for (var i = start; i + 1 < expression.length; i += 2) {
-    expression[i + 1] = callback(expression[i], expression[i + 1]);
-  }
-  return expression;
-}
-
 const roadFilter = [
   "step",
   ["zoom"],
@@ -62,7 +55,7 @@ export const road = {
   type: "line",
   source: "openmaptiles",
   "source-layer": "transportation",
-  filter: mapRampExpression([...roadFilter], (input, output) => ["all", output, ["!=", ["get", "brunnel"], "tunnel"]]),
+  filter: Util.mapRampExpression(roadFilter, (input, output) => ["all", output, ["!=", ["get", "brunnel"], "tunnel"]]),
   layout: {
     "line-cap": "butt",
     "line-join": "round",
@@ -168,15 +161,39 @@ export const road = {
 export const roadTunnel = {
   ...road,
   id: "road-tunnel",
-  filter: mapRampExpression([...roadFilter], (input, output) => ["all", output, ["==", ["get", "brunnel"], "tunnel"]]),
+  filter: Util.mapRampExpression(roadFilter, (input, output) => ["all", output, ["==", ["get", "brunnel"], "tunnel"]]),
   paint: {
     ...road.paint,
     "line-width": 1,
-    "line-gap-width": mapRampExpression([...road.paint["line-width"]], (input, output) => ["-", output, 1]),
+    "line-gap-width": Util.mapRampExpression(road.paint["line-width"], (input, output) => ["-", output, 1]),
     "line-dasharray": [5, 5],
   },
 };
 
+export const roadBridgeKnockout = {
+  ...road,
+  id: "road-bridge-knockout",
+  filter: Util.mapRampExpression(roadFilter, (input, output) => ["all", output, ["==", ["get", "brunnel"], "bridge"]]),
+  paint: {
+    "line-color": Color.backgroundFill,
+    "line-width": Util.mapRampExpression(road.paint["line-width"], (input, output) => ["*", output, 2]),
+    "line-gap-width": 0,
+    "line-blur": 0,
+  }
+};
+
+export const roadBridgeCasing = {
+  ...road,
+  id: "road-bridge-casing",
+  filter: Util.mapRampExpression(roadFilter, (input, output) => ["all", output, ["==", ["get", "brunnel"], "bridge"]]),
+  paint: {
+    "line-color": "#9c9c9c",
+    "line-width": 0.5,
+    "line-gap-width": roadBridgeKnockout.paint["line-width"],
+    "line-blur": 0,
+  }
+};
+
 export const legendEntries = [
   {
     description: "Controlled-access highway",