Widen highways at very high zoom

osm-americana · Dec 31, 2024 · fbaccc4 · fbaccc4
1 parent 319154b
commit fbaccc4
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 7 deletions.
diff --git a/src/layer/road.js b/src/layer/road.js
@@ -210,8 +210,10 @@ const roadFillWidth = [
     [...classSelector, "motorway", 3.2, [...expresswaySelector, 3.5, 4]],
     widthFactor,
   ],
+  16,
+  ["*", [...expresswaySelector, 8, 9], widthFactor],
   20,
-  ["*", [...expresswaySelector, 16, 18], widthFactor],
+  ["*", [...expresswaySelector, 64, 72], widthFactor],
 ];
 
 const roadCasingWidth = [
@@ -229,8 +231,10 @@ const roadCasingWidth = [
     [...classSelector, "motorway", 5, [...expresswaySelector, 7, 5]],
     widthFactor,
   ],
+  16,
+  ["*", [...expresswaySelector, 14, 11], widthFactor],
   20,
-  ["*", [...expresswaySelector, 28, 22], widthFactor],
+  ["*", [...expresswaySelector, 112, 88], widthFactor],
 ];
 
 const roadCasingColorTunnel = [

diff --git a/src/layer/transportation_label.js b/src/layer/transportation_label.js
@@ -7,8 +7,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 motorwayToTertiary = [
+  ...motorwayToPrimary,
+  "secondary",
+  "tertiary",
+  "busway",
+];
+const motorwayToMinor = [...motorwayToTertiary, "minor"];
 const motorwayToService = [...motorwayToMinor, "service"];
 
 const majorConstruction = ["motorway_construction", "trunk_construction"];
@@ -42,6 +47,31 @@ export const label = {
       Color.waterFill,
       Color.backgroundFill,
     ],
+    "text-halo-color": [
+      "step",
+      ["zoom"],
+      [...classSelector, "ferry", Color.waterFill, Color.backgroundFill],
+      16,
+      [
+        ...classSelector,
+        "ferry",
+        Color.waterFill,
+        motorwayToTrunk,
+        "white",
+        Color.backgroundFill,
+      ],
+      17,
+      [
+        ...classSelector,
+        "ferry",
+        Color.waterFill,
+        motorwayToTertiary,
+        "white",
+        Color.backgroundFill,
+      ],
+      18,
+      [...classSelector, "ferry", Color.waterFill, "white"],
+    ],
     "text-halo-blur": 0.5,
     "text-halo-width": 2,
     "text-opacity": [
@@ -53,7 +83,7 @@ export const label = {
       11,
       [...classSelector, motorwayToPrimary, 1, "ferry", 1, 0],
       12,
-      [...classSelector, motorwayToSecondary, 1, ["ferry", "aerialway"], 1, 0],
+      [...classSelector, motorwayToTertiary, 1, ["ferry", "aerialway"], 1, 0],
       13,
       [...classSelector, motorwayToMinor, 1, ["ferry", "aerialway"], 1, 0],
       14,
@@ -93,7 +123,9 @@ export const label = {
       16,
       [...classSelector, motorwayToTrunk, 10, 12],
       17,
-      [...classSelector, motorwayToSecondary, 10, 12],
+      [...classSelector, ["secondary", "tertiary", "busway"], 10, 12],
+      18,
+      [...classSelector, ["ferry", "aerialway", ...motorwayToTertiary], 12, 10],
     ],
     "text-anchor": [
       "step",
@@ -113,10 +145,12 @@ export const label = {
         ...classSelector,
         "aerialway",
         "center",
-        motorwayToSecondary,
+        motorwayToTertiary,
         "center",
         "bottom",
       ],
+      18,
+      "center",
     ],
     "text-offset": [
       "interpolate",