Consolidate 3 layer-like controls

acteng · Jul 16, 2023 · c1f20f1 · c1f20f1
1 parent a22ba2e
commit c1f20f1
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 55 deletions.
diff --git a/src/lib/BaselayerSwitcher.svelte b/src/lib/BaselayerSwitcher.svelte
diff --git a/src/lib/Legend.svelte b/src/lib/Legend.svelte
@@ -2,12 +2,25 @@
   import { colors } from "../colors";
   import type { Schema } from "../types";
   import CollapsibleCard from "./common/CollapsibleCard.svelte";
+  import Select from "./govuk/Select.svelte";
 
   export let schema: Schema;
+  // TODO Be specific about "streets" | "hybrid", but then we need actual error
+  // handling when we parse it from URL params
+  export let style: string;
+
+  function changeStyle() {
+    let params = new URLSearchParams(window.location.search);
+    params.set("style", style);
+    let href = `${window.location.pathname}?${params.toString()}${
+      window.location.hash
+    }`;
+    window.location.href = href;
+  }
 </script>
 
 <div>
-  <CollapsibleCard label="Objects" open>
+  <CollapsibleCard label="Layers" open>
     <ul>
       {#if schema == "planning"}
         <li>
@@ -45,6 +58,19 @@
         </li>
       {/if}
     </ul>
+
+    <Select
+      label="Basemap"
+      id="basemap"
+      choices={[
+        ["streets", "Streets"],
+        ["hybrid", "Satellite"],
+      ]}
+      bind:value={style}
+      on:change={changeStyle}
+    />
+
+    <slot />
   </CollapsibleCard>
 </div>
 

diff --git a/src/pages/App.svelte b/src/pages/App.svelte
@@ -5,7 +5,6 @@
   import type { FeatureCollection, Polygon } from "geojson";
   import { onMount } from "svelte";
   import authoritiesUrl from "../../assets/authorities.geojson?url";
-  import BaselayerSwitcher from "../lib/BaselayerSwitcher.svelte";
   import BoundaryLayer from "../lib/BoundaryLayer.svelte";
   import Layout from "../lib/common/Layout.svelte";
   import HoverLayer from "../lib/draw/HoverLayer.svelte";
@@ -112,17 +111,16 @@
     <EntireScheme {authorityName} {schema} />
     <hr />
     <InterventionList {schema} />
-    <hr />
-    <ContextualLayers />
   </div>
   <div slot="main">
     <Map {style}>
       <BoundaryLayer {boundaryGeojson} />
       <InterventionLayer {schema} />
       <HoverLayer />
       <Toolbox {routeSnapperUrl} {schema} />
-      <BaselayerSwitcher {style} />
-      <Legend {schema} />
+      <Legend {schema} {style}>
+        <ContextualLayers />
+      </Legend>
     </Map>
   </div>
 </Layout>

diff --git a/src/pages/BrowseSchemes.svelte b/src/pages/BrowseSchemes.svelte
@@ -7,7 +7,6 @@
   import "../style/main.css";
   import type { GeoJSON } from "geojson";
   import { onDestroy, onMount } from "svelte";
-  import BaselayerSwitcher from "../lib/BaselayerSwitcher.svelte";
   import CollapsibleCard from "../lib/common/CollapsibleCard.svelte";
   import FileInput from "../lib/common/FileInput.svelte";
   import Layout from "../lib/common/Layout.svelte";
@@ -279,8 +278,7 @@
   <div slot="main">
     <Map {style}>
       <InterventionLayer {schema} />
-      <BaselayerSwitcher {style} />
-      <Legend {schema} />
+      <Legend {schema} {style} />
       <MapTooltips
         layers={[
           "interventions-points",

diff --git a/tests/modes.spec.ts b/tests/modes.spec.ts
@@ -112,25 +112,25 @@ test("creating a new route opens a form, and auto-fill sets its name", async ()
 test("editing geometry of a polygon works", async () => {
   // Create a polygon
   await page.getByRole("button", { name: "New polygon (snapped)" }).click();
-  await clickMap(page, 241, 509);
-  await clickMap(page, 235, 431);
+  await clickMap(page, 241, 579);
+  await clickMap(page, 304, 428);
   await clickMap(page, 465, 459);
   await page.getByRole("button", { name: "Finish" }).click();
   await page.getByRole("button", { name: "1) Untitled area" }).isVisible();
   await page.getByLabel("Description").click();
 
   // Click off the polygon to close the form
-  await clickMap(page, 284, 284);
+  await clickMap(page, 401, 320);
   // Make sure the form is closed
   await expect(page.getByLabel("Description")).not.toBeVisible();
 
   // Click the polygon to open the form
-  await clickMap(page, 312, 501);
+  await clickMap(page, 358, 478);
   await page.getByLabel("Description").click();
 
   // Edit geometry, and click the polygon again
   await page.getByRole("button", { name: "Edit geometry" }).click();
-  await clickMap(page, 312, 501);
+  await clickMap(page, 358, 478);
   // This button indicates the mode is working
   await expect(page.getByRole("button", { name: "Finish" })).toBeVisible();
 });
@@ -144,8 +144,8 @@ test("adding interventions, then deleting one, then adding another", async () =>
   await page.getByRole("button", { name: "1) Untitled route" }).click();
   await page.getByRole("button", { name: "Delete" }).click();
   await page.getByRole("button", { name: "New route" }).click();
-  await clickMap(page, 196, 375);
-  await clickMap(page, 481, 399);
+  await clickMap(page, 302, 175);
+  await clickMap(page, 408, 384);
   await page.getByRole("button", { name: "Finish" }).click();
 
   await page.getByRole("button", { name: "1) Untitled route" }).isVisible();