From 981b6b554b53893c01ebe93329ce9e543e716a9d Mon Sep 17 00:00:00 2001
From: Dustin Carlino <dabreegster@gmail.com>
Date: Tue, 8 Oct 2024 10:28:46 +0100
Subject: [PATCH] Get most layers using separate checkboxes to work

---
 src/lib/browse/LayerControls.svelte                      | 8 +++++---
 src/lib/browse/layers/LayerControl.svelte                | 6 ++++++
 src/lib/browse/layers/areas/CensusOutputAreas.svelte     | 6 +++++-
 src/lib/browse/layers/areas/CombinedAuthorities.svelte   | 5 +++--
 src/lib/browse/layers/areas/IMD.svelte                   | 5 +++--
 .../browse/layers/areas/LocalAuthorityDistricts.svelte   | 5 +++--
 .../browse/layers/areas/LocalPlanningAuthorities.svelte  | 5 +++--
 .../layers/areas/ParliamentaryConstituencies.svelte      | 5 +++--
 src/lib/browse/layers/areas/Pollution.svelte             | 9 +++++----
 src/lib/browse/layers/areas/RoadNoise.svelte             | 5 +++--
 src/lib/browse/layers/areas/Wards.svelte                 | 5 +++--
 src/lib/browse/layers/lines/BusRoutes.svelte             | 5 +++--
 src/lib/browse/layers/lines/CyclePaths.svelte            | 5 +++--
 src/lib/browse/layers/lines/Gradients.svelte             | 5 +++--
 src/lib/browse/layers/lines/MajorRoadNetwork.svelte      | 5 +++--
 src/lib/browse/layers/lines/NationalCycleNetwork.svelte  | 5 +++--
 src/lib/browse/layers/lines/PCT.svelte                   | 5 +++--
 src/lib/browse/layers/lines/PavementWidths.svelte        | 5 +++--
 src/lib/browse/layers/lines/RoadSpeeds.svelte            | 5 +++--
 src/lib/browse/layers/lines/RoadWidths.svelte            | 5 +++--
 src/lib/browse/layers/lines/StrategicRoadNetwork.svelte  | 5 +++--
 src/lib/browse/layers/lines/Trams.svelte                 | 5 +++--
 src/lib/browse/layers/points/BusStops.svelte             | 5 +++--
 src/lib/browse/layers/points/Crossings.svelte            | 5 +++--
 src/lib/browse/layers/points/CycleParking.svelte         | 5 +++--
 src/lib/browse/layers/points/Education.svelte            | 7 +++----
 src/lib/browse/layers/points/Hospitals.svelte            | 7 +++----
 src/lib/browse/layers/points/Problems.svelte             | 5 +++--
 src/lib/browse/layers/points/RailwayStations.svelte      | 7 +++----
 src/lib/browse/layers/points/SportsSpaces.svelte         | 7 +++----
 src/lib/browse/layers/points/Stats19.svelte              | 5 +++--
 src/lib/browse/layers/points/VehicleCounts.svelte        | 5 +++--
 32 files changed, 105 insertions(+), 72 deletions(-)

diff --git a/src/lib/browse/LayerControls.svelte b/src/lib/browse/LayerControls.svelte
index 8c566639..5a80e480 100644
--- a/src/lib/browse/LayerControls.svelte
+++ b/src/lib/browse/LayerControls.svelte
@@ -93,9 +93,11 @@
     </CheckboxGroup>
   </CollapsibleCard>
   <CollapsibleCard label="Public transport">
-    <BusRoutesLayerControl />
-    <TramsLayerControl />
-    <BusStopsLayerControl />
+    <CheckboxGroup small>
+      <BusRoutesLayerControl />
+      <TramsLayerControl />
+      <BusStopsLayerControl />
+    </CheckboxGroup>
   </CollapsibleCard>
   <CollapsibleCard label="Boundaries">
     <CheckboxGroup small>
