From fdc933825d53db751c25119a691ccd8990f7446f Mon Sep 17 00:00:00 2001
From: Dustin Carlino <dabreegster@gmail.com>
Date: Fri, 2 Feb 2024 16:52:47 +0000
Subject: [PATCH] Switch basemaps #9

---
 web/src/App.svelte                  | 21 ++++-----------------
 web/src/common/BasemapPicker.svelte | 21 +++++++++++++++++++++
 web/src/common/Geocoder.svelte      |  4 +++-
 web/src/common/index.ts             |  1 +
 web/src/common/zorder.ts            |  1 +
 web/src/stores.ts                   |  3 +++
 6 files changed, 33 insertions(+), 18 deletions(-)
 create mode 100644 web/src/common/BasemapPicker.svelte

diff --git a/web/src/App.svelte b/web/src/App.svelte
index b379869..5216a82 100644
--- a/web/src/App.svelte
+++ b/web/src/App.svelte
@@ -4,7 +4,7 @@
   import initRouteSnapper from "route-snapper";
   import { onMount } from "svelte";
   import { FillLayer, GeoJSON, MapLibre } from "svelte-maplibre";
-  import { Geocoder, Layout, layerId } from "./common";
+  import { Geocoder, Layout, layerId, BasemapPicker } from "./common";
   import DebugMode from "./DebugMode.svelte";
   import DebugGJ from "./DebugGJ.svelte";
   import NeighbourhoodMode from "./edit/NeighbourhoodMode.svelte";
@@ -17,7 +17,7 @@
     map as mapStore,
     mode,
     sidebarContents,
-    maptilerApiKey,
+    mapStyle,
   } from "./stores";
   import TitleMode from "./title/TitleMode.svelte";
   import ViewShortcutsMode from "./ViewShortcutsMode.svelte";
@@ -29,15 +29,6 @@
     wasmReady = true;
   });
 
-  let showBasemap = true;
-  $: mapStyle = showBasemap
-    ? `https://api.maptiler.com/maps/dataviz/style.json?key=${maptilerApiKey}`
-    : {
-        version: 8 as const,
-        sources: {},
-        layers: [],
-      };
-
   let map: Map;
   $: if (map) {
     mapStore.set(map);
@@ -71,15 +62,11 @@
     {#if $app}
       <div><button on:click={zoomToFit}>Zoom to fit study area</button></div>
     {/if}
-    <div>
-      <label
-        ><input type="checkbox" bind:checked={showBasemap} />Show basemap</label
-      >
-    </div>
+    <BasemapPicker />
   </div>
   <div slot="main" style="position:relative; width: 100%; height: 100vh;">
     <MapLibre
-      style={mapStyle}
+      style={$mapStyle}
       standardControls
       hash
       bind:map
diff --git a/web/src/common/BasemapPicker.svelte b/web/src/common/BasemapPicker.svelte
new file mode 100644
index 0000000..d5add74
--- /dev/null
+++ b/web/src/common/BasemapPicker.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { maptilerApiKey, mapStyle } from "../stores";
+
+  let choice = "dataviz";
+
+  $: mapStyle.set(
+    `https://api.maptiler.com/maps/${choice}/style.json?key=${maptilerApiKey}`,
+  );
+
+  // TODO Z-ordering won't work when we change, because layerId() doesn't get recalculated
+</script>
+
+<div>
+  Basemap:
+  <select bind:value={choice}>
+    <option value="dataviz">MapTiler Dataviz</option>
+    <option value="streets">MapTiler Streets</option>
+    <option value="hybrid">MapTiler Satellite</option>
+    <option value="uk-openzoomstack-light">OS Open Zoomstack</option>
+  </select>
+</div>
diff --git a/web/src/common/Geocoder.svelte b/web/src/common/Geocoder.svelte
index e58e9bc..b93d782 100644
--- a/web/src/common/Geocoder.svelte
+++ b/web/src/common/Geocoder.svelte
@@ -4,7 +4,9 @@
   import maplibregl from "maplibre-gl";
   import { map, maptilerApiKey } from "../stores";
 
-  $: mapController = $map ? createMapLibreGlMapController($map, maplibregl) : null;
+  $: mapController = $map
+    ? createMapLibreGlMapController($map, maplibregl)
+    : null;
 
   // TODO Show markers
   // TODO Set the flyTo duration
diff --git a/web/src/common/index.ts b/web/src/common/index.ts
index e2d8e88..86e80b4 100644
--- a/web/src/common/index.ts
+++ b/web/src/common/index.ts
@@ -4,6 +4,7 @@ import type {
   ExpressionSpecification,
 } from "maplibre-gl";
 
+export { default as BasemapPicker } from "./BasemapPicker.svelte";
 export { default as Geocoder } from "./Geocoder.svelte";
 export { default as Layout } from "./Layout.svelte";
 export { default as Legend } from "./Legend.svelte";
diff --git a/web/src/common/zorder.ts b/web/src/common/zorder.ts
index 8c253e0..ae836fd 100644
--- a/web/src/common/zorder.ts
+++ b/web/src/common/zorder.ts
@@ -58,6 +58,7 @@ function getBeforeId(layerId: string): string | undefined {
 // This list covers all pages. We should maybe split it.
 const layerZorder = [
   // MapTiler basemap
+  // TODO Handle all basemaps now
   "Background",
 
   "neighbourhood-boundaries",
diff --git a/web/src/stores.ts b/web/src/stores.ts
index f027c46..f4bd187 100644
--- a/web/src/stores.ts
+++ b/web/src/stores.ts
@@ -36,6 +36,9 @@ export type Mode =
     };
 
 export let map: Writable<Map | null> = writable(null);
+export let mapStyle: Writable<string> = writable(
+  `https://api.maptiler.com/maps/dataviz/style.json?key=${maptilerApiKey}`,
+);
 
 export let example: Writable<string> = writable("");
 export let showAbout: Writable<boolean> = writable(true);