diff --git a/web/src/RenderNeighbourhood.svelte b/web/src/RenderNeighbourhood.svelte index e961341..d5eb990 100644 --- 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 { // @ts-expect-error TS can't figure out that we're narrowing the case here let boundary: Feature = 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 index 0b2567e..aab6667 100644 --- 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; @@ -25,6 +25,11 @@ + +
{/if} diff --git a/web/src/stores.ts b/web/src/stores.ts index beea772..c53453f 100644 --- a/web/src/stores.ts +++ b/web/src/stores.ts @@ -65,6 +65,7 @@ export let filterType: Writable = 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);