Refactor the zoom-dependent line width helper

a-b-street · Jan 5, 2025 · 12e698b · 12e698b
1 parent 727fcc9
commit 12e698b
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 43 deletions.
diff --git a/web/src/RenderNeighbourhood.svelte b/web/src/RenderNeighbourhood.svelte
@@ -7,7 +7,7 @@
     hoverStateFilter,
     LineLayer,
   } from "svelte-maplibre";
-  import { layerId } from "./common";
+  import { layerId, roadLineWidth } from "./common";
   import OneWayLayer from "./OneWayLayer.svelte";
   import { roadStyle } from "./stores";
   import type { RenderNeighbourhoodOutput } from "./wasm";
@@ -70,14 +70,6 @@
       },
     };
   }
-
-  // Add some thickness
-  let outline = 2.0;
-
-  // TODO Refactor helpers for zoom interpolation. The values below are adapted
-  // from the Minor road layer in
-  // https://api.maptiler.com/maps/streets-v2/style.json, treating all
-  // interior roads as the secondary class.
 </script>
 
 <GeoJSON data={gj} generateId>
@@ -120,23 +112,7 @@
     {...layerId("interior-roads-outlines")}
     filter={["==", ["get", "kind"], "interior_road"]}
     paint={{
-      "line-width": [
-        "interpolate",
-        ["linear"],
-        ["zoom"],
-        5,
-        0.5 + outline,
-        10,
-        1 + outline,
-        12,
-        1.5 + outline,
-        14,
-        4 + outline,
-        16,
-        7 + outline,
-        20,
-        24 + outline,
-      ],
+      "line-width": roadLineWidth(2),
       "line-color": "black",
     }}
   />
@@ -145,23 +121,7 @@
     {...layerId("interior-roads")}
     filter={["==", ["get", "kind"], "interior_road"]}
     paint={{
-      "line-width": [
-        "interpolate",
-        ["linear"],
-        ["zoom"],
-        5,
-        0.5,
-        10,
-        1,
-        12,
-        1.5,
-        14,
-        4,
-        16,
-        7,
-        20,
-        24,
-      ],
+      "line-width": roadLineWidth(0),
       "line-color": roadLineColor($roadStyle, gj.maxShortcuts),
       "line-opacity": hoverStateFilter(1.0, 0.5),
     }}

diff --git a/web/src/common/index.ts b/web/src/common/index.ts
@@ -1,3 +1,5 @@
+import type { ExpressionSpecification } from "maplibre-gl";
+
 export { default as BasemapPicker } from "./BasemapPicker.svelte";
 export { default as DisableInteractiveLayers } from "./DisableInteractiveLayers.svelte";
 export { default as DotMarker } from "./DotMarker.svelte";
@@ -10,3 +12,25 @@ export { layerId } from "./zorder";
 export function gjPosition(pt: number[]): [number, number] {
   return pt as [number, number];
 }
+
+// Zoom-dependant line width, adapted from from the Minor road layer (secondary
+// road class) from https://api.maptiler.com/maps/streets-v2/style.json.
+export function roadLineWidth(extraWidth: number): ExpressionSpecification {
+  return [
+    "interpolate",
+    ["linear"],
+    ["zoom"],
+    5,
+    0.5 + extraWidth,
+    10,
+    1 + extraWidth,
+    12,
+    1.5 + extraWidth,
+    14,
+    4 + extraWidth,
+    16,
+    7 + extraWidth,
+    20,
+    24 + extraWidth,
+  ];
+}