remember active overlays

website/src/lib/components/Menu.svelte

@@ -43,6 +43,18 @@
 
 	let undoDisabled = derived(canUndo, ($canUndo) => !$canUndo);
 	let redoDisabled = derived(canRedo, ($canRedo) => !$canRedo);
+
+	function switchBasemaps() {
+		[$currentBasemap, $previousBasemap] = [$previousBasemap, $currentBasemap];
+	}
+
+	function toggleOverlays() {
+		if (anySelectedLayer($currentOverlays)) {
+			[$currentOverlays, $previousOverlays] = [defaultOverlays, $currentOverlays];
+		} else {
+			[$currentOverlays, $previousOverlays] = [$previousOverlays, defaultOverlays];
+		}
+	}
 </script>
 
 <div class="absolute top-2 left-0 right-0 z-20 flex flex-row justify-center pointer-events-none">
@@ -127,6 +139,17 @@
 					</Menubar.Item>
 				</Menubar.Content>
 			</Menubar.Menu>
+			<Menubar.Menu>
+				<Menubar.Trigger>{$_('menu.view')}</Menubar.Trigger>
+				<Menubar.Content class="border-none">
+					<Menubar.Item on:click={switchBasemaps}
+						>{$_('menu.switch_basemap')}<Shortcut key="F1" /></Menubar.Item
+					>
+					<Menubar.Item on:click={toggleOverlays}
+						>{$_('menu.toggle_overlays')}<Shortcut key="F2" /></Menubar.Item
+					>
+				</Menubar.Content>
+			</Menubar.Menu>
 			<Menubar.Menu>
 				<Menubar.Trigger>{$_('menu.settings')}</Menubar.Trigger>
 				<Menubar.Content class="border-none"
@@ -228,14 +251,10 @@
 			$selectFiles.selectAllFiles();
 			e.preventDefault();
 		} else if (e.key === 'F1') {
-			[$currentBasemap, $previousBasemap] = [$previousBasemap, $currentBasemap];
+			switchBasemaps();
 			e.preventDefault();
 		} else if (e.key === 'F2') {
-			if (anySelectedLayer($currentOverlays)) {
-				[$currentOverlays, $previousOverlays] = [defaultOverlays, $currentOverlays];
-			} else {
-				[$currentOverlays, $previousOverlays] = [$previousOverlays, defaultOverlays];
-			}
+			toggleOverlays();
 			e.preventDefault();
 		}
 	}}

website/src/lib/components/layer-control/LayerControl.svelte

@@ -29,7 +29,7 @@
 		});
 	}
 
-	$: if ($map) {
+	$: if ($map && $currentOverlays) {
 		// Add or remove overlay layers depending on the current overlays
 		let overlayLayers = getLayers($currentOverlays);
 		Object.keys(overlayLayers).forEach((id) => {
@@ -109,12 +109,14 @@
 				</div>
 				<Separator class="w-full" />
 				<div class="p-2">
-					<LayerTree
-						layerTree={$selectedOverlayTree}
-						name="overlays"
-						multiple={true}
-						bind:checked={$currentOverlays}
-					/>
+					{#if $currentOverlays}
+						<LayerTree
+							layerTree={$selectedOverlayTree}
+							name="overlays"
+							multiple={true}
+							bind:checked={$currentOverlays}
+						/>
+					{/if}
 				</div>
 				<Separator class="w-full" />
 				<div class="p-2">

website/src/lib/components/layer-control/LayerTreeNode.svelte

@@ -17,6 +17,8 @@
 	export let multiple: boolean = false;
 
 	export let open: CollapsedInfoTreeType<boolean>;
+	export let checked: LayerTreeType;
+
 	if (!Array.isArray(node)) {
 		Object.keys(node).forEach((id) => {
 			if (!open.children.hasOwnProperty(id)) {
@@ -27,8 +29,6 @@
 			}
 		});
 	}
-
-	export let checked: LayerTreeType;
 	Object.keys(node).forEach((id) => {
 		if (!checked.hasOwnProperty(id)) {
 			if (typeof node[id] == 'boolean') {

website/src/lib/db.ts

@@ -47,6 +47,26 @@ function dexieSettingStore(setting: string, initial: any): Writable<any> {
     };
 }
 
+// Wrap Dexie live queries in a Svelte store to avoid triggering the query for every subscriber, and updates to the store are pushed to the DB
+function dexieUninitializedSettingStore(setting: string, initial: any): Writable<any> {
+    let store = writable(undefined);
+    liveQuery(() => db.settings.get(setting)).subscribe(value => {
+        if (value !== undefined) {
+            store.set(value);
+        } else {
+            store.set(initial);
+        }
+    });
+    return {
+        subscribe: store.subscribe,
+        set: (value: any) => db.settings.put(value, setting),
+        update: (callback: (value: any) => any) => {
+            let newValue = callback(get(store));
+            db.settings.put(newValue, setting);
+        }
+    };
+}
+
 export const settings = {
     distanceUnits: dexieSettingStore('distanceUnits', 'metric'),
     velocityUnits: dexieSettingStore('velocityUnits', 'speed'),
@@ -64,7 +84,7 @@ export const settings = {
     currentBasemap: dexieSettingStore('currentBasemap', defaultBasemap),
     previousBasemap: dexieSettingStore('previousBasemap', defaultBasemap),
     selectedBasemapTree: dexieSettingStore('selectedBasemapTree', defaultBasemapTree),
-    currentOverlays: dexieSettingStore('currentOverlays', defaultOverlays),
+    currentOverlays: dexieUninitializedSettingStore('currentOverlays', defaultOverlays),
     previousOverlays: dexieSettingStore('previousOverlays', defaultOverlays),
     selectedOverlayTree: dexieSettingStore('selectedOverlayTree', defaultOverlayTree),
 };

website/src/locales/en.json

@@ -14,6 +14,9 @@
         "delete": "Delete",
         "delete_all": "Delete all",
         "select_all": "Select all",
+        "view": "View",
+        "switch_basemap": "Switch to previous basemap",
+        "toggle_overlays": "Toggle overlays",
         "settings": "Settings",
         "distance_units": "Distance units",
         "metric": "Metric",