Crossings layer for browse page

src/lib/browse/LayerControls.svelte

@@ -10,6 +10,7 @@
   import CensusOutputAreaLayerControl from "./layers/CensusOutputAreaLayerControl.svelte";
   import CombinedAuthoritiesLayerControl from "./layers/CombinedAuthoritiesLayerControl.svelte";
   import CriticalIssuesLayerControl from "./layers/CriticalIssuesLayerControl.svelte";
+  import CrossingsLayerControl from "./layers/CrossingsLayerControl.svelte";
   import CycleParkingLayerControl from "./layers/CycleParkingLayerControl.svelte";
   import CyclePathsLayerControl from "./layers/CyclePathsLayerControl.svelte";
   import HospitalsLayerControl from "./layers/HospitalsLayerControl.svelte";
@@ -52,6 +53,7 @@
       <MrnLayerControl />
       <BusRoutesLayerControl />
       <CycleParkingLayerControl />
+      <CrossingsLayerControl />
     </CheckboxGroup>
   </CollapsibleCard>
   <CollapsibleCard label="Boundaries">

src/lib/browse/colors.ts

@@ -13,6 +13,7 @@ export const colors = {
   bus_route_with_lane: "#9362BA",
   bus_route_without_lane: "#C2A6D8",
   cycle_parking: "black",
+  crossings: "green",
 
   // Thanks to https://github.com/cyipt/cyipt-website/issues/23
   cycle_paths: {

src/lib/browse/layers/CrossingsLayerControl.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+  import {
+    ColorLegend,
+    ExternalLink,
+    HelpButton,
+    InteractiveLayer,
+  } from "lib/common";
+  import { Checkbox } from "lib/govuk";
+  import { overwriteCircleLayer, overwritePmtilesSource } from "lib/maplibre";
+  import type { MapGeoJSONFeature } from "maplibre-gl";
+  import { map } from "stores";
+  import { colors } from "../colors";
+
+  const name = "crossings";
+  let show = false;
+
+  function tooltip(feature: MapGeoJSONFeature): string {
+    const crossingTypeString = feature.properties.crossing;
+    if (crossingTypeString === "no")
+      return "Location where crossing is impossible/illegal but where there is a clear desire line to cross.";
+    let result = "Crossing with the following features.";
+    const initialTooltipSentence =
+      initialTooltipSentences.get(crossingTypeString);
+    if (initialTooltipSentence) result = initialTooltipSentence;
+
+    return `<p>${result}. Click for details.</p>`;
+  }
+
+  const initialTooltipSentences: Map<string, string> = new Map<string, string>([
+    ["traffic_signals", "Signalised crossing"],
+    ["marked", "Crossing with no traffic signals"],
+    ["uncontrolled", "Crossing with no traffic signals"],
+    ["unmarked", "Crossing with no markings or signals"],
+    ["zebra", "Zebra crossing"],
+    ["island", "Crossing with an island"],
+    [
+      "informal",
+      "Informal crossing with an obvious desire line, but no official infrastructure to support it",
+    ],
+  ]);
+
+  overwritePmtilesSource(
+    $map,
+    name,
+    `${import.meta.env.VITE_RESOURCE_BASE}/layers/v1/${name}.pmtiles`
+  );
+  let color = colors[name];
+
+  overwriteCircleLayer($map, {
+    id: name,
+    source: name,
+    sourceLayer: name,
+    color: color,
+    radius: ["interpolate", ["linear"], ["zoom"], 1, 2, 8, 3, 13, 10],
+  });
+
+  function onClick(e: CustomEvent<MapGeoJSONFeature>) {
+    window.open(
+      `http://openstreetmap.org/node/${e.detail.properties.osm_id}`,
+      "_blank"
+    );
+  }
+</script>
+
+<Checkbox id={name} bind:checked={show}>
+  <ColorLegend {color} />
+  Crossings
+  <span slot="right">
+    <HelpButton>
+      <p>
+        This shows <ExternalLink
+          href="https://wiki.openstreetmap.org/wiki/Key:crossing"
+        >
+          crossing
+        </ExternalLink> data from OpenStreetMap (as of 9 August 2023).
+      </p>
+
+      <p>
+        License: <ExternalLink href="https://www.openstreetmap.org/copyright">
+          Open Data Commons Open Database License
+        </ExternalLink>
+      </p>
+    </HelpButton>
+  </span>
+</Checkbox>
+
+<InteractiveLayer
+  layer={name}
+  {tooltip}
+  {show}
+  clickable={true}
+  on:click={onClick}
+/>

src/lib/browse/layers/RailwayStationsLayerControl.svelte

@@ -1,28 +1,64 @@
 <script lang="ts">
   import { circleRadius } from "colors";
-  import { ExternalLink } from "lib/common";
-  import PointAmenityLayerControl from "./PointAmenityLayerControl.svelte";
+  import {
+    ColorLegend,
+    ExternalLink,
+    HelpButton,
+    InteractiveLayer,
+  } from "lib/common";
+  import { Checkbox } from "lib/govuk";
+  import { overwriteCircleLayer, overwriteSource } from "lib/maplibre";
+  import type { MapGeoJSONFeature } from "maplibre-gl";
+  import { map } from "stores";
+  import { colors } from "../colors";
 
   const name = "railway_stations";
+  const url = `${import.meta.env.VITE_RESOURCE_BASE}/layers/v1/${name}.geojson`;
+  let show = false;
+
+  overwriteSource($map, name, url);
+  let color = colors[name];
+
+  overwriteCircleLayer($map, {
+    id: name,
+    source: name,
+    color: color,
+    radius: circleRadius / 2,
+    // TODO Outline?
+  });
+
+  function tooltip(feature: MapGeoJSONFeature): string {
+    let name = feature.properties.name ?? "Unnamed railway station";
+    return `<p>${name}</p>`;
+  }
 </script>
 
-<PointAmenityLayerControl
-  {name}
-  singularNoun="railway station"
-  pluralNoun="Railway stations"
-  {circleRadius}
->
-  <p>
-    This shows <ExternalLink
-      href="https://wiki.openstreetmap.org/wiki/Tag:railway%3Dstation"
-    >
-      railway station
-    </ExternalLink> data from OpenStreetMap (as of 9 August 2023).
-  </p>
+<Checkbox id={name} bind:checked={show}>
+  <ColorLegend {color} />
+  Railway Stations
+  <span slot="right">
+    <HelpButton>
+      <p>
+        This shows <ExternalLink
+          href="https://wiki.openstreetmap.org/wiki/Tag:railway%3Dstation"
+        >
+          railway station
+        </ExternalLink> data from OpenStreetMap (as of 9 August 2023).
+      </p>
+
+      <p>
+        License: <ExternalLink href="https://www.openstreetmap.org/copyright">
+          Open Data Commons Open Database License
+        </ExternalLink>
+      </p>
+    </HelpButton>
+  </span>
+</Checkbox>
 
-  <p>
-    License: <ExternalLink href="https://www.openstreetmap.org/copyright">
-      Open Data Commons Open Database License
-    </ExternalLink>
-  </p>
-</PointAmenityLayerControl>
+<InteractiveLayer
+  layer={name}
+  {tooltip}
+  {show}
+  clickable={false}
+  on:click={() => {}}
+/>

src/lib/maplibre/utils.ts

@@ -319,6 +319,7 @@ const layerZorder = [
   "bus_routes",
   "railway_stations",
   "cycle_parking",
+  "crossings",
   "cycle_paths",
   "vehicle_counts",