Rewrk to use maplibre helpers as library

src/lib/BoundaryLayer.svelte

@@ -6,7 +6,7 @@
     bbox,
     overwritePolygonLayer,
     overwriteSource,
-  } from "../maplibre_helpers";
+  } from "../lib/maplibre";
   import { map } from "../stores";
 
   export let boundaryGeojson: FeatureCollection<Polygon>;

src/lib/browse/ImdLayerControl.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+  import type { MapGeoJSONFeature } from "maplibre-gl";
+  import { map } from "../../stores";
+  import { ExternalLink, HelpButton, InteractiveLayer } from "../common";
+  import { Checkbox } from "../govuk";
+  import {
+    hoveredToggle,
+    makeColorRamp,
+    overwriteLineLayer,
+    overwritePmtilesSource,
+    overwritePolygonLayer,
+  } from "../maplibre";
+  import { colors } from "./colors";
+  import SequentialLegend from "./SequentialLegend.svelte";
+
+  let name = "imd";
+  let outlineLayer = `${name}-outline`;
+
+  let colorScale = colors.sequential_low_to_high;
+  // The deciles are [1, 10]. The 5 colors cover two each.
+  let limits = [0, 2, 4, 6, 8, 10];
+
+  overwritePmtilesSource(
+    $map,
+    name,
+    `https://atip.uk/layers/v1/${name}.pmtiles`
+  );
+
+  overwritePolygonLayer($map, {
+    id: name,
+    source: name,
+    sourceLayer: name,
+    // Decile 1 is the most deprived, but we want to invert for the color scale
+    color: makeColorRamp(["-", 10, ["get", "decile"]], limits, colorScale),
+    opacity: hoveredToggle(0.5, 0.7),
+  });
+  overwriteLineLayer($map, {
+    id: outlineLayer,
+    source: name,
+    sourceLayer: name,
+    color: "black",
+    width: 0.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.LSOA11CD} has an IMD score of <b>${feature.properties.score}</b></p>` +
+      `<p>Rank: <b>${feature.properties.rank.toLocaleString()}</b> / 32,844 LSOAs</p>`
+    );
+  }
+</script>
+
+<Checkbox id={name} bind:checked={show}>
+  Indices of Multiple Deprivation
+  <span slot="right">
+    <HelpButton>
+      <p>
+        The 2019 English IMD scores come from <ExternalLink
+          href="https://data-communities.opendata.arcgis.com/datasets/communities::indices-of-multiple-deprivation-imd-2019-1/explore"
+        >
+          DLUCH GIS
+        </ExternalLink>. Note the LSOAs identified are from the 2011 census. A
+        detailed breakdown of the score across different categories can be found <ExternalLink
+          href="http://dclgapps.communities.gov.uk/imd/iod_index.html"
+        >
+          here
+        </ExternalLink>.
+      </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>
+{#if show}
+  <SequentialLegend {colorScale} limits={["Least deprived", "Most deprived"]} />
+{/if}
+
+<InteractiveLayer layer={name} {tooltip} {show} clickable={false} />

src/lib/browse/InterventionColorSelector.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { constructMatchExpression } from "../../maplibre_helpers";
+  import { constructMatchExpression } from "../maplibre";
   import { colorInterventionsBySchema, schemaLegend } from "../../schemas";
   import { map } from "../../stores";
   import { Legend } from "../common";

src/lib/browse/SchemeCard.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { FeatureCollection } from "geojson";
-  import { bbox } from "../../maplibre_helpers";
+  import { bbox } from "../maplibre";
   import { gjScheme, map } from "../../stores";
   import { CollapsibleCard } from "../common";
   import { SecondaryButton } from "../govuk";

src/lib/browse/layers/BusRoutesLayerControl.svelte

@@ -1,10 +1,5 @@
 <script lang="ts">
   import type { MapGeoJSONFeature } from "maplibre-gl";
-  import {
-    hoveredToggle,
-    overwriteLineLayer,
-    overwritePmtilesSource,
-  } from "../../../maplibre_helpers";
   import { map } from "../../../stores";
   import {
     ColorLegend,
@@ -13,6 +8,11 @@
     InteractiveLayer,
   } from "../../common";
   import { Checkbox } from "../../govuk";
+  import {
+    hoveredToggle,
+    overwriteLineLayer,
+    overwritePmtilesSource,
+  } from "../../maplibre";
   import { colors } from "../colors";
 
   let name = "bus_routes";

src/lib/browse/layers/CensusOutputAreaLayerControl.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
   import type { MapGeoJSONFeature } from "maplibre-gl";
+  import { map } from "../../../stores";
+  import { ExternalLink, HelpButton, InteractiveLayer } from "../../common";
+  import { Checkbox } from "../../govuk";
   import {
     hoveredToggle,
     makeColorRamp,
     overwriteLineLayer,
     overwritePmtilesSource,
     overwritePolygonLayer,
-  } from "../../../maplibre_helpers";
-  import { map } from "../../../stores";
-  import { ExternalLink, HelpButton, InteractiveLayer } from "../../common";
-  import { Checkbox } from "../../govuk";
+  } from "../../maplibre";
   import { colors } from "../colors";
   import SequentialLegend from "./SequentialLegend.svelte";
 

src/lib/browse/layers/CombinedAuthoritiesLayerControl.svelte

@@ -1,11 +1,5 @@
 <script lang="ts">
   import type { MapGeoJSONFeature } from "maplibre-gl";
-  import {
-    hoveredToggle,
-    overwriteLineLayer,
-    overwritePolygonLayer,
-    overwriteSource,
-  } from "../../../maplibre_helpers";
   import { map } from "../../../stores";
   import {
     ColorLegend,
@@ -14,6 +8,12 @@
     InteractiveLayer,
   } from "../../common";
   import { Checkbox } from "../../govuk";
+  import {
+    hoveredToggle,
+    overwriteLineLayer,
+    overwritePolygonLayer,
+    overwriteSource,
+  } from "../../maplibre";
   import { colors } from "../colors";
 
   let name = "combined_authorities";

src/lib/browse/layers/CycleParkingLayerControl.svelte

@@ -1,9 +1,5 @@
 <script lang="ts">
   import type { MapGeoJSONFeature } from "maplibre-gl";
-  import {
-    overwriteCircleLayer,
-    overwritePmtilesSource,
-  } from "../../../maplibre_helpers";
   import { map } from "../../../stores";
   import {
     ColorLegend,
@@ -12,6 +8,7 @@
     InteractiveLayer,
   } from "../../common";
   import { Checkbox } from "../../govuk";
+  import { overwriteCircleLayer, overwritePmtilesSource } from "../../maplibre";
   import { colors } from "../colors";
 
   let name = "cycle_parking";

src/lib/browse/layers/CyclePathsLayerControl.svelte

@@ -1,11 +1,5 @@
 <script lang="ts">
   import type { MapGeoJSONFeature } from "maplibre-gl";
-  import {
-    constructMatchExpression,
-    hoveredToggle,
-    overwriteLineLayer,
-    overwritePmtilesSource,
-  } from "../../../maplibre_helpers";
   import { map } from "../../../stores";
   import {
     ColorLegend,
@@ -14,6 +8,12 @@
     InteractiveLayer,
   } from "../../common";
   import { Checkbox } from "../../govuk";
+  import {
+    constructMatchExpression,
+    hoveredToggle,
+    overwriteLineLayer,
+    overwritePmtilesSource,
+  } from "../../maplibre";
   import { colors } from "../colors";
 
   let name = "cycle_paths";

src/lib/browse/layers/ImdLayerControl.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
   import type { MapGeoJSONFeature } from "maplibre-gl";
+  import { map } from "../../../stores";
+  import { ExternalLink, HelpButton, InteractiveLayer } from "../../common";
+  import { Checkbox } from "../../govuk";
   import {
     hoveredToggle,
     makeColorRamp,
     overwriteLineLayer,
     overwritePmtilesSource,
     overwritePolygonLayer,
-  } from "../../../maplibre_helpers";
-  import { map } from "../../../stores";
-  import { ExternalLink, HelpButton, InteractiveLayer } from "../../common";
-  import { Checkbox } from "../../govuk";
+  } from "../../maplibre";
   import { colors } from "../colors";
   import SequentialLegend from "./SequentialLegend.svelte";
 

src/lib/browse/layers/LocalAuthorityDistrictsLayerControl.svelte

@@ -1,11 +1,5 @@
 <script lang="ts">
   import type { MapGeoJSONFeature } from "maplibre-gl";
-  import {
-    hoveredToggle,
-    overwriteLineLayer,
-    overwritePolygonLayer,
-    overwriteSource,
-  } from "../../../maplibre_helpers";
   import { map } from "../../../stores";
   import {
     ColorLegend,
@@ -14,6 +8,12 @@
     InteractiveLayer,
   } from "../../common";
   import { Checkbox } from "../../govuk";
+  import {
+    hoveredToggle,
+    overwriteLineLayer,
+    overwritePolygonLayer,
+    overwriteSource,
+  } from "../../maplibre";
   import { colors } from "../colors";
 
   let name = "local_authority_districts";

src/lib/browse/layers/LocalPlanningAuthoritiesLayerControl.svelte

@@ -1,11 +1,5 @@
 <script lang="ts">
   import type { MapGeoJSONFeature } from "maplibre-gl";
-  import {
-    hoveredToggle,
-    overwriteLineLayer,
-    overwritePmtilesSource,
-    overwritePolygonLayer,
-  } from "../../../maplibre_helpers";
   import { map } from "../../../stores";
   import {
     ColorLegend,
@@ -14,6 +8,12 @@
     InteractiveLayer,
   } from "../../common";
   import { Checkbox } from "../../govuk";
+  import {
+    hoveredToggle,
+    overwriteLineLayer,
+    overwritePmtilesSource,
+    overwritePolygonLayer,
+  } from "../../maplibre";
   import { colors } from "../colors";
 
   let name = "local_planning_authorities";

src/lib/browse/layers/MrnLayerControl.svelte

@@ -1,10 +1,5 @@
 <script lang="ts">
   import type { MapGeoJSONFeature } from "maplibre-gl";
-  import {
-    hoveredToggle,
-    overwriteLineLayer,
-    overwritePmtilesSource,
-  } from "../../../maplibre_helpers";
   import { map } from "../../../stores";
   import {
     ColorLegend,
@@ -13,6 +8,11 @@
     InteractiveLayer,
   } from "../../common";
   import { Checkbox } from "../../govuk";
+  import {
+    hoveredToggle,
+    overwriteLineLayer,
+    overwritePmtilesSource,
+  } from "../../maplibre";
   import { colors } from "../colors";
 
   let name = "mrn";

src/lib/browse/layers/ParliamentaryConstituenciesLayerControl.svelte

@@ -1,11 +1,5 @@
 <script lang="ts">
   import type { MapGeoJSONFeature } from "maplibre-gl";
-  import {
-    hoveredToggle,
-    overwriteLineLayer,
-    overwritePmtilesSource,
-    overwritePolygonLayer,
-  } from "../../../maplibre_helpers";
   import { map } from "../../../stores";
   import {
     ColorLegend,
@@ -14,6 +8,12 @@
     InteractiveLayer,
   } from "../../common";
   import { Checkbox } from "../../govuk";
+  import {
+    hoveredToggle,
+    overwriteLineLayer,
+    overwritePmtilesSource,
+    overwritePolygonLayer,
+  } from "../../maplibre";
   import { colors } from "../colors";
 
   let name = "parliamentary_constituencies";

src/lib/browse/layers/PointAmenityLayerControl.svelte

@@ -1,12 +1,9 @@
 <script lang="ts">
   import type { MapGeoJSONFeature } from "maplibre-gl";
-  import {
-    overwriteCircleLayer,
-    overwriteSource,
-  } from "../../../maplibre_helpers";
   import { map } from "../../../stores";
   import { ColorLegend, HelpButton, InteractiveLayer } from "../../common";
   import { Checkbox } from "../../govuk";
+  import { overwriteCircleLayer, overwriteSource } from "../../maplibre";
   import { colors } from "../colors";
 
   // This name is used for multiple things:

src/lib/browse/layers/PolygonAmenityLayerControl.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
   import type { MapGeoJSONFeature } from "maplibre-gl";
+  import { map } from "../../../stores";
+  import { ColorLegend, HelpButton, InteractiveLayer } from "../../common";
+  import { Checkbox } from "../../govuk";
   import {
     hoveredToggle,
     overwritePmtilesSource,
     overwritePolygonLayer,
-  } from "../../../maplibre_helpers";
-  import { map } from "../../../stores";
-  import { ColorLegend, HelpButton, InteractiveLayer } from "../../common";
-  import { Checkbox } from "../../govuk";
+  } from "../../maplibre";
   import { colors } from "../colors";
 
   // This name is used for multiple things: