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,64 @@
+<script lang="ts">
+  import { circleRadius } from "colors";
+  import { ExternalLink } from "lib/common";
+  import type { MapGeoJSONFeature } from "maplibre-gl";
+  import crossingsUrl from "../../../../assets/crossings.geojson?url";
+  import PointAmenityLayerControl from "./PointAmenityLayerControl.svelte";
+
+  const name = "crossings";
+
+  function tooltip(feature: MapGeoJSONFeature): string {
+    const crossingTypeString: string = 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 result + `. More information can be found by clicking.`;
+  }
+
+  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",
+      "Infomral crossing where there crossing is not intended by the municipality but there is an obviously desire line",
+    ],
+  ]);
+
+  function onClick(e: CustomEvent<MapGeoJSONFeature>) {
+    window.open(
+      `http://openstreetmap.org/node/${e.detail.properties.osm_id}`,
+      "_blank"
+    );
+  }
+</script>
+
+<PointAmenityLayerControl
+  {name}
+  pluralNoun="Crossings"
+  {circleRadius}
+  url={crossingsUrl}
+  {tooltip}
+  {onClick}
+>
+  <p>
+    This shows <ExternalLink
+      href="https://wiki.openstreetmap.org/wiki/Tag: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>
+</PointAmenityLayerControl>

src/lib/browse/layers/PointAmenityLayerControl.svelte

@@ -12,23 +12,27 @@
   // - The layer name, for layerZorder
   // - A color name in colors.ts
   export let name: string;
-  // Uncapitalized
-  export let singularNoun: string;
   // Capitalized
   export let pluralNoun: string;
 
   export let circleRadius: number;
 
+  export let url: string;
+
+  export let tooltip: (feature: MapGeoJSONFeature) => string;
+
+  const originalOnClick = (e: CustomEvent<MapGeoJSONFeature>) => {};
+
+  export let onClick = originalOnClick;
+
+  $: clickable = onClick !== originalOnClick;
+
   // The caller must also fill in the default slot with the contents of a help modal
 
   // @ts-ignore TODO Also constrain name to exist in the colors type
   let color = colors[name];
 
-  overwriteSource(
-    $map,
-    name,
-    `${import.meta.env.VITE_RESOURCE_BASE}/layers/v1/${name}.geojson`
-  );
+  overwriteSource($map, name, url);
 
   overwriteCircleLayer($map, {
     id: name,
@@ -38,11 +42,6 @@
     // TODO Outline?
   });
   let show = false;
-
-  function tooltip(feature: MapGeoJSONFeature): string {
-    let name = feature.properties.name ?? `Unnamed ${singularNoun}`;
-    return `<p>${name}</p>`;
-  }
 </script>
 
 <Checkbox id={name} bind:checked={show}>
@@ -53,4 +52,10 @@
   </span>
 </Checkbox>
 
-<InteractiveLayer layer={name} {tooltip} {show} clickable={false} />
+<InteractiveLayer
+  layer={name}
+  {tooltip}
+  {show}
+  {clickable}
+  on:click={onClick}
+/>

src/lib/browse/layers/RailwayStationsLayerControl.svelte

@@ -1,16 +1,24 @@
 <script lang="ts">
   import { circleRadius } from "colors";
   import { ExternalLink } from "lib/common";
+  import type { MapGeoJSONFeature } from "maplibre-gl";
   import PointAmenityLayerControl from "./PointAmenityLayerControl.svelte";
 
   const name = "railway_stations";
+  const url = `${import.meta.env.VITE_RESOURCE_BASE}/layers/v1/${name}.geojson`;
+
+  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}
+  {url}
+  {tooltip}
 >
   <p>
     This shows <ExternalLink

src/lib/maplibre/utils.ts

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