diff --git a/src/lib/browse/layers/LayerControl.svelte b/src/lib/browse/layers/LayerControl.svelte
index 23d16486..c5c8b1f2 100644
--- a/src/lib/browse/layers/LayerControl.svelte
+++ b/src/lib/browse/layers/LayerControl.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
+  import { Checkbox } from "govuk-svelte";
   import { onDestroy } from "svelte";
   import { layerLegends } from "./stores";
 
   export let name: string;
+  export let title: string;
+  // This must be bound to state that controls the layer display and URL
+  export let show: boolean;
 
   // TODO explain the remote DOM pattern
   let contents: HTMLDivElement | null = null;
@@ -25,6 +29,8 @@
   });
 </script>
 
+<Checkbox bind:checked={show}>{title}</Checkbox>
+
 <div bind:this={contents}>
   <slot />
 </div>
diff --git a/src/lib/browse/layers/areas/CensusOutputAreas.svelte b/src/lib/browse/layers/areas/CensusOutputAreas.svelte
index f0991fd8..77e800cb 100644
--- a/src/lib/browse/layers/areas/CensusOutputAreas.svelte
+++ b/src/lib/browse/layers/areas/CensusOutputAreas.svelte
@@ -95,7 +95,11 @@
   }
 </script>
 
-<LayerControl {name}>
+<LayerControl
+  {name}
+  title="TODO the 3 census layers"
+  bind:show={showHouseholdsWithCar}
+>
   <Checkbox
     bind:checked={showHouseholdsWithCar}
     on:change={() => {
diff --git a/src/lib/browse/layers/areas/CombinedAuthorities.svelte b/src/lib/browse/layers/areas/CombinedAuthorities.svelte
index 7dc4ec31..5824a1d9 100644
--- a/src/lib/browse/layers/areas/CombinedAuthorities.svelte
+++ b/src/lib/browse/layers/areas/CombinedAuthorities.svelte
@@ -21,6 +21,7 @@
   import { showHideLayer } from "../url";
 
   let name = "combined_authorities";
+  let title = "Combined authorities";
   let color = colors.combined_authorities;
 
   let show = showHideLayer(name);
@@ -35,10 +36,10 @@
   }
 </script>
 
-<LayerControl {name}>
+<LayerControl {name} {title} bind:show={$show}>
   <Checkbox bind:checked={$show}>
     <ColorLegend {color} />
-    Combined authorities
+    {title}
     <span slot="right">
       <HelpButton>
         <p>
diff --git a/src/lib/browse/layers/areas/IMD.svelte b/src/lib/browse/layers/areas/IMD.svelte
index 2df058dc..7a5e71c4 100644
--- a/src/lib/browse/layers/areas/IMD.svelte
+++ b/src/lib/browse/layers/areas/IMD.svelte
@@ -20,6 +20,7 @@
   import { showHideLayer } from "../url";
 
   let name = "imd";
+  let title = "Indices of Multiple Deprivation";
 
   let colorScale = colors.sequential_low_to_high;
   // The deciles are [1, 10]. The 5 colors cover two each.
@@ -28,9 +29,9 @@
   let show = showHideLayer(name);
 </script>
 
-<LayerControl {name}>
+<LayerControl {name} {title} bind:show={$show}>
   <Checkbox bind:checked={$show}>
-    Indices of Multiple Deprivation
+    {title}
     <span slot="right">
       <HelpButton>
         <p>
diff --git a/src/lib/browse/layers/areas/LocalAuthorityDistricts.svelte b/src/lib/browse/layers/areas/LocalAuthorityDistricts.svelte
index e8ae0c40..ecdadf0b 100644
--- a/src/lib/browse/layers/areas/LocalAuthorityDistricts.svelte
+++ b/src/lib/browse/layers/areas/LocalAuthorityDistricts.svelte
@@ -21,6 +21,7 @@
   import { showHideLayer } from "../url";
 
   let name = "local_authority_districts";
+  let title = "Local Authority Districts";
   let color = colors.local_authority_districts;
 
   let show = showHideLayer(name);
@@ -35,10 +36,10 @@
   }
 </script>
 
