change bridge color and add guardrail

osm-americana · Sep 27, 2023 · dad7da7 · dad7da7
1 parent e8c2a9e
commit dad7da7
Show file tree

Hide file tree

Showing 5 changed files with 119 additions and 26 deletions.
diff --git a/.github/workflows/test-build-mac.yml b/.github/workflows/test-build-mac.yml
@@ -10,9 +10,9 @@ jobs:
     steps:
       - name: Checkout 🛎️
         uses: actions/checkout@v3
-# Node v18.17.0, introduced July 18, 2023, introduces an error in unicode processing that breaks test cases on Ubuntu.
-# See PR #905 and #908 for more details.
-# If this bug is resolved in node, these lines can revert to 18.x rather than 18.16.0.
+      # Node v18.17.0, introduced July 18, 2023, introduces an error in unicode processing that breaks test cases on Ubuntu.
+      # See PR #905 and #908 for more details.
+      # If this bug is resolved in node, these lines can revert to 18.x rather than 18.16.0.
       - name: Use Node.js 18.16.1
         uses: actions/setup-node@v3
         with:

diff --git a/.github/workflows/test-build-ubuntu.yml b/.github/workflows/test-build-ubuntu.yml
@@ -10,9 +10,9 @@ jobs:
     steps:
       - name: Checkout 🛎️
         uses: actions/checkout@v3
-# Node v18.17.0, introduced July 18, 2023, introduces an error in unicode processing that breaks test cases on Ubuntu.
-# See PR #905 and #908 for more details.
-# If this bug is resolved in node, these lines can revert to 18.x rather than 18.16.1.
+      # Node v18.17.0, introduced July 18, 2023, introduces an error in unicode processing that breaks test cases on Ubuntu.
+      # See PR #905 and #908 for more details.
+      # If this bug is resolved in node, these lines can revert to 18.x rather than 18.16.1.
       - name: Use Node.js 18.16.1
         uses: actions/setup-node@v3
         with:

diff --git a/src/constants/color.js b/src/constants/color.js
@@ -1,7 +1,8 @@
 export const backgroundFill = `hsl(30, 44%, 96%)`;
 export const backgroundFillTranslucent = `hsla(30, 44%, 96%, 0.8)`;
 
-export const bridgeFill = "hsl(0, 20%, 80%)";
+export const bridgeFill = "hsl(30, 44%, 94%)";
+export const bridgeBackgroundFill = "hsl(30, 44%, 26%)";
 
 export const waterFill = "hsl(211, 50%, 85%)";
 export const waterFillTranslucent = "hsla(211, 50%, 85%, 0.5)";

diff --git a/src/layer/bridge.js b/src/layer/bridge.js
@@ -5,7 +5,7 @@ import * as Util from "../js/util.js";
 
 // Bridge areas
 export const bridge = {
-  type: "fill-extrusion",
+  type: "fill",
   source: "openmaptiles",
   "source-layer": "transportation",
   id: "bridge",
@@ -14,9 +14,9 @@ export const bridge = {
     visibility: "visible",
   },
   paint: {
-    "fill-extrusion-color": Color.bridgeFill,
-    "fill-extrusion-height": ["+", 3, ["coalesce", ["get", "layer"], 0]],
-    "fill-extrusion-opacity": 0.6,
+    "fill-color": Color.bridgeFill,
+    "fill-outline-color": Color.bridgeBackgroundFill,
+    "fill-opacity": ["interpolate", ["linear"], ["zoom"], 16, 1, 19, 0.8],
   },
   filter: ["all", ["==", ["get", "class"], "bridge"]],
 };
