Add LPA boundaries. #285

src/lib/browse/LocalPlanningAuthoritiesLayerControl.svelte

@@ -0,0 +1,112 @@
+<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 = "local_planning_authorities";
+  let color = colors.local_planning_authorities;
+  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"
+      );
+    }
+  }
+
+  // TODO Note there are overlapping features. InteractiveLayer only plumbs
+  // back one result, so the tooltip may be incomplete.
+  function tooltip(feature: MapGeoJSONFeature): string {
+    return `<p>${feature.properties.name}</p>`;
+  }
+</script>
+
+<Checkbox id={name} bind:checked={show}>
+  <ColorLegend {color} />
+  Local Planning Authorities
+  <span slot="right">
+    <HelpButton>
+      <p>
+        LPAs may be a <ExternalLink
+          href="https://www.planning.data.gov.uk/dataset/local-authority"
+        >
+          local authority
+        </ExternalLink>, <ExternalLink
+          href="https://www.planning.data.gov.uk/dataset/national-park-authority"
+        >
+          national park authorit
+        </ExternalLink>y, or <ExternalLink
+          href="https://www.planning.data.gov.uk/dataset/development-corporation"
+        >
+          development corporation
+        </ExternalLink>.
+      </p>
+      <p>
+        <strong>
+          Note there are overlapping LPAs near Northhamptonshire, shown in a
+          darker shade. Only one authority name is shown when hovering. Use <ExternalLink
+            href="https://www.planning.data.gov.uk/map/?dataset=local-planning-authority"
+          >
+            this map
+          </ExternalLink> to get more details.
+        </strong>
+      </p>
+      <p>
+        Data from ONS Geography via <ExternalLink
+          href="https://www.planning.data.gov.uk/dataset/local-planning-authority"
+        >
+          planning.data.gov.uk
+        </ExternalLink>, as of November 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} clickable={false} />

src/lib/browse/colors.ts

@@ -7,6 +7,7 @@ export const colors = {
   wards: "purple",
   combined_authorities: "cyan",
   local_authority_districts: "orange",
+  local_planning_authorities: "red",
 
   // Color ramp from https://www.ons.gov.uk/census/maps/choropleth
   sequential_low_to_high: [

src/maplibre_helpers.ts

@@ -287,6 +287,8 @@ const layerZorder = [
   "combined_authorities-outline",
   "local_authority_districts",
   "local_authority_districts-outline",
+  "local_planning_authorities",
+  "local_planning_authorities-outline",
   "census_output_areas",
   "census_output_areas-outline",
   // Then smaller optional layers on top

src/pages/BrowseSchemes.svelte

@@ -10,6 +10,7 @@
   import Filters from "../lib/browse/Filters.svelte";
   import HospitalsLayerControl from "../lib/browse/HospitalsLayerControl.svelte";
   import LocalAuthorityDistrictsLayerControl from "../lib/browse/LocalAuthorityDistrictsLayerControl.svelte";
+  import LocalPlanningAuthoritiesLayerControl from "../lib/browse/LocalPlanningAuthoritiesLayerControl.svelte";
   import MrnLayerControl from "../lib/browse/MrnLayerControl.svelte";
   import ParliamentaryConstituenciesLayerControl from "../lib/browse/ParliamentaryConstituenciesLayerControl.svelte";
   import SchemeCard from "../lib/browse/SchemeCard.svelte";
@@ -167,6 +168,7 @@
               <WardsLayerControl />
               <CombinedAuthoritiesLayerControl />
               <LocalAuthorityDistrictsLayerControl />
+              <LocalPlanningAuthoritiesLayerControl />
             </CheckboxGroup>
           </CollapsibleCard>
           <CollapsibleCard label="Census">