From df0333ec58433a94ea76a750d20f5f8a4c124491 Mon Sep 17 00:00:00 2001
From: Dustin Carlino <dabreegster@gmail.com>
Date: Fri, 23 Feb 2024 17:13:27 +0000
Subject: [PATCH] Visualize steepness. #18

Adapted from https://github.com/acteng/atip/pull/475
---
 viewer/assets/chevron.png         | Bin 0 -> 212 bytes
 viewer/src/App.svelte             |   3 +
 viewer/src/Layers.svelte          |  45 ++++++++++++-
 viewer/src/Loader.svelte          |   2 +-
 viewer/src/PropertiesTable.svelte |   2 +-
 viewer/src/SidebarControls.svelte | 102 +++++++++++++++++++-----------
 viewer/src/common.ts              |  19 +++---
 viewer/src/stores.ts              |   1 +
 8 files changed, 122 insertions(+), 52 deletions(-)
 create mode 100644 viewer/assets/chevron.png

diff --git a/viewer/assets/chevron.png b/viewer/assets/chevron.png
new file mode 100644
index 0000000000000000000000000000000000000000..c6087b94e0641cd646577a613fb30424382d40a3
GIT binary patch
literal 212
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjvproLLp;3SPPxe2puppj$ZUR*
z_X=-`(OnPs3BEE1U$@H(O^%yAA%p4U--EVQt;Yf?jvo5Akm*W`y<lK_w%!Gvxv!>f
z=JjE<KKJDUV{aG-b4G&Jglo)+3_)9@4>8>l;6A|mk-==jlT_7=3$yYVJ>-3!1sQP{
z%-qbd-I9BUz0}mof0t)=ELo^+lF3^ut;}=4s!r~=wnOjx|AMhQtCS>nY~{NGbS8tR
LtDnm{r-UW|?_N$7

literal 0
HcmV?d00001

diff --git a/viewer/src/App.svelte b/viewer/src/App.svelte
index 493cac7..63e50ce 100644
--- a/viewer/src/App.svelte
+++ b/viewer/src/App.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import chevron from "../assets/chevron.png?url";
   import init from "lts";
   import type { Map as MapType } from "maplibre-gl";
   import { FileSource, PMTiles } from "pmtiles";
@@ -85,6 +86,8 @@
       standardControls
       hash
       bind:map
+      on:error={(e) => console.log(e.detail)}
+      images={[{ id: "chevron", url: chevron }]}
     >
       {#if outputMetadata}
         {#key outputMetadata}
diff --git a/viewer/src/Layers.svelte b/viewer/src/Layers.svelte
index c13cbb5..4934917 100644
--- a/viewer/src/Layers.svelte
+++ b/viewer/src/Layers.svelte
@@ -8,11 +8,24 @@
     hoverStateFilter,
     LineLayer,
     type LayerClickInfo,
+    SymbolLayer,
   } from "svelte-maplibre";
-  import { colorByLts, colors, type LayersControls } from "./common";
+  import {
+    slopeLimits,
+    slopeColors,
+    colorByLts,
+    colors,
+    type LayersControls,
+    makeColorRamp,
+  } from "./common";
   import Popup from "./Popup.svelte";
   import PropertiesTable from "./PropertiesTable.svelte";
-  import { showDestinations, showOrigins, showRouteNetwork } from "./stores";
+  import {
+    showSlope,
+    showDestinations,
+    showOrigins,
+    showRouteNetwork,
+  } from "./stores";
 
   export let sourceOverride = {};
   export let controls: LayersControls;
@@ -49,6 +62,12 @@
     let id = e.detail.features[0].properties!.way;
     window.open(`http://openstreetmap.org/way/${id}`, "_blank");
   }
+
+  let colorBySlope = makeColorRamp(
+    ["abs", ["get", "slope"]],
+    slopeLimits,
+    slopeColors,
+  );
 </script>
 
 <LineLayer
@@ -59,7 +78,7 @@
   hoverCursor={enableControls ? "pointer" : undefined}
   paint={{
     "line-width": lineWidth,
-    "line-color": colorByLts,
+    "line-color": $showSlope ? colorBySlope : colorByLts,
     "line-opacity": hoverStateFilter(1.0, 0.5),
   }}
   layout={{
@@ -75,6 +94,26 @@
   {/if}
 </LineLayer>
 
+<SymbolLayer
+  id="slope-arrows"
+  {...sourceOverride}
+  filter={[
+    "all",
+    ["==", ["geometry-type"], "LineString"],
+    [">", ["abs", ["get", "slope"]], 3],
+  ]}
+  minzoom={12}
+  layout={{
+    "icon-image": "chevron",
+    "icon-size": 1.0,
+    "symbol-placement": "line",
+    "symbol-spacing": 50,
+    "icon-allow-overlap": true,
+    "icon-rotate": ["case", ["<", ["get", "slope"], 0], 180, 0],
+    visibility: $showSlope ? "visible" : "none",
+  }}
+/>
+
 <CircleLayer
   id="origins-layer"
   {...sourceOverride}
diff --git a/viewer/src/Loader.svelte b/viewer/src/Loader.svelte
index b91931c..f1a4b40 100644
--- a/viewer/src/Loader.svelte
+++ b/viewer/src/Loader.svelte
@@ -54,7 +54,7 @@
 
   async function pmtilesInfo(file: PMTiles): Promise<Info> {
     let header = await file.getHeader();
-    let metadata = await file.getMetadata() as any;
+    let metadata = (await file.getMetadata()) as any;
 
     return {
       bounds: [header.minLon, header.minLat, header.maxLon, header.maxLat],
diff --git a/viewer/src/PropertiesTable.svelte b/viewer/src/PropertiesTable.svelte
index 79dc9dd..c7ba760 100644
--- a/viewer/src/PropertiesTable.svelte
+++ b/viewer/src/PropertiesTable.svelte
@@ -35,7 +35,7 @@
 {/if}
 {#if properties.slope}
   <div>
-    Slope: [{properties.slope.toFixed(2)}, {-properties.slope.toFixed(2)}]
+    Slope: {properties.slope.toFixed(2)}&percnt;
   </div>
 {/if}
 <div>
diff --git a/viewer/src/SidebarControls.svelte b/viewer/src/SidebarControls.svelte
index e607358..5778037 100644
--- a/viewer/src/SidebarControls.svelte
+++ b/viewer/src/SidebarControls.svelte
@@ -1,8 +1,20 @@
 <script lang="ts">
   import type { Map } from "maplibre-gl";
-  import { colors, ltsNames, type LayersControls } from "./common";
+  import {
+    slopeLimits,
+    slopeColors,
+    colors,
+    ltsNames,
+    type LayersControls,
+  } from "./common";
   import Legend from "./Legend.svelte";
-  import { showDestinations, showOrigins, showRouteNetwork } from "./stores";
+  import SequentialLegend from "./SequentialLegend.svelte";
+  import {
+    showSlope,
+    showDestinations,
+    showOrigins,
+    showRouteNetwork,
+  } from "./stores";
   import StreetView from "./StreetView.svelte";
 
   export let outputMetadata: any;
@@ -84,41 +96,55 @@
   </label>
 </div>
 
-<hr />
-<Legend
-  rows={[
-    [
-      `${ltsNames.lts1}: ${total(outputMetadata.total_meters_lts1)}`,
-      colors.lts1,
-    ],
-    [
-      `${ltsNames.lts2}: ${total(outputMetadata.total_meters_lts2)}`,
-      colors.lts2,
-    ],
-    [
-      `${ltsNames.lts3}: ${total(outputMetadata.total_meters_lts3)}`,
-      colors.lts3,
-    ],
-    [
-      `${ltsNames.lts4}: ${total(outputMetadata.total_meters_lts4)}`,
-      colors.lts4,
-    ],
-    // Shouldn't happen
-    [
-      `${ltsNames.lts_not_allowed}: ${total(
-        outputMetadata.total_meters_not_allowed,
-      )}`,
-      colors.lts_not_allowed,
-    ],
-  ]}
-/>
-<p>
-  Note: LTS model from <a
-    href="https://github.com/BikeOttawa/stressmodel/blob/master/stressmodel.js"
-    target="_blank"
-  >
-    BikeOttawa
-  </a>
-</p>
+{#if outputMetadata.config.elevation_geotiff}
+  <div>
+    <label>
+      <input type="checkbox" bind:checked={$showSlope} />
+      Visualize slope
+    </label>
+  </div>
+{/if}
+
+{#if $showSlope}
+  <SequentialLegend colorScale={slopeColors} limits={slopeLimits} />
+{:else}
+  <hr />
+  <Legend
+    rows={[
+      [
+        `${ltsNames.lts1}: ${total(outputMetadata.total_meters_lts1)}`,
+        colors.lts1,
+      ],
+      [
+        `${ltsNames.lts2}: ${total(outputMetadata.total_meters_lts2)}`,
+        colors.lts2,
+      ],
+      [
+        `${ltsNames.lts3}: ${total(outputMetadata.total_meters_lts3)}`,
+        colors.lts3,
+      ],
+      [
+        `${ltsNames.lts4}: ${total(outputMetadata.total_meters_lts4)}`,
+        colors.lts4,
+      ],
+      // Shouldn't happen
+      [
+        `${ltsNames.lts_not_allowed}: ${total(
+          outputMetadata.total_meters_not_allowed,
+        )}`,
+        colors.lts_not_allowed,
+      ],
+    ]}
+  />
+  <p>
+    Note: LTS model from <a
+      href="https://github.com/BikeOttawa/stressmodel/blob/master/stressmodel.js"
+      target="_blank"
+    >
+      BikeOttawa
+    </a>
+  </p>
+{/if}
+
 <hr />
 <StreetView {map} bind:enabled={controls.streetviewOn} />
diff --git a/viewer/src/common.ts b/viewer/src/common.ts
index 20deabd..6a94afd 100644
--- a/viewer/src/common.ts
+++ b/viewer/src/common.ts
@@ -94,12 +94,13 @@ export let ltsNames = {
   lts_not_allowed: "Cyclists not allowed",
 };
 
-// Hack around
-// https://stackoverflow.com/questions/67336062/typescript-not-parsed-in-svelte-html-section
-// until we're using Svelte 5
-export function notNull<T>(x: T | null | undefined): T {
-  if (x == null || x == undefined) {
-    throw new Error("Oops, notNull given something null");
-  }
-  return x;
-}
+// Thanks to https://ropensci.github.io/slopes/articles/roadnetworkcycling.html
+export let slopeLimits = [0, 3, 5, 8, 10, 20, 100];
+export let slopeColors = [
+  "#267300",
+  "#70A800",
+  "#FFAA00",
+  "#E60000",
+  "#A80000",
+  "#730000",
+];
diff --git a/viewer/src/stores.ts b/viewer/src/stores.ts
index 8060688..f11e384 100644
--- a/viewer/src/stores.ts
+++ b/viewer/src/stores.ts
@@ -3,3 +3,4 @@ import { writable } from "svelte/store";
 export let showRouteNetwork = writable(true);
 export let showOrigins = writable(false);
 export let showDestinations = writable(false);
+export let showSlope = writable(false);