@@ -35,57 +35,148 @@ export const bridgeCasing = {
   },
   paint: {
     "line-color": Color.bridgeFill,
-    "line-opacity": 0.8,
     "line-width": Util.zoomInterpolate([
       "match",
       ["get", "class"],
       ["rail", "transit"],
-      ["match", ["get", "service"], ["siding", "spur", "yard"], 10, 14],
+      ["match", ["get", "service"], ["siding", "spur", "yard"], 12, 16],
       "motorway",
-      ["match", ["get", "ramp"], 1, 18, 28],
+      ["match", ["get", "ramp"], 1, 19, 29],
       "trunk",
       [
         "match",
         ["get", "expressway"],
         1,
-        34,
-        ["match", ["get", "ramp"], 1, 16, 28],
+        35,
+        ["match", ["get", "ramp"], 1, 17, 29],
       ],
       "primary",
       [
         "match",
         ["get", "expressway"],
         1,
-        32,
-        ["match", ["get", "ramp"], 1, 15, 24],
+        33,
+        ["match", ["get", "ramp"], 1, 16, 26],
       ],
       "secondary",
       [
         "match",
         ["get", "expressway"],
         1,
-        26,
-        ["match", ["get", "ramp"], 1, 14, 20],
+        27,
+        ["match", ["get", "ramp"], 1, 15, 21],
       ],
       ["tertiary", "busway", "bus_guideway"],
       [
         "match",
         ["get", "expressway"],
         1,
-        20,
-        ["match", ["get", "ramp"], 1, 13, 18],
+        21,
+        ["match", ["get", "ramp"], 1, 14, 19],
       ],
       "minor",
-      14,
+      15,
       "service",
       [
         "match",
         ["get", "service"],
         ["alley", "driveway", "drive-through", "parking_aisle"],
-        9,
-        11,
+        10,
+        12,
       ],
-      20,
+      0,
+    ]),
+  },
+  filter: [
+    "all",
+    ["==", ["get", "brunnel"], "bridge"],
+    [
+      "in",
+      ["get", "class"],
+      [
+        "literal",
+        [
+          "motorway",
+          "trunk",
+          "primary",
+          "secondary",
+          "tertiary",
+          "busway",
+          "bus_guideway",
+          "minor",
+          "service",
+          "rail",
+          "transit",
+        ],
+      ],
+    ],
+  ],
+};
+
+export const bridgeCasingBackground = {
+  type: "line",
+  source: "openmaptiles",
+  "source-layer": "transportation",
+  id: "bridge_casing-background",
+  minzoom: 13,
+  layout: {
+    "line-cap": "butt",
+    "line-join": "bevel",
+    visibility: "visible",
+  },
+  paint: {
+    "line-color": Color.bridgeBackgroundFill,
+    "line-opacity": ["interpolate", ["linear"], ["zoom"], 16, 1, 19, 0.4],
+    "line-width": Util.zoomInterpolate([
+      "match",
+      ["get", "class"],
+      ["rail", "transit"],
+      ["match", ["get", "service"], ["siding", "spur", "yard"], 14, 18],
+      "motorway",
+      ["match", ["get", "ramp"], 1, 21, 31],
+      "trunk",
+      [
+        "match",
+        ["get", "expressway"],
+        1,
+        37,
+        ["match", ["get", "ramp"], 1, 19, 31],
+      ],
+      "primary",
+      [
+        "match",
+        ["get", "expressway"],
+        1,
+        35,
+        ["match", ["get", "ramp"], 1, 18, 28],
+      ],
+      "secondary",
+      [
+        "match",
+        ["get", "expressway"],
+        1,
+        29,
+        ["match", ["get", "ramp"], 1, 17, 23],
+      ],
+      ["tertiary", "busway", "bus_guideway"],
+      [
+        "match",
+        ["get", "expressway"],
+        1,
+        23,
+        ["match", ["get", "ramp"], 1, 16, 21],
+      ],
+      "minor",
+      17,
+      "service",
+      [
+        "match",
+        ["get", "service"],
+        ["alley", "driveway", "drive-through", "parking_aisle"],
+        12,
+        14,
+      ],
+      2,
     ]),
   },
   filter: [

diff --git a/src/layer/index.js b/src/layer/index.js
@@ -144,6 +144,7 @@ export function build(locales) {
   layers.push(lyrBuilding.building);
 
   var bridgeLayers = [
+    lyrBridge.bridgeCasingBackground,
     lyrBridge.bridge,
     lyrBridge.bridgeCasing,