-<LayerControl {name}>
+<LayerControl {name} {title} bind:show={$show}>
   <Checkbox bind:checked={$show}>
     <ColorLegend {color} />
-    Local Authority Districts
+    {title}
     <span slot="right">
       <HelpButton>
         <p>
diff --git a/src/lib/browse/layers/areas/LocalPlanningAuthorities.svelte b/src/lib/browse/layers/areas/LocalPlanningAuthorities.svelte
index e27986aa..3979e0ed 100644
--- a/src/lib/browse/layers/areas/LocalPlanningAuthorities.svelte
+++ b/src/lib/browse/layers/areas/LocalPlanningAuthorities.svelte
@@ -20,6 +20,7 @@
   import { showHideLayer } from "../url";
 
   let name = "local_planning_authorities";
+  let title = "Local Planning Authorities";
   let color = colors.local_planning_authorities;
 
   let show = showHideLayer(name);
@@ -28,10 +29,10 @@
   // -- but can't we fix that now?
 </script>
 
-<LayerControl {name}>
+<LayerControl {name} {title} bind:show={$show}>
   <Checkbox bind:checked={$show}>
     <ColorLegend {color} />
-    Local Planning Authorities
+    {title}
     <span slot="right">
       <HelpButton>
         <p>
diff --git a/src/lib/browse/layers/areas/ParliamentaryConstituencies.svelte b/src/lib/browse/layers/areas/ParliamentaryConstituencies.svelte
index f66635e3..fff18750 100644
--- a/src/lib/browse/layers/areas/ParliamentaryConstituencies.svelte
+++ b/src/lib/browse/layers/areas/ParliamentaryConstituencies.svelte
@@ -21,6 +21,7 @@
   import { showHideLayer } from "../url";
 
   let name = "parliamentary_constituencies";
+  let title = "Parliamentary constituencies";
   let color = colors.parliamentary_constituencies;
 
   let show = showHideLayer(name);
@@ -40,10 +41,10 @@
   }
 </script>
 
-<LayerControl {name}>
+<LayerControl {name} {title} bind:show={$show}>
   <Checkbox bind:checked={$show}>
     <ColorLegend {color} />
-    Parliamentary constituencies
+    {title}
     <span slot="right">
       <HelpButton>
         <p>
diff --git a/src/lib/browse/layers/areas/Pollution.svelte b/src/lib/browse/layers/areas/Pollution.svelte
index e6b10b57..b9cf06db 100644
--- a/src/lib/browse/layers/areas/Pollution.svelte
+++ b/src/lib/browse/layers/areas/Pollution.svelte
@@ -8,6 +8,7 @@
   import { customUrlState } from "../url";
 
   let name = "pollution";
+  let title = "Pollution";
 
   type State = {
     show: boolean;
@@ -51,7 +52,7 @@
     return `https://ukair.maps.rcdo.co.uk/ukairserver/services/aq_amb_2022/${$state.pollutant}/MapServer/WMSServer`;
   }
 
-  function title(pollutant: string): string {
+  function label(pollutant: string): string {
     return info![1];
   }
 
@@ -81,9 +82,9 @@
   }
 </script>
 
-<LayerControl {name}>
+<LayerControl {name} {title} bind:show={$state.show}>
   <Checkbox bind:checked={$state.show}>
-    Pollution
+    {title}
     <span slot="right">
       <HelpButton>
         <p>
@@ -114,7 +115,7 @@
       ]}
       bind:value={$state.pollutant}
     />
-    <p>{title($state.pollutant)}</p>
+    <p>{label($state.pollutant)}</p>
 
     <div>
       <label>
diff --git a/src/lib/browse/layers/areas/RoadNoise.svelte b/src/lib/browse/layers/areas/RoadNoise.svelte
index a6994d72..a0e2513f 100644
--- a/src/lib/browse/layers/areas/RoadNoise.svelte
+++ b/src/lib/browse/layers/areas/RoadNoise.svelte
@@ -19,6 +19,7 @@
   import { showHideLayer } from "../url";
 
   let name = "road_noise";
