From 12e698bbcddfe3384cb770df375f27a401d5dd04 Mon Sep 17 00:00:00 2001
From: Dustin Carlino <dabreegster@gmail.com>
Date: Sun, 5 Jan 2025 13:06:01 +0000
Subject: [PATCH] Refactor the zoom-dependent line width helper

---
 web/src/RenderNeighbourhood.svelte | 46 ++----------------------------
 web/src/common/index.ts            | 24 ++++++++++++++++
 2 files changed, 27 insertions(+), 43 deletions(-)

diff --git a/web/src/RenderNeighbourhood.svelte b/web/src/RenderNeighbourhood.svelte
index 0daf615..e961341 100644
--- 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
index 9b27428..131ee46 100644
--- 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,
+  ];
+}