Add ward layer. #285

src/lib/browse/ParliamentaryConstituenciesLayerControl.svelte

@@ -62,6 +62,7 @@
     let name = e.detail.properties.Name;
     name = name.replace(/ Boro Const$/, "");
     name = name.replace(/ Co Const$/, "");
+    name = encodeURIComponent(name);
 
     // Help people find the MP for this area
     window.open(

src/lib/browse/WardsLayerControl.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  import type { MapGeoJSONFeature } from "maplibre-gl";
+  import {
+    hoveredToggle,
+    overwriteLineLayer,
+    overwritePmtilesSource,
+    overwritePolygonLayer,
+  } from "../../maplibre_helpers";
+  import { map } from "../../stores";
+  import {
+    ColorLegend,
+    ExternalLink,
+    HelpButton,
+    InteractiveLayer,
+  } from "../common";
+  import { Checkbox } from "../govuk";
+  import { colors } from "./colors";
+
+  let name = "wards";
+  let color = colors.wards;
+  let outlineLayer = `${name}-outline`;
+
+  overwritePmtilesSource(
+    $map,
+    name,
+    `https://atip.uk/layers/v1/${name}.pmtiles`
+  );
+
+  overwritePolygonLayer($map, {
+    id: name,
+    source: name,
+    sourceLayer: name,
+    color,
+    opacity: hoveredToggle(0.5, 0.1),
+  });
+  overwriteLineLayer($map, {
+    id: outlineLayer,
+    source: name,
+    sourceLayer: name,
+    color,
+    width: 2.5,
+  });
+
+  let show = false;
+  // InteractiveLayer manages the polygon layer, but we also need to control the outline
+  $: {
+    if ($map.getLayer(outlineLayer)) {
+      $map.setLayoutProperty(
+        outlineLayer,
+        "visibility",
+        show ? "visible" : "none"
+      );
+    }
+  }
+
+  function tooltip(feature: MapGeoJSONFeature): string {
+    return `<p>${feature.properties.name}</p>`;
+  }
+
+  function onClick(e: CustomEvent<MapGeoJSONFeature>) {
+    let name = encodeURIComponent(e.detail.properties.name);
+    // Help people find the councillor for this area
+    window.open(`https://www.google.com/search?q=${name}+councillor`, "_blank");
+  }
+</script>
+
+<Checkbox id={name} bind:checked={show}>
+  <ColorLegend {color} />
+  Wards
+  <span slot="right">
+    <HelpButton>
+      <p>
+        Data from <ExternalLink
+          href="https://geoportal.statistics.gov.uk/datasets/ons::wards-may-2023-boundaries-uk-bgc/explore"
+        >
+          ONS Geography
+        </ExternalLink>, as of May 2023.
+      </p>
+      <p>
+        License: <ExternalLink
+          href="http://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
+        >
+          Open Government License
+        </ExternalLink>. Contains OS data &copy; Crown copyright and database
+        right 2023.
+      </p>
+    </HelpButton>
+  </span>
+</Checkbox>
+
+<InteractiveLayer layer={name} {tooltip} {show} on:click={onClick} />

src/lib/browse/colors.ts

@@ -4,6 +4,7 @@ export const colors = {
   hospitals: "#B73D25",
   mrn: "#006478",
   parliamentary_constituencies: "#006E59",
+  wards: "purple",
 
   atf2: "#00AFFF",
   atf3: "#FF62DC",

src/maplibre_helpers.ts

@@ -318,6 +318,8 @@ const layerZorder = [
   "mrn",
   "parliamentary_constituencies",
   "parliamentary_constituencies-outline",
+  "wards",
+  "wards-outline",
 
   // Draw most things beneath text road labels. This is the only layer in this
   // list generated by the MapTiler basemap we use.

src/pages/BrowseSchemes.svelte

@@ -12,6 +12,7 @@
   import ParliamentaryConstituenciesLayerControl from "../lib/browse/ParliamentaryConstituenciesLayerControl.svelte";
   import SchemeCard from "../lib/browse/SchemeCard.svelte";
   import SchoolsLayerControl from "../lib/browse/SchoolsLayerControl.svelte";
+  import WardsLayerControl from "../lib/browse/WardsLayerControl.svelte";
   import {
     BaselayerSwitcher,
     CollapsibleCard,
@@ -142,6 +143,7 @@
             <HospitalsLayerControl />
             <MrnLayerControl />
             <ParliamentaryConstituenciesLayerControl />
+            <WardsLayerControl />
           </CheckboxGroup>
           <BaselayerSwitcher {style} />
         </CollapsibleCard>