+  let title = "Road noise";
 
   // 5 buckets from the input are grouped into 3
   function describe(noiseclass: string): string {
@@ -40,9 +41,9 @@
   let show = showHideLayer(name);
 </script>
 
-<LayerControl {name}>
+<LayerControl {name} {title} bind:show={$show}>
   <Checkbox bind:checked={$show}>
-    Road noise
+    {title}
     <span slot="right">
       <HelpButton>
         <p>
diff --git a/src/lib/browse/layers/areas/Wards.svelte b/src/lib/browse/layers/areas/Wards.svelte
index 96d2f96f..2394e50a 100644
--- a/src/lib/browse/layers/areas/Wards.svelte
+++ b/src/lib/browse/layers/areas/Wards.svelte
@@ -21,6 +21,7 @@
   import { showHideLayer } from "../url";
 
   let name = "wards";
+  let title = "Wards";
   let color = colors.wards;
 
   let show = showHideLayer(name);
@@ -32,10 +33,10 @@
   }
 </script>
 
-<LayerControl {name}>
+<LayerControl {name} {title} bind:show={$show}>
   <Checkbox bind:checked={$show}>
     <ColorLegend {color} />
-    Wards
+    {title}
     <span slot="right">
       <HelpButton>
         <p>
diff --git a/src/lib/browse/layers/lines/BusRoutes.svelte b/src/lib/browse/layers/lines/BusRoutes.svelte
index c8ff0996..aa1690f3 100644
--- a/src/lib/browse/layers/lines/BusRoutes.svelte
+++ b/src/lib/browse/layers/lines/BusRoutes.svelte
@@ -19,14 +19,15 @@
   import { showHideLayer } from "../url";
 
   let name = "bus_routes";
+  let title = "Bus routes";
 
   let show = showHideLayer(name);
 </script>
 
-<LayerControl {name}>
+<LayerControl {name} {title} bind:show={$show}>
   <Checkbox bind:checked={$show}>
     <ColorLegend color={colors.bus_route_with_lane} />
-    Bus routes
+    {title}
     <span slot="right">
       <HelpButton>
         <p>
diff --git a/src/lib/browse/layers/lines/CyclePaths.svelte b/src/lib/browse/layers/lines/CyclePaths.svelte
index 91749a4f..dbc0be0c 100644
--- a/src/lib/browse/layers/lines/CyclePaths.svelte
+++ b/src/lib/browse/layers/lines/CyclePaths.svelte
@@ -20,6 +20,7 @@
   import { customUrlState } from "../url";
 
   let name = "cycle_paths";
+  let title = "Cycle paths";
 
   type State = {
     show: boolean;
@@ -102,9 +103,9 @@
   }
 </script>
 
-<LayerControl {name}>
+<LayerControl {name} {title} bind:show={$state.show}>
   <Checkbox bind:checked={$state.show}>
-    Cycle paths
+    {title}
     <span slot="right">
       <HelpButton>
         <p>
diff --git a/src/lib/browse/layers/lines/Gradients.svelte b/src/lib/browse/layers/lines/Gradients.svelte
index 6793b5f4..115a586c 100644
--- a/src/lib/browse/layers/lines/Gradients.svelte
+++ b/src/lib/browse/layers/lines/Gradients.svelte
@@ -21,15 +21,16 @@
   import { showHideLayer } from "../url";
 
   let name = "gradient";
+  let title = "Gradients";
   let colorScale = colors.gradient_flat_to_steep;
   let limits = [0, 3, 5, 8, 10, 20, 100];
 
   let show = showHideLayer(name);
 </script>
 
-<LayerControl {name}>
+<LayerControl {name} {title} bind:show={$show}>
   <Checkbox bind:checked={$show}>
