From 12ac5480e4d3ef7511c0997ae0b879fb2b5d8efc Mon Sep 17 00:00:00 2001
From: Dustin Carlino <dabreegster@gmail.com>
Date: Sun, 24 Dec 2023 10:39:53 +0900
Subject: [PATCH] Toggle basemap (though it seems to lose the rendered thing
 before clicking another button)

---
 web/src/App.svelte               | 18 ++++++++++++------
 web/src/NeighbourhoodMode.svelte |  4 ++--
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/web/src/App.svelte b/web/src/App.svelte
index 65e4005..220f852 100644
--- a/web/src/App.svelte
+++ b/web/src/App.svelte
@@ -13,14 +13,14 @@
   import { mapContents, sidebarContents } from "./stores";
   import ViewShortcutsMode from "./ViewShortcutsMode.svelte";
 
-  let offlineMode = true;
-  let mapStyle = offlineMode
-    ? {
+  let showBasemap = false;
+  $: mapStyle = showBasemap
+    ? "https://api.maptiler.com/maps/dataviz/style.json?key=MZEJTanw3WpxRvt7qDfo"
+    : {
         version: 8,
         sources: {},
         layers: [],
-      }
-    : "https://api.maptiler.com/maps/dataviz/style.json?key=MZEJTanw3WpxRvt7qDfo";
+      };
 
   type Mode =
     | {
@@ -85,6 +85,12 @@
       <MapLoader {map} bind:app />
     {/if}
     <div><button on:click={zoomToFit}>Zoom to fit</button></div>
+    <div>
+      <label
+        ><input type="checkbox" bind:checked={showBasemap} />Show basemap</label
+      >
+    </div>
+    <hr />
 
     <div bind:this={sidebarDiv} />
   </div>
@@ -101,7 +107,7 @@
             {map}
             {app}
             boundary={mode.boundary}
-            {offlineMode}
+            {showBasemap}
             bind:mode
           />
         {:else if mode.mode == "view-shortcuts"}
diff --git a/web/src/NeighbourhoodMode.svelte b/web/src/NeighbourhoodMode.svelte
index 97feb79..9c40bee 100644
--- a/web/src/NeighbourhoodMode.svelte
+++ b/web/src/NeighbourhoodMode.svelte
@@ -25,7 +25,7 @@
   export let map: Map;
   export let app: LTN;
   export let boundary: Feature<Polygon>;
-  export let offlineMode: boolean;
+  export let showBasemap: boolean;
 
   let addingFilter = false;
   let undoLength = 0;
@@ -166,7 +166,7 @@
   <div slot="map">
     <GeoJSON data={details} generateId>
       <FillLayer
-        beforeId={offlineMode ? undefined : "Building"}
+        beforeId={showBasemap ? "Building" : undefined}
         filter={isPolygon}
         manageHoverState
         paint={{