Get most layers using separate checkboxes to work

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>

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>

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={() => {

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>