-    Gradients
+    {title}
     <span slot="right">
       <HelpButton>
         <p>
diff --git a/src/lib/browse/layers/lines/MajorRoadNetwork.svelte b/src/lib/browse/layers/lines/MajorRoadNetwork.svelte
index 7b4de6de..24117a26 100644
--- a/src/lib/browse/layers/lines/MajorRoadNetwork.svelte
+++ b/src/lib/browse/layers/lines/MajorRoadNetwork.svelte
@@ -19,15 +19,16 @@
   import { showHideLayer } from "../url";
 
   let name = "mrn";
+  let title = "Major Road Network";
   let color = colors.mrn;
 
   let show = showHideLayer(name);
 </script>
 
-<LayerControl {name}>
+<LayerControl {name} {title} bind:show={$show}>
   <Checkbox bind:checked={$show}>
     <ColorLegend {color} />
-    Major Road Network
+    {title}
     <span slot="right">
       <HelpButton>
         <p>
diff --git a/src/lib/browse/layers/lines/NationalCycleNetwork.svelte b/src/lib/browse/layers/lines/NationalCycleNetwork.svelte
index 4398a9fd..13b4f6c3 100644
--- a/src/lib/browse/layers/lines/NationalCycleNetwork.svelte
+++ b/src/lib/browse/layers/lines/NationalCycleNetwork.svelte
@@ -19,15 +19,16 @@
   import { showHideLayer } from "../url";
 
   let name = "national_cycle_network";
+  let title = "National Cycle Network";
   let color = colors.national_cycle_network;
 
   let show = showHideLayer(name);
 </script>
 
-<LayerControl {name}>
+<LayerControl {name} {title} bind:show={$show}>
   <Checkbox bind:checked={$show}>
     <ColorLegend {color} />
-    National Cycle Network
+    {title}
     <span slot="right">
       <HelpButton>
         <p>
diff --git a/src/lib/browse/layers/lines/PCT.svelte b/src/lib/browse/layers/lines/PCT.svelte
index fd09966a..4ce7f822 100644
--- a/src/lib/browse/layers/lines/PCT.svelte
+++ b/src/lib/browse/layers/lines/PCT.svelte
@@ -20,6 +20,7 @@
   // TODO It'd be much simpler to have one source with both attributes
   let nameCommute = "pct_commute";
   let nameSchool = "pct_school";
+  let title = "Propensity to Cycle Tool";
   let colorScale = colors.sequential_low_to_high;
   let limits = [0, 50, 100, 500, 1000, 2000];
 
@@ -69,9 +70,9 @@
   }
 </script>
 
-<LayerControl name="pct">
+<LayerControl name="pct" {title} bind:show={$state.show}>
   <Checkbox bind:checked={$state.show}>
-    Propensity to Cycle Tool
+    {title}
     <span slot="right">
       <HelpButton>
         <p>
diff --git a/src/lib/browse/layers/lines/PavementWidths.svelte b/src/lib/browse/layers/lines/PavementWidths.svelte
index 086f0b4f..9f172057 100644
--- a/src/lib/browse/layers/lines/PavementWidths.svelte
+++ b/src/lib/browse/layers/lines/PavementWidths.svelte
@@ -18,6 +18,7 @@
   import { showHideLayer } from "../url";
 
   let name = "pavement_widths";
+  let title = "OS Pavement widths";
   let colorScale = colors.sequential_low_to_high;
   let limits = [0, 2, 4, 6, 8, 13];
 
@@ -37,9 +38,9 @@
   }
 </script>
 
-<LayerControl {name}>
+<LayerControl {name} {title} bind:show={$show}>
   <Checkbox bind:checked={$show}>
-    OS Pavement widths
+    {title}
     <span slot="right">
       <HelpButton>
         <p>
