Add a gradient layer. #463

src/lib/browse/LayerControls.svelte

@@ -29,6 +29,7 @@
   import BusStopsLayerControl from "./layers/points/BusStops.svelte";
   import CriticalIssuesLayerControl from "./layers/points/CriticalIssues.svelte";
   import CrossingsLayerControl from "./layers/points/Crossings.svelte";
+  import GradientsLayerControl from "./layers/lines/Gradients.svelte";
   import CycleParkingLayerControl from "./layers/points/CycleParking.svelte";
   import EducationLayerControl from "./layers/points/Education.svelte";
   import HospitalsLayerControl from "./layers/points/Hospitals.svelte";
@@ -107,6 +108,7 @@
       <VehicleCountsLayerControl />
       <Stats19LayerControl />
       <PctLayerControl />
+      <GradientsLayerControl />
       {#if appVersion() == "Private (development)"}
         <RoadWidthsLayerControl />
         <PavementWidthsLayerControl />

src/lib/browse/colors.ts

@@ -65,6 +65,16 @@ export const colors = {
     "#76c384",
     "#488f31",
   ],
+
+  // Thanks to https://ropensci.github.io/slopes/articles/roadnetworkcycling.html
+  gradient_flat_to_steep: [
+    "#267300",
+    "#70A800",
+    "#FFAA00",
+    "#E60000",
+    "#A80000",
+    "#730000",
+  ],
 };
 
 // For dense line layers, make individual lines easily distinguished when

src/lib/browse/layers/lines/Gradients.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+  import OsmLicense from "../OsmLicense.svelte";
+  import OsOglLicense from "../OsOglLicense.svelte";
+  import {
+    ExternalLink,
+    HelpButton,
+    Popup,
+    publicResourceBaseUrl,
+  } from "lib/common";
+  import { Checkbox } from "lib/govuk";
+  import { layerId, makeColorRamp } from "lib/maplibre";
+  import {
+    hoverStateFilter,
+    LineLayer,
+    VectorTileSource,
+    SymbolLayer,
+  } from "svelte-maplibre";
+  import { colors, denseLineWidth } from "../../colors";
+  import SequentialLegend from "../SequentialLegend.svelte";
+
+  let name = "gradient";
+  let colorScale = colors.gradient_flat_to_steep;
+  let limits = [0, 3, 5, 8, 10, 20, 100];
+
+  let show = false;
+</script>
+
+<Checkbox bind:checked={show}>
+  Gradients
+  <span slot="right">
+    <HelpButton>
+      <p>
+        This layer shows the steepness of roads, with the arrows pointing
+        uphill. You have to zoom in to see all roads.
+      </p>
+      <p>
+        Note the gradient may be incorrect near bridges and tunnels, depending
+        on the underlying Digital Elevation Model used.
+      </p>
+      <p>
+        This layer is built from <ExternalLink
+          href="https://www.ordnancesurvey.co.uk/products/os-terrain-50"
+        >
+          OS Terrain 50
+        </ExternalLink> and roads from OpenStreetMap. The data is valid as of 18
+        February 2024.
+      </p>
+      <OsOglLicense />
+      <OsmLicense />
+    </HelpButton>
+  </span>
+</Checkbox>
+{#if show}
+  <SequentialLegend {colorScale} {limits} />
+{/if}
+
+<VectorTileSource
+  url={`pmtiles://${publicResourceBaseUrl()}/v1/${name}.pmtiles`}
+>
+  <LineLayer
+    {...layerId(name)}
+    sourceLayer={name}
+    manageHoverState
+    paint={{
+      "line-color": makeColorRamp(
+        ["/", ["abs", ["get", "gradient"]], 100],
+        limits,
+        colorScale,
+      ),
+      // TODO Try showing the actual width, in meters and not pixels
+      "line-width": denseLineWidth,
+      "line-opacity": hoverStateFilter(1.0, 0.5),
+    }}
+    layout={{
+      visibility: show ? "visible" : "none",
+    }}
+  >
+    <Popup let:props>
+      <p>
+        Gradient: <b>{Math.abs(props.gradient) / 100}</b>
+        &percnt;
+      </p>
+    </Popup>
+  </LineLayer>
+
+  <SymbolLayer
+    {...layerId(name + "_arrows")}
+    sourceLayer={name}
+    minzoom={12}
+    filter={[">", ["abs", ["get", "gradient"]], 300]}
+    layout={{
+      "icon-image": "chevron",
+      "icon-size": 1.0,
+      "symbol-placement": "line",
+      "symbol-spacing": 50,
+      "icon-allow-overlap": true,
+      "icon-rotate": ["case", ["<", ["get", "gradient"], 0], 180, 0],
+      visibility: show ? "visible" : "none",
+    }}
+  />
+</VectorTileSource>

src/lib/common/MapLibreMap.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import chevron from "../../../assets/chevron.png?url";
   import { getStyleSpecification } from "lib/maplibre";
   import {
     Map,
@@ -55,6 +56,7 @@
       bind:loaded
       bind:map
       on:error={onError}
+      images={[{ id: "chevron", url: chevron }]}
     >
       {#if $mapStore}
         <ScaleControl />

src/lib/maplibre/zorder.ts

@@ -85,6 +85,8 @@ const layerZorder = [
   "road_widths",
   "road_speeds",
   "pavement_widths",
+  "gradient",
+  "gradient_arrows",
   // Then small point/polygon layers on top
   "education",
   "hospitals",