Add boundaries for CAs and LADs

src/lib/browse/CombinedAuthoritiesLayerControl.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+  import type { MapGeoJSONFeature } from "maplibre-gl";
+  import {
+    hoveredToggle,
+    overwriteLineLayer,
+    overwritePolygonLayer,
+    overwriteSource,
+  } from "../../maplibre_helpers";
+  import { map } from "../../stores";
+  import {
+    ColorLegend,
+    ExternalLink,
+    HelpButton,
+    InteractiveLayer,
+  } from "../common";
+  import { Checkbox } from "../govuk";
+  import { colors } from "./colors";
+
+  let name = "combined_authorities";
+  let color = colors.combined_authorities;
+  let outlineLayer = `${name}-outline`;
+
+  overwriteSource($map, name, `https://atip.uk/layers/v1/${name}.geojson`);
+
+  overwritePolygonLayer($map, {
+    id: name,
+    source: name,
+    color,
+    opacity: hoveredToggle(0.5, 0.1),
+  });
+  overwriteLineLayer($map, {
+    id: outlineLayer,
+    source: 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);
+    window.open(
+      `https://www.ons.gov.uk/visualisations/areas/${e.detail.properties.CAUTH22CD}`,
+      "_blank"
+    );
+  }
+</script>
+
+<Checkbox id={name} bind:checked={show}>
+  <ColorLegend {color} />
+  Combined authorities
+  <span slot="right">
+    <HelpButton>
+      <p>
+        Data from <ExternalLink
+          href="https://geoportal.statistics.gov.uk/datasets/ons::combined-authorities-december-2022-boundaries-en-buc/explore"
+        >
+          ONS Geography
+        </ExternalLink>, as of December 2022.
+      </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/LocalAuthorityDistrictsLayerControl.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+  import type { MapGeoJSONFeature } from "maplibre-gl";
+  import {
+    hoveredToggle,
+    overwriteLineLayer,
+    overwritePolygonLayer,
+    overwriteSource,
+  } from "../../maplibre_helpers";
+  import { map } from "../../stores";
+  import {
+    ColorLegend,
+    ExternalLink,
+    HelpButton,
+    InteractiveLayer,
+  } from "../common";
+  import { Checkbox } from "../govuk";
+  import { colors } from "./colors";
+
+  let name = "local_authority_districts";
+  let color = colors.local_authority_districts;
+  let outlineLayer = `${name}-outline`;
+
+  overwriteSource($map, name, `https://atip.uk/layers/v1/${name}.geojson`);
+
+  overwritePolygonLayer($map, {
+    id: name,
+    source: name,
+    color,
+    opacity: hoveredToggle(0.5, 0.1),
+  });
+  overwriteLineLayer($map, {
+    id: outlineLayer,
+    source: 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 = e.detail.properties.LAD23CD;
+    window.open(
+      `https://www.ons.gov.uk/visualisations/areas/${e.detail.properties.LAD23CD}`,
+      "_blank"
+    );
+  }
+</script>
+
+<Checkbox id={name} bind:checked={show}>
+  <ColorLegend {color} />
+  Local Authority Districts
+  <span slot="right">
+    <HelpButton>
+      <p>
+        Data from <ExternalLink
+          href="https://geoportal.statistics.gov.uk/datasets/ons::local-authority-districts-may-2023-boundaries-uk-buc/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

@@ -5,6 +5,8 @@ export const colors = {
   mrn: "#006478",
   parliamentary_constituencies: "#006E59",
   wards: "purple",
+  combined_authorities: "cyan",
+  local_authority_districts: "orange",
 
   atf2: "#00AFFF",
   atf3: "#FF62DC",

src/maplibre_helpers.ts

@@ -29,8 +29,8 @@ export const isPoint: FilterSpecification = ["==", "$type", "Point"];
 // overwrite an existing source or layer. This complicates Vite's hot-reload
 // feature, unless every component correctly tears down all sources and layers.
 // These methods workaround that lifetime management hassle by overwriting if
-// necessary.
-export function overwriteSource(map: Map, id: string, data: GeoJSON) {
+// necessary. The data can be GeoJSON or a URL to a GeoJSON file.
+export function overwriteSource(map: Map, id: string, data: GeoJSON | string) {
   cleanupSource(map, id);
   map.addSource(id, {
     type: "geojson",
@@ -320,6 +320,10 @@ const layerZorder = [
   "parliamentary_constituencies-outline",
   "wards",
   "wards-outline",
+  "combined_authorities",
+  "combined_authorities-outline",
+  "local_authority_districts",
+  "local_authority_districts-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

@@ -4,10 +4,12 @@
   import "../style/main.css";
   import type { MapGeoJSONFeature } from "maplibre-gl";
   import { onDestroy, onMount } from "svelte";
+  import CombinedAuthoritiesLayerControl from "../lib/browse/CombinedAuthoritiesLayerControl.svelte";
   import { processInput, type Scheme } from "../lib/browse/data";
   import Filters from "../lib/browse/Filters.svelte";
   import HospitalsLayerControl from "../lib/browse/HospitalsLayerControl.svelte";
   import InterventionColorSelector from "../lib/browse/InterventionColorSelector.svelte";
+  import LocalAuthorityDistrictsLayerControl from "../lib/browse/LocalAuthorityDistrictsLayerControl.svelte";
   import MrnLayerControl from "../lib/browse/MrnLayerControl.svelte";
   import ParliamentaryConstituenciesLayerControl from "../lib/browse/ParliamentaryConstituenciesLayerControl.svelte";
   import SchemeCard from "../lib/browse/SchemeCard.svelte";
@@ -144,6 +146,8 @@
             <MrnLayerControl />
             <ParliamentaryConstituenciesLayerControl />
             <WardsLayerControl />
+            <CombinedAuthoritiesLayerControl />
+            <LocalAuthorityDistrictsLayerControl />
           </CheckboxGroup>
           <BaselayerSwitcher {style} />
         </CollapsibleCard>