Adjust line width based on zoom, mimicking maptiler styling

Author: dabreegster

web/src/RenderNeighbourhood.svelte

@@ -65,6 +65,14 @@
       },
     };
   }
+
+  // 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>
@@ -88,7 +96,23 @@
     {...layerId("interior-roads-outlines")}
     filter={["==", ["get", "kind"], "interior_road"]}
     paint={{
-      "line-width": 12,
+      "line-width": [
+        "interpolate",
+        ["linear", 2],
+        ["zoom"],
+        5,
+        0.5 + outline,
+        10,
+        1 + outline,
+        12,
+        1.5 + outline,
+        14,
+        4 + outline,
+        16,
+        7 + outline,
+        20,
+        24 + outline,
+      ],
       "line-color": "black",
     }}
   />
@@ -97,7 +121,23 @@
     {...layerId("interior-roads")}
     filter={["==", ["get", "kind"], "interior_road"]}
     paint={{
-      "line-width": 10,
+      "line-width": [
+        "interpolate",
+        ["linear", 2],
+        ["zoom"],
+        5,
+        0.5,
+        10,
+        1,
+        12,
+        1.5,
+        14,
+        4,
+        16,
+        7,
+        20,
+        24,
+      ],
       "line-color": lineColor,
       "line-opacity": hoverStateFilter(1.0, 0.5),
     }}