Switch basemaps #9

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

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>

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

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";

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",

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);