Make isochrone time be configurable too

backend/src/isochrone.rs

@@ -16,11 +16,9 @@ pub fn calculate(
     contours: bool,
     public_transit: bool,
     start_time: NaiveTime,
+    limit: Duration,
     mut timer: Timer,
 ) -> Result<String> {
-    // 15 minutes
-    let limit = Duration::from_secs(15 * 60);
-
     timer.step("get_costs");
     let cost_per_road = graph.get_costs(
         vec![graph.snap_to_road(req, mode).intersection],

backend/src/lib.rs

@@ -114,6 +114,7 @@ impl MapModel {
             req.contours,
             req.mode == "transit",
             NaiveTime::parse_from_str(&req.start_time, "%H:%M").map_err(err_to_js)?,
+            Duration::from_secs(req.max_seconds),
             Timer::new("isochrone request", None),
         )
         .map_err(err_to_js)
@@ -230,6 +231,7 @@ pub struct IsochroneRequest {
     mode: String,
     contours: bool,
     start_time: String,
+    max_seconds: u64,
 }
 
 #[derive(Deserialize)]

web/src/IsochroneMode.svelte

@@ -12,6 +12,7 @@
     startTime,
     type Amenity,
     describeAmenity,
+    isochroneMins,
   } from "./stores";
   import { SequentialLegend } from "svelte-utils";
   import { Popup, makeColorRamp, isLine, isPolygon } from "svelte-utils/map";
@@ -39,6 +40,7 @@
     _y: TravelMode,
     _z: boolean,
     _t: string,
+    _im: number,
   ) {
     if (start) {
       try {
@@ -47,6 +49,7 @@
           mode: $travelMode,
           contours,
           startTime: $startTime,
+          maxSeconds: 60 * $isochroneMins,
         });
         err = "";
       } catch (err: any) {
@@ -55,7 +58,7 @@
       }
     }
   }
-  $: updateIsochrone(start, $travelMode, contours, $startTime);
+  $: updateIsochrone(start, $travelMode, contours, $startTime, $isochroneMins);
 
   async function updateRoute(
     x: { lng: number; lat: number } | null,
@@ -87,8 +90,9 @@
     return a + pct * (b - a);
   }
 
-  let limitsMinutes = [0, 3, 6, 9, 12, 15];
-  let limitsSeconds = limitsMinutes.map((x) => x * 60);
+  $: limits = Array.from(Array(6).keys()).map(
+    (i) => (($isochroneMins * 60) / (6 - 1)) * i,
+  );
 </script>
 
 <SplitComponent>
@@ -122,7 +126,11 @@
 
     <label><input type="checkbox" bind:checked={contours} />Contours</label>
 
-    <SequentialLegend {colorScale} limits={limitsMinutes} />
+    <label
+      >Minutes away
+      <input type="number" bind:value={$isochroneMins} min="1" max="30" />
+    </label>
+    <SequentialLegend {colorScale} limits={limits.map((l) => l / 60)} />
     {#if err}
       <p>{err}</p>
     {/if}
@@ -145,7 +153,7 @@
             "line-width": 2,
             "line-color": makeColorRamp(
               ["get", "cost_seconds"],
-              limitsSeconds,
+              limits,
               colorScale,
             ),
             "line-opacity": 0.5,
@@ -163,7 +171,7 @@
           paint={{
             "fill-color": makeColorRamp(
               ["get", "min_seconds"],
-              limitsSeconds,
+              limits,
               colorScale,
             ),
             "fill-opacity": 0.5,

web/src/RouteMode.svelte

@@ -26,7 +26,7 @@
     constructMatchExpression,
     makeColorRamp,
   } from "svelte-utils/map";
-  import { notNull, PropertiesTable } from "svelte-utils";
+  import { notNull, SequentialLegend, PropertiesTable } from "svelte-utils";
   import type { FeatureCollection } from "geojson";
   import { colorScale } from "./colors";
 
@@ -137,9 +137,12 @@
 
     <label>
       <input type="checkbox" bind:checked={$showRouteBuffer} />
-      Buffer around route
+      Buffer around route (minutes)
       <input type="number" bind:value={$bufferMins} min="1" max="30" />
     </label>
+    {#if $showRouteBuffer}
+      <SequentialLegend {colorScale} limits={limits.map((l) => l / 60)} />
+    {/if}
 
     <p>
       Move the <b>A</b> and <b>B</b> pins to find a route. (Hint: right-click to

web/src/stores.ts

@@ -42,6 +42,7 @@ export let routeB: Writable<{ lng: number; lat: number } | null> =
   writable(null);
 export let useHeuristic = writable(true);
 export let showRouteBuffer = writable(false);
+export let isochroneMins = writable(15);
 export let bufferMins = writable(5);
 
 // TODO Does this need to be a store?

web/src/worker.ts

@@ -107,6 +107,7 @@ export class Backend {
     mode: TravelMode;
     contours: boolean;
     startTime: string;
+    maxSeconds: number;
   }): FeatureCollection {
     if (!this.inner) {
       throw new Error("Backend used without a file loaded");
@@ -119,6 +120,7 @@ export class Backend {
         mode: req.mode,
         contours: req.contours,
         start_time: req.startTime,
+        max_seconds: req.maxSeconds,
       }),
     );
   }