diff --git a/src/lib/browse/layers/lines/RoadSpeeds.svelte b/src/lib/browse/layers/lines/RoadSpeeds.svelte
index 60abe858..95a17270 100644
--- a/src/lib/browse/layers/lines/RoadSpeeds.svelte
+++ b/src/lib/browse/layers/lines/RoadSpeeds.svelte
@@ -18,6 +18,7 @@
   import { customUrlState } from "../url";
 
   let name = "road_speeds";
+  let title = "OS Speeds";
   let colorScale = colors.sequential_low_to_high;
   let limits = [0, 20, 30, 40, 50, 90];
 
@@ -58,9 +59,9 @@
   };
 </script>
 
-<LayerControl {name}>
+<LayerControl {name} {title} bind:show={$state.show}>
   <Checkbox bind:checked={$state.show}>
-    OS Speeds
+    {title}
     <span slot="right">
       <HelpButton>
         <p>
diff --git a/src/lib/browse/layers/lines/RoadWidths.svelte b/src/lib/browse/layers/lines/RoadWidths.svelte
index 9ccfeaad..6bd96666 100644
--- a/src/lib/browse/layers/lines/RoadWidths.svelte
+++ b/src/lib/browse/layers/lines/RoadWidths.svelte
@@ -18,15 +18,16 @@
   import { showHideLayer } from "../url";
 
   let name = "road_widths";
+  let title = "OS Road widths";
   let colorScale = colors.sequential_low_to_high;
   let limits = [0, 5, 10, 15, 20, 100];
 
   let show = showHideLayer(name);
 </script>
 
-<LayerControl {name}>
+<LayerControl {name} {title} bind:show={$show}>
   <Checkbox bind:checked={$show}>
-    OS Road widths
+    {title}
     <span slot="right">
       <HelpButton>
         <p>
diff --git a/src/lib/browse/layers/lines/StrategicRoadNetwork.svelte b/src/lib/browse/layers/lines/StrategicRoadNetwork.svelte
index e7f8e04a..e774320b 100644
--- a/src/lib/browse/layers/lines/StrategicRoadNetwork.svelte
+++ b/src/lib/browse/layers/lines/StrategicRoadNetwork.svelte
@@ -19,15 +19,16 @@
   import { showHideLayer } from "../url";
 
   let name = "srn";
+  let title = "Strategic Road Network";
   let color = colors.srn;
 
   let show = showHideLayer(name);
 </script>
 
-<LayerControl {name}>
+<LayerControl {name} {title} bind:show={$show}>
   <Checkbox bind:checked={$show}>
     <ColorLegend {color} />
-    Strategic Road Network
+    {title}
     <span slot="right">
       <HelpButton>
         <p>
diff --git a/src/lib/browse/layers/lines/Trams.svelte b/src/lib/browse/layers/lines/Trams.svelte
index 1f9405f2..a8744563 100644
--- a/src/lib/browse/layers/lines/Trams.svelte
+++ b/src/lib/browse/layers/lines/Trams.svelte
@@ -14,6 +14,7 @@
   import { showHideLayer } from "../url";
 
   let name = "trams";
+  let title = "Trams";
 
   let show = showHideLayer(name);
 
@@ -25,10 +26,10 @@
   }
 </script>
 
-<LayerControl {name}>
+<LayerControl {name} {title} bind:show={$show}>
   <Checkbox bind:checked={$show}>
     <ColorLegend color={colors.trams} />
-    Trams
+    {title}
     <span slot="right">
       <HelpButton>
         <p>
diff --git a/src/lib/browse/layers/points/BusStops.svelte b/src/lib/browse/layers/points/BusStops.svelte
index a89cd3ce..856698ea 100644
--- a/src/lib/browse/layers/points/BusStops.svelte
+++ b/src/lib/browse/layers/points/BusStops.svelte
@@ -15,6 +15,7 @@
   import { showHideLayer } from "../url";
 
   let name = "bus_stops";
+  let title = "Bus stops";
 
   let colorScale = colors.sequential_low_to_high;
   let limits = [0, 3, 10, 20, 30, 100];
@@ -22,9 +23,9 @@
   let show = showHideLayer(name);
 </script>
 
