Use a real color scheme and add a legend

route_info/src/lib.rs

@@ -84,7 +84,7 @@ impl RouteInfo {
     }
 
     /// Given the JSON waypoints array produced by route-snapper, generate GeoJSON LineStrings,
-    /// covering the entire route, each with a `speed_limit` property (in km/h) when that data is
+    /// covering the entire route, each with a `speed_limit` property (in mph) when that data is
     /// known.
     #[wasm_bindgen(js_name = speedLimitForRoute)]
     pub fn speed_limit_for_route(&self, raw_waypoints: JsValue) -> Result<String, JsValue> {
@@ -122,7 +122,7 @@ impl RouteInfo {
                                 );
                                 feature.set_property("type", "snapped");
                                 if let Some(speed) = speed_limit {
-                                    feature.set_property("speed_limit", to_kmph(speed));
+                                    feature.set_property("speed_limit", speed.to_miles_per_hour());
                                 }
                                 output.push(feature);
                             }
@@ -139,7 +139,7 @@ impl RouteInfo {
                         );
                         feature.set_property("type", "snapped");
                         if let Some(speed) = speed_limit {
-                            feature.set_property("speed_limit", to_kmph(speed));
+                            feature.set_property("speed_limit", speed.to_miles_per_hour());
                         }
                         output.push(feature);
                     }
@@ -192,8 +192,3 @@ impl Waypoint {
         }
     }
 }
-
-// TODO Move to geom
-fn to_kmph(s: Speed) -> f64 {
-    3.6 * s.inner_meters_per_second()
-}

src/lib/forms/DiscreteLegend.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  export let colors: string[];
+  export let steps: number[];
+
+  if (colors.length != steps.length + 1) {
+    throw new Error(`There must be one more color than step`);
+  }
+
+  let ranges = [];
+  let low = 0;
+  for (let high of steps) {
+    ranges.push(`${low}-${high}`);
+    low = high;
+  }
+  ranges.push(`>${low}`);
+</script>
+
+<table>
+  <tr>
+    {#each colors as color}
+      <td style:background-color={color} />
+    {/each}
+  </tr>
+  <tr>
+    {#each ranges as range}
+      <td>{range}</td>
+    {/each}
+  </tr>
+</table>
+
+<style>
+  table,
+  tr {
+    width: 100%;
+  }
+
+  td {
+    height: 30px;
+    text-align: center;
+  }
+</style>

src/lib/forms/FormV1.svelte

@@ -69,7 +69,7 @@
   Length: {prettyPrintMeters(length_meters)}
   <br /><button type="button" on:click={() => autoFillDetails()}
     >Auto-fill details</button
-  >
+  ><br />
   <RouteInfoLayers {routeInfo} {id} />
 {/if}
 

src/lib/forms/RouteInfoLayers.svelte

@@ -11,27 +11,32 @@
     GeoJSONSource,
   } from "maplibre-gl";
   import type { Feature } from "../../types";
-  import { colors, lineWidth } from "../../colors";
+  import { lineWidth } from "../../colors";
   import { map, gjScheme } from "../../stores";
   import { type Remote } from "comlink";
   import { type RouteInfo } from "../../worker";
   import Tooltips from "./Tooltips.svelte";
+  import DiscreteLegend from "./DiscreteLegend.svelte";
 
   export let routeInfo: Remote<RouteInfo>;
   export let id: number;
 
   let layer: "none" | "speed limits" = "none";
+  let colors = ["#00AB4D", "#8ECA4D", "#F7BB00", "#BB0000"];
+  let speedLimitSteps = [30, 40, 50];
 
   let source = "speed-limits";
   // TODO Also draw a quantized legend
   const colorBySpeedLimit: DataDrivenPropertyValueSpecification<string> = [
-    "match",
-    ["get", "type"],
-    "snapped",
-    "red",
-    "free",
-    "blue",
-    "white",
+    "step",
+    ["get", "speed_limit"],
+    colors[0],
+    speedLimitSteps[0],
+    colors[1],
+    speedLimitSteps[1],
+    colors[2],
+    speedLimitSteps[2],
+    colors[3],
   ];
   // NOTE! There's only ever one source and layer with this name. This component
   // (and the source and layer) will get destroyed frequently, but even if not,
@@ -40,7 +45,6 @@
     type: "geojson",
     data: emptyGeojson(),
   });
-  // TODO Also tooltips on each segment?
   overwriteLayer($map, {
     id: "speed-limits",
     source,
@@ -50,7 +54,7 @@
   // TODO Disable the button until RouteInfo is loaded and ready?
   async function changeLayer() {
     if (layer == "none") {
-      // TODO Hide
+      // TODO We could toggle visibility, instead of recalculating everytime
       ($map.getSource(source) as GeoJSONSource).setData(emptyGeojson());
       return;
     }
@@ -67,6 +71,12 @@
       window.alert(`Couldn't calculate speed limits for route: ${e}`);
     }
   }
+
+  function tooltip(props: { [name: string]: any }): string {
+    return props.speed_limit
+      ? `${Math.round(props.speed_limit)} mph`
+      : "Unknown";
+  }
 </script>
 
 <label>
@@ -76,5 +86,8 @@
     <option value="speed limits">Speed limits</option>
   </select>
 </label>
+{#if layer == "speed limits"}
+  <DiscreteLegend {colors} steps={speedLimitSteps} />
+{/if}
 
-<Tooltips layer="speed-limits" />
+<Tooltips layer="speed-limits" contents={tooltip} />

src/lib/forms/Tooltips.svelte

@@ -5,6 +5,7 @@
   import { onDestroy } from "svelte";
 
   export let layer: string;
+  export let contents: (props: { [name: string]: any }) => string;
 
   let popup = new Popup({
     closeButton: false,
@@ -24,7 +25,10 @@
       layers: [layer],
     });
     if (results.length > 0) {
-      popup.setLngLat(e.lngLat).setHTML(contents(results[0])).addTo($map);
+      popup
+        .setLngLat(e.lngLat)
+        .setHTML(contents(results[0].properties))
+        .addTo($map);
     } else {
       popup.remove();
     }
@@ -33,8 +37,4 @@
   function onMouseOut() {
     popup.remove();
   }
-
-  function contents(f) {
-    return `<pre>${JSON.stringify(f.properties)}</pre>`;
-  }
 </script>

src/maplibre_helpers.ts

@@ -166,6 +166,8 @@ const layerZorder = [
 
   "draw-split-route",
 
+  "speed-limits",
+
   // Draw most things beneath text road labels. This is the only layer in this
   // list generated by the MapTiler basemap we use.
   "road_label",