Cycle parking layer

.prettierignore

@@ -0,0 +1 @@
+src/style/main.*

src/lib/browse/CycleParkingLayerControl.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import type { MapGeoJSONFeature } from "maplibre-gl";
+  import {
+    overwriteCircleLayer,
+    overwritePmtilesSource,
+  } from "../../maplibre_helpers";
+  import { map } from "../../stores";
+  import {
+    ColorLegend,
+    ExternalLink,
+    HelpButton,
+    InteractiveLayer,
+  } from "../common";
+  import { Checkbox } from "../govuk";
+  import { colors } from "./colors";
+
+  let name = "cycle_parking";
+  let color = colors.cycle_parking;
+
+  overwritePmtilesSource(
+    $map,
+    name,
+    `https://atip.uk/layers/v1/${name}.pmtiles`
+  );
+
+  overwriteCircleLayer($map, {
+    id: name,
+    source: name,
+    sourceLayer: name,
+    color,
+    radius: 5,
+  });
+
+  let show = false;
+
+  function tooltip(feature: MapGeoJSONFeature): string {
+    let capacity = feature.properties.capacity ?? "unknown";
+    return `<p>Capacity: ${capacity}</p>`;
+  }
+</script>
+
+<Checkbox id={name} bind:checked={show}>
+  <ColorLegend {color} />
+  Cycle parking
+  <span slot="right">
+    <HelpButton>
+      <p>
+        Cycle parking, according to <ExternalLink
+          href="https://wiki.openstreetmap.org/wiki/Tag:amenity%3Dbicycle_parking"
+        >
+          OpenStreetMap
+        </ExternalLink> (as of 9 August 2023). The type of parking, public/private
+        access, and whether it's covered are not shown.
+      </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={false} />

src/lib/browse/colors.ts

@@ -12,6 +12,7 @@ export const colors = {
   local_planning_authorities: "red",
   bus_route_with_lane: "#9362BA",
   bus_route_without_lane: "#C2A6D8",
+  cycle_parking: "black",
 
   // Color ramp from https://www.ons.gov.uk/census/maps/choropleth
   sequential_low_to_high: [

src/maplibre_helpers.ts

@@ -298,6 +298,7 @@ const layerZorder = [
   "mrn",
   "bus_routes",
   "railway_stations",
+  "cycle_parking",
 
   // Polygons are bigger than lines, which're bigger than points. When geometry
   // overlaps, put the smaller thing on top

src/pages/BrowseSchemes.svelte

@@ -7,6 +7,7 @@
   import BusRoutesLayerControl from "../lib/browse/BusRoutesLayerControl.svelte";
   import CensusOutputAreaLayerControl from "../lib/browse/CensusOutputAreaLayerControl.svelte";
   import CombinedAuthoritiesLayerControl from "../lib/browse/CombinedAuthoritiesLayerControl.svelte";
+  import CycleParkingLayerControl from "../lib/browse/CycleParkingLayerControl.svelte";
   import { processInput, type Scheme } from "../lib/browse/data";
   import Filters from "../lib/browse/Filters.svelte";
   import HospitalsLayerControl from "../lib/browse/HospitalsLayerControl.svelte";
@@ -162,10 +163,11 @@
               <RailwayStationsLayerControl />
             </CheckboxGroup>
           </CollapsibleCard>
-          <CollapsibleCard label="Road network">
+          <CollapsibleCard label="Existing infrastructure">
             <CheckboxGroup small>
               <MrnLayerControl />
               <BusRoutesLayerControl />
+              <CycleParkingLayerControl />
             </CheckboxGroup>
           </CollapsibleCard>
           <CollapsibleCard label="Boundaries">