-<LayerControl {name}>
+<LayerControl {name} {title} bind:show={$show}>
   <Checkbox bind:checked={$show}>
-    Bus stops
+    {title}
     <span slot="right">
       <HelpButton>
         <p>
diff --git a/src/lib/browse/layers/points/Crossings.svelte b/src/lib/browse/layers/points/Crossings.svelte
index 128e5f75..4ca39045 100644
--- a/src/lib/browse/layers/points/Crossings.svelte
+++ b/src/lib/browse/layers/points/Crossings.svelte
@@ -19,6 +19,7 @@
   import { showHideLayer } from "../url";
 
   let name = "crossings";
+  let title = "Crossings";
 
   let show = showHideLayer(name);
 
@@ -55,9 +56,9 @@
   ];
 </script>
 
-<LayerControl {name}>
+<LayerControl {name} {title} bind:show={$show}>
   <Checkbox bind:checked={$show}>
-    Crossings
+    {title}
     <span slot="right">
       <HelpButton>
         <p>
diff --git a/src/lib/browse/layers/points/CycleParking.svelte b/src/lib/browse/layers/points/CycleParking.svelte
index 81754b6b..d1c1b0ec 100644
--- a/src/lib/browse/layers/points/CycleParking.svelte
+++ b/src/lib/browse/layers/points/CycleParking.svelte
@@ -14,14 +14,15 @@
   import { showHideLayer } from "../url";
 
   let name = "cycle_parking";
+  let title = "Cycle parking";
 
   let show = showHideLayer(name);
 </script>
 
-<LayerControl {name}>
+<LayerControl {name} {title} bind:show={$show}>
   <Checkbox bind:checked={$show}>
     <img src={cycleParking} alt="a logo representing cycle parking" />
-    Cycle parking
+    {title}
     <span slot="right">
       <HelpButton>
         <p>
diff --git a/src/lib/browse/layers/points/Education.svelte b/src/lib/browse/layers/points/Education.svelte
index 1bb1996a..75449dfd 100644
--- a/src/lib/browse/layers/points/Education.svelte
+++ b/src/lib/browse/layers/points/Education.svelte
@@ -19,6 +19,7 @@
   import { customUrlState } from "../url";
 
   let name = "education";
+  let title = "Education";
 
   type State = {
     show: boolean;
@@ -53,11 +54,9 @@
   }
 </script>
 
-<Checkbox bind:checked={$state.show}>Education</Checkbox>
-
-<LayerControl {name}>
+<LayerControl {name} {title} bind:show={$state.show}>
   <Checkbox bind:checked={$state.show}>
-    Education
+    {title}
     <span slot="right">
       <HelpButton>
         <p>
diff --git a/src/lib/browse/layers/points/Hospitals.svelte b/src/lib/browse/layers/points/Hospitals.svelte
index e109d553..1f351c2b 100644
--- a/src/lib/browse/layers/points/Hospitals.svelte
+++ b/src/lib/browse/layers/points/Hospitals.svelte
@@ -19,16 +19,15 @@
   import OsmLicense from "../OsmLicense.svelte";
 
   let name = "hospitals";
+  let title = "Hospitals";
 
   let show = showHideLayer(name);
 </script>
 
-<Checkbox bind:checked={$show}>Hospitals</Checkbox>
-
-<LayerControl {name}>
+<LayerControl {name} {title} bind:show={$show}>
   <Checkbox bind:checked={$show}>
     <ColorLegend color={colors.hospitals} />
-    Hospitals
+    {title}
     <span slot="right">
       <HelpButton>
         <p>
diff --git a/src/lib/browse/layers/points/Problems.svelte b/src/lib/browse/layers/points/Problems.svelte
index fcaa1a8c..177f066f 100644
--- a/src/lib/browse/layers/points/Problems.svelte
+++ b/src/lib/browse/layers/points/Problems.svelte
@@ -12,6 +12,7 @@
   import { showHideLayer } from "../url";
 
   let name = "problems";
