Initial crossings commit

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,28 @@
+<script lang="ts">
+  import { circleRadius } from "colors";
+  import { ExternalLink } from "lib/common";
+  import PointAmenityLayerControl from "./PointAmenityLayerControl.svelte";
+
+  const name = "crossings";
+</script>
+
+<PointAmenityLayerControl
+  {name}
+  singularNoun="crossing"
+  pluralNoun="Crossings"
+  {circleRadius}
+>
+  <p>
+    This shows <ExternalLink
+      href="https://wiki.openstreetmap.org/wiki/Tag:crossing"
+    >
+      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>
+</PointAmenityLayerControl>