Remove point amenity layer control and other PR comments

acteng · Sep 18, 2023 · 9e877c5 · 9e877c5
1 parent 52ac424
commit 9e877c5
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 94 deletions.
diff --git a/src/lib/browse/layers/CrossingsLayerControl.svelte b/src/lib/browse/layers/CrossingsLayerControl.svelte
@@ -1,13 +1,18 @@
 <script lang="ts">
-  import { circleRadius } from "colors";
-  import { ExternalLink } from "lib/common";
+  import {
+    ColorLegend,
+    ExternalLink,
+    HelpButton,
+    InteractiveLayer,
+  } from "lib/common";
+  import { Checkbox } from "lib/govuk";
   import { overwriteCircleLayer, overwritePmtilesSource } from "lib/maplibre";
   import type { MapGeoJSONFeature } from "maplibre-gl";
   import { map } from "stores";
   import { colors } from "../colors";
-  import PointAmenityLayerControl from "./PointAmenityLayerControl.svelte";
 
   const name = "crossings";
+  let show = false;
 
   function tooltip(feature: MapGeoJSONFeature): string {
     const crossingTypeString = feature.properties.crossing;
@@ -30,7 +35,7 @@
     ["island", "Crossing with an island"],
     [
       "informal",
-      "Infomral crossing where there crossing is not intended by the municipality but there is an obviously desire line",
+      "Informal crossing with an obvious desire line, but no official infrastructure to support it",
     ],
   ]);
 
@@ -46,8 +51,7 @@
     source: name,
     sourceLayer: name,
     color: color,
-    radius: circleRadius / 2,
-    // TODO Outline?
+    radius: ["interpolate", ["linear"], ["zoom"], 1, 2, 8, 3, 13, 10],
   });
 
   function onClick(e: CustomEvent<MapGeoJSONFeature>) {
@@ -58,24 +62,32 @@
   }
 </script>
 
-<PointAmenityLayerControl
-  {name}
-  pluralNoun="Crossings"
-  {circleRadius}
-  {tooltip}
-  {onClick}
->
-  <p>
-    This shows <ExternalLink
-      href="https://wiki.openstreetmap.org/wiki/Tag:crossing"
-    >
-      crossing
-    </ExternalLink> data from OpenStreetMap (as of 9 August 2023).
-  </p>
+<Checkbox id={name} bind:checked={show}>
+  <ColorLegend {color} />
+  Crossings
+  <span slot="right">
+    <HelpButton>
+      <p>
+        This shows <ExternalLink
+          href="https://wiki.openstreetmap.org/wiki/Key:crossing"
+        >
+          crossing
+        </ExternalLink> data from OpenStreetMap (as of 9 August 2023).
+      </p>
+
+      <p>
+        License: <ExternalLink href="https://www.openstreetmap.org/copyright">
+          Open Data Commons Open Database License
+        </ExternalLink>
+      </p>
+    </HelpButton>
+  </span>
+</Checkbox>
 
-  <p>
-    License: <ExternalLink href="https://www.openstreetmap.org/copyright">
-      Open Data Commons Open Database License
-    </ExternalLink>
-  </p>
-</PointAmenityLayerControl>
+<InteractiveLayer
+  layer={name}
+  {tooltip}
+  {show}
+  clickable={true}
+  on:click={onClick}
+/>
diff --git a/src/lib/browse/layers/PointAmenityLayerControl.svelte b/src/lib/browse/layers/PointAmenityLayerControl.svelte
diff --git a/src/lib/browse/layers/RailwayStationsLayerControl.svelte b/src/lib/browse/layers/RailwayStationsLayerControl.svelte
@@ -1,14 +1,20 @@
 <script lang="ts">
   import { circleRadius } from "colors";
-  import { ExternalLink } from "lib/common";
+  import {
+    ColorLegend,
+    ExternalLink,
+    HelpButton,
+    InteractiveLayer,
+  } from "lib/common";
+  import { Checkbox } from "lib/govuk";
   import { overwriteCircleLayer, overwriteSource } from "lib/maplibre";
   import type { MapGeoJSONFeature } from "maplibre-gl";
   import { map } from "stores";
   import { colors } from "../colors";
-  import PointAmenityLayerControl from "./PointAmenityLayerControl.svelte";
 
   const name = "railway_stations";
   const url = `${import.meta.env.VITE_RESOURCE_BASE}/layers/v1/${name}.geojson`;
+  let show = false;
 
   overwriteSource($map, name, url);
   let color = colors[name];
@@ -27,23 +33,32 @@
   }
 </script>
 
-<PointAmenityLayerControl
-  {name}
-  pluralNoun="Railway stations"
-  {circleRadius}
-  {tooltip}
->
-  <p>
-    This shows <ExternalLink
-      href="https://wiki.openstreetmap.org/wiki/Tag:railway%3Dstation"
-    >
-      railway station
-    </ExternalLink> data from OpenStreetMap (as of 9 August 2023).
-  </p>
+<Checkbox id={name} bind:checked={show}>
+  <ColorLegend {color} />
+  Railway Stations
+  <span slot="right">
+    <HelpButton>
+      <p>
+        This shows <ExternalLink
+          href="https://wiki.openstreetmap.org/wiki/Tag:railway%3Dstation"
+        >
+          railway station
+        </ExternalLink> data from OpenStreetMap (as of 9 August 2023).
+      </p>
+
+      <p>
+        License: <ExternalLink href="https://www.openstreetmap.org/copyright">
+          Open Data Commons Open Database License
+        </ExternalLink>
+      </p>
+    </HelpButton>
+  </span>
+</Checkbox>
 
-  <p>
-    License: <ExternalLink href="https://www.openstreetmap.org/copyright">
-      Open Data Commons Open Database License
-    </ExternalLink>
-  </p>
-</PointAmenityLayerControl>
+<InteractiveLayer
+  layer={name}
+  {tooltip}
+  {show}
+  clickable={false}
+  on:click={() => {}}
+/>