Make the route buffer time configurable

a-b-street · Aug 16, 2024 · 952e1e8 · 952e1e8
1 parent d0bf604
commit 952e1e8
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 16 deletions.
diff --git a/web/src/RouteMode.svelte b/web/src/RouteMode.svelte
@@ -18,6 +18,8 @@
     useHeuristic,
     routeA,
     routeB,
+    bufferMins,
+    showRouteBuffer,
   } from "./stores";
   import {
     Popup,
@@ -29,7 +31,6 @@
   import { colorScale } from "./colors";
 
   let gj: FeatureCollection | null = null;
-  let showBuffer = false;
   let err = "";
 
   async function update(
@@ -38,17 +39,18 @@
     mode: TravelMode,
     _z: boolean,
     _t: string,
-    showBuffer: boolean,
+    _b: number,
+    _sb: boolean,
   ) {
     try {
-      if (showBuffer) {
+      if ($showRouteBuffer) {
         gj = await $backend!.bufferRoute({
           start: $routeA!,
           end: [$routeB!.lng, $routeB!.lat],
           mode: $travelMode,
           useHeuristic: $useHeuristic,
           startTime: $startTime,
-          maxSeconds: 5 * 60,
+          maxSeconds: $bufferMins * 60,
         });
       } else {
         gj = await $backend!.route({
@@ -72,7 +74,8 @@
     $travelMode,
     $useHeuristic,
     $startTime,
-    showBuffer,
+    $bufferMins,
+    $showRouteBuffer,
   );
 
   function onRightClick(e: CustomEvent<MapMouseEvent>) {
@@ -102,8 +105,9 @@
     }
   }
 
-  let limitsMinutes = [0, 1, 2, 3, 4, 5];
-  let limitsSeconds = limitsMinutes.map((x) => x * 60);
+  $: limits = Array.from(Array(6).keys()).map(
+    (i) => (($bufferMins * 60) / (6 - 1)) * i,
+  );
 </script>
 
 <SplitComponent>
@@ -132,8 +136,9 @@
     </label>
 
     <label>
-      <input type="checkbox" bind:checked={showBuffer} />
-      Buffer 5 minutes around route (same mode)
+      <input type="checkbox" bind:checked={$showRouteBuffer} />
+      Buffer around route
+      <input type="number" bind:value={$bufferMins} min="1" max="30" />
     </label>
 
     <p>
@@ -148,7 +153,7 @@
         >Watch how this route was found (PT only)</button
       >
 
-      {#if !showBuffer}
+      {#if !$showRouteBuffer}
         <ol>
           {#each gj.features as f}
             {@const props = notNull(f.properties)}
@@ -177,19 +182,15 @@
 
     {#if gj}
       <GeoJSON data={gj} generateId>
-        {#if showBuffer}
+        {#if $showRouteBuffer}
           <LineLayer
             paint={{
               "line-width": ["case", ["==", ["get", "kind"], "route"], 20, 3],
               "line-color": [
                 "case",
                 ["==", ["get", "kind"], "route"],
                 "red",
-                makeColorRamp(
-                  ["get", "cost_seconds"],
-                  limitsSeconds,
-                  colorScale,
-                ),
+                makeColorRamp(["get", "cost_seconds"], limits, colorScale),
               ],
               "line-opacity": 0.5,
             }}

diff --git a/web/src/stores.ts b/web/src/stores.ts
@@ -41,6 +41,8 @@ export let routeA: Writable<{ lng: number; lat: number } | null> =
 export let routeB: Writable<{ lng: number; lat: number } | null> =
   writable(null);
 export let useHeuristic = writable(true);
+export let showRouteBuffer = writable(false);
+export let bufferMins = writable(5);
 
 // TODO Does this need to be a store?
 export let backend: Writable<Comlink.Remote<Backend> | null> = writable(null);