Try using line width to show shortcuts. #59

It's a start, but leaving disabled
a-b-street · Jan 5, 2025 · a5ce0b1 · a5ce0b1
1 parent f438760
commit a5ce0b1
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 4 deletions.
diff --git a/web/src/RenderNeighbourhood.svelte b/web/src/RenderNeighbourhood.svelte
@@ -9,7 +9,7 @@
   } from "svelte-maplibre";
   import { layerId, roadLineWidth } from "./common";
   import OneWayLayer from "./OneWayLayer.svelte";
-  import { roadStyle } from "./stores";
+  import { roadStyle, thickRoadsForShortcuts } from "./stores";
   import type { RenderNeighbourhoodOutput } from "./wasm";
 
   export let gj: RenderNeighbourhoodOutput;
@@ -45,6 +45,26 @@
     );
   }
 
+  function lineWidth(
+    thickRoadsForShortcuts: boolean,
+    maxShortcuts: number,
+    extraWidth: number,
+  ): ExpressionSpecification {
+    if (!thickRoadsForShortcuts || maxShortcuts <= 2) {
+      return roadLineWidth(extraWidth);
+    }
+    // TODO It'd still be nice to depend on zoom here
+    return [
+      "interpolate",
+      ["linear"],
+      ["get", "shortcuts"],
+      0,
+      5 + extraWidth,
+      maxShortcuts,
+      25 + extraWidth,
+    ];
+  }
+
   function invertBoundary(gj: RenderNeighbourhoodOutput): Feature<Polygon> {
     // @ts-expect-error TS can't figure out that we're narrowing the case here
     let boundary: Feature<Polygon> = gj.features.find(
@@ -112,7 +132,7 @@
     {...layerId("interior-roads-outlines")}
     filter={["==", ["get", "kind"], "interior_road"]}
     paint={{
-      "line-width": roadLineWidth(2),
+      "line-width": lineWidth($thickRoadsForShortcuts, gj.maxShortcuts, 0),
       "line-color": "black",
     }}
   />
@@ -121,7 +141,7 @@
     {...layerId("interior-roads")}
     filter={["==", ["get", "kind"], "interior_road"]}
     paint={{
-      "line-width": roadLineWidth(0),
+      "line-width": lineWidth($thickRoadsForShortcuts, gj.maxShortcuts, 0),
       "line-color": roadLineColor($roadStyle, gj.maxShortcuts),
       "line-opacity": hoverStateFilter(1.0, 0.5),
     }}

diff --git a/web/src/Settings.svelte b/web/src/Settings.svelte
@@ -2,7 +2,7 @@
   import { Modal } from "svelte-utils";
   import icon from "../assets/settings.svg?url";
   import { BasemapPicker } from "./common";
-  import { roadStyle } from "./stores";
+  import { roadStyle, thickRoadsForShortcuts } from "./stores";
 
   let show = false;
 </script>
@@ -25,6 +25,11 @@
       </select>
     </label>
 
+    <label>
+      <input type="checkbox" bind:checked={$thickRoadsForShortcuts} />
+      Road thickness depends on shortcuts
+    </label>
+
     <center><button on:click={() => (show = false)}>Confirm</button></center>
   </Modal>
 {/if}
diff --git a/web/src/stores.ts b/web/src/stores.ts
@@ -65,6 +65,7 @@ export let filterType: Writable<string> = writable("walk_cycle_only");
 export let animateShortcuts = writable(false);
 export let editPerimeterRoads = writable(false);
 export let roadStyle: Writable<"shortcuts" | "cells"> = writable("shortcuts");
+export let thickRoadsForShortcuts = writable(false);
 
 export function autosave() {
   let key = get(projectName);