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') {