+  let title = "Issues & Conflicts";
 
   let show = showHideLayer(name);
 
@@ -44,9 +45,9 @@
   ];
 </script>
 
-<LayerControl {name}>
+<LayerControl {name} {title} bind:show={$show}>
   <Checkbox bind:checked={$show}>
-    Issues & Conflicts
+    {title}
     <span slot="right">
       <HelpButton>
         <p>
diff --git a/src/lib/browse/layers/points/RailwayStations.svelte b/src/lib/browse/layers/points/RailwayStations.svelte
index 3ef912f4..a47829b8 100644
--- a/src/lib/browse/layers/points/RailwayStations.svelte
+++ b/src/lib/browse/layers/points/RailwayStations.svelte
@@ -14,16 +14,15 @@
   import { showHideLayer } from "../url";
 
   let name = "railway_stations";
+  let title = "Railway stations";
 
   let show = showHideLayer(name);
 </script>
 
-<Checkbox bind:checked={$show}>Railway stations</Checkbox>
-
-<LayerControl {name}>
+<LayerControl {name} {title} bind:show={$show}>
   <Checkbox bind:checked={$show}>
     <img src={railwayStation} alt="A logo representing a train" />
-    Railway stations
+    {title}
     <span slot="right">
       <HelpButton>
         <p>
diff --git a/src/lib/browse/layers/points/SportsSpaces.svelte b/src/lib/browse/layers/points/SportsSpaces.svelte
index df4bb089..086d361e 100644
--- a/src/lib/browse/layers/points/SportsSpaces.svelte
+++ b/src/lib/browse/layers/points/SportsSpaces.svelte
@@ -19,16 +19,15 @@
   import OsmLicense from "../OsmLicense.svelte";
 
   let name = "sports_spaces";
+  let title = "Sports spaces";
 
   let show = showHideLayer(name);
 </script>
 
-<Checkbox bind:checked={$show}>Sports spaces</Checkbox>
-
-<LayerControl {name}>
+<LayerControl {name} {title} bind:show={$show}>
   <Checkbox bind:checked={$show}>
     <ColorLegend color={colors.sports_spaces} />
-    Sports spaces
+    {title}
     <span slot="right">
       <HelpButton>
         <p>
diff --git a/src/lib/browse/layers/points/Stats19.svelte b/src/lib/browse/layers/points/Stats19.svelte
index 01ec9240..fd516389 100644
--- a/src/lib/browse/layers/points/Stats19.svelte
+++ b/src/lib/browse/layers/points/Stats19.svelte
@@ -20,6 +20,7 @@
   import { customUrlState } from "../url";
 
   let name = "stats19";
+  let title = "Stats19";
 
   type State = {
     show: boolean;
@@ -167,9 +168,9 @@
   ];
 </script>
 
-<LayerControl {name}>
+<LayerControl {name} {title} bind:show={$state.show}>
   <Checkbox bind:checked={$state.show}>
-    Stats19
+    {title}
     <span slot="right">
       <HelpButton>
         <p>
diff --git a/src/lib/browse/layers/points/VehicleCounts.svelte b/src/lib/browse/layers/points/VehicleCounts.svelte
index c953f00a..55884636 100644
--- a/src/lib/browse/layers/points/VehicleCounts.svelte
+++ b/src/lib/browse/layers/points/VehicleCounts.svelte
@@ -19,6 +19,7 @@
   import { showHideLayer } from "../url";
 
   let name = "vehicle_counts";
+  let title = "Vehicle counts";
 
   let colorScale = colors.sequential_low_to_high;
   // Manual buckets for motor_vehicles, which max out at 205,000
@@ -38,9 +39,9 @@
   }
 </script>
 
-<LayerControl {name}>
+<LayerControl {name} {title} bind:show={$show}>
   <Checkbox bind:checked={$show}>
-    Vehicle counts
+    {title}
     <span slot="right">
       <HelpButton>
         <p>