diff --git a/src/lib/browse/LayerControls.svelte b/src/lib/browse/LayerControls.svelte
index 18d2af294..bc4356cce 100644
--- a/src/lib/browse/LayerControls.svelte
+++ b/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">
diff --git a/src/lib/browse/colors.ts b/src/lib/browse/colors.ts
index 5c63f922d..aa97600f7 100644
--- a/src/lib/browse/colors.ts
+++ b/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: {
diff --git a/src/lib/browse/layers/CrossingsLayerControl.svelte b/src/lib/browse/layers/CrossingsLayerControl.svelte
new file mode 100644
index 000000000..a4b9bba26
--- /dev/null
+++ b/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}
+/>
diff --git a/src/lib/browse/layers/PointAmenityLayerControl.svelte b/src/lib/browse/layers/PointAmenityLayerControl.svelte
deleted file mode 100644
index 886556591..000000000
--- a/src/lib/browse/layers/PointAmenityLayerControl.svelte
+++ /dev/null
@@ -1,56 +0,0 @@
-<script lang="ts">
-  import { ColorLegend, 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";
-
-  // This name is used for multiple things:
-  // - The name of a .geojson file
-  // - The layer name within that file
-  // - 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;
-
-  // 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`
-  );
-
-  overwriteCircleLayer($map, {
-    id: name,
-    source: name,
-    color: color,
-    radius: circleRadius / 2,
-    // 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}>
-  <ColorLegend {color} />
-  {pluralNoun}
-  <span slot="right">
-    <HelpButton><slot /></HelpButton>
-  </span>
-</Checkbox>
-
-<InteractiveLayer layer={name} {tooltip} {show} clickable={false} />
diff --git a/src/lib/browse/layers/RailwayStationsLayerControl.svelte b/src/lib/browse/layers/RailwayStationsLayerControl.svelte
index 7e1fd22b1..a8e19ce37 100644
--- a/src/lib/browse/layers/RailwayStationsLayerControl.svelte
+++ b/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={() => {}}
+/>
diff --git a/src/lib/maplibre/utils.ts b/src/lib/maplibre/utils.ts
index 1cb821b85..1f46b5180 100644
--- a/src/lib/maplibre/utils.ts
+++ b/src/lib/maplibre/utils.ts
@@ -319,6 +319,7 @@ const layerZorder = [
   "bus_routes",
   "railway_stations",
   "cycle_parking",
+  "crossings",
   "cycle_paths",
   "vehicle_counts",