layer selection

website/src/lib/assets/layers.ts

@@ -371,89 +371,199 @@ export const opacities: { [key: string]: number; } = {
     swisstopoSlope: 0.4,
 };
 
-export type LayerTreeType = string[] | { [key: string]: LayerTreeType; };
+export type LayerTreeType = { [key: string]: LayerTreeType | boolean; };
 export type CollapsedInfoTreeType<T> = {
     self: T;
     children: { [key: string]: CollapsedInfoTreeType<T>; };
 };
-export type CheckedInfoTreeType = { [key: string]: boolean | CheckedInfoTreeType };
 
+// Hierarchy containing all basemaps
 export const basemapTree: LayerTreeType = {
     basemaps: {
-        world: ['mapboxOutdoors', 'mapboxSatellite', 'openStreetMap', 'openTopoMap', 'openHikingMap', 'cyclOSM'],
+        world: {
+            mapboxOutdoors: true,
+            mapboxSatellite: true,
+            openStreetMap: true,
+            openTopoMap: true,
+            openHikingMap: true,
+            cyclOSM: true
+        },
         countries: {
-            bulgaria: ['bgMountains'],
+            bulgaria: {
-            finland: ['finlandTopo'],
+                bgMountains: true,
-            france: ['ignPlanV2', 'ignFrScan25', 'ignSatellite'],
+            },
-            new_zealand: ['linz', 'linzTopo'],
+            finland: {
-            norway: ['norwayTopo'],
+                finlandTopo: true,
-            spain: ['ignEs'],
+            },
-            sweden: ['swedenTopo'],
+            france: {
-            switzerland: ['swisstopo'],
+                ignPlanV2: true,
-            united_kingdom: ['ordnanceSurvey'],
+                ignFrScan25: true,
-            united_states: ['usgs'],
+                ignSatellite: true
+            },
+            new_zealand: {
+                linz: true,
+                linzTopo: true,
+            },
+            norway: {
+                norwayTopo: true,
+            },
+            spain: {
+                ignEs: true,
+            },
+            sweden: {
+                swedenTopo: true,
+            },
+            switzerland: {
+                swisstopo: true,
+            },
+            united_kingdom: {
+                ordnanceSurvey: true,
+            },
+            united_states: {
+                usgs: true,
+            }
         },
     },
 }
 
+// Hierarchy containing all overlays
 export const overlayTree: LayerTreeType = {
     overlays: {
         world: {
-            cyclOSM: ['cyclOSMlite'],
+            cyclOSM: {
-            waymarked_trails: ['waymarkedTrailsHiking', 'waymarkedTrailsCycling', 'waymarkedTrailsMTB', 'waymarkedTrailsSkating', 'waymarkedTrailsHorseRiding', 'waymarkedTrailsWinter']
+                cyclOSMlite: true,
+            },
+            waymarked_trails: {
+                waymarkedTrailsHiking: true,
+                waymarkedTrailsCycling: true,
+                waymarkedTrailsMTB: true,
+                waymarkedTrailsSkating: true,
+                waymarkedTrailsHorseRiding: true,
+                waymarkedTrailsWinter: true,
+            }
         },
         countries: {
-            france: ['ignFrCadastre', 'ignSlope'],
+            france: {
-            switzerland: ['swisstopoSlope', 'swisstopoCycling', 'swisstopoMountainBike'],
+                ignFrCadastre: true,
+                ignSlope: true,
+            },
+            switzerland: {
+                swisstopoSlope: true,
+                swisstopoCycling: true,
+                swisstopoMountainBike: true,
+            }
         },
     },
 }
 
-export const layerKeys: { [key: string]: string[]; } = {
+// Default basemap used
-    mapboxOutdoors: ['basemaps', 'world'],
-    mapboxSatellite: ['basemaps', 'world'],
-    openStreetMap: ['basemaps', 'world'],
-    openTopoMap: ['basemaps', 'world'],
-    openHikingMap: ['basemaps', 'world'],
-    cyclOSM: ['basemaps', 'world'],
-    cyclOSMlite: ['overlays', 'world', 'cyclOSM'],
-    waymarkedTrailsHiking: ['overlays', 'world', 'waymarked_trails'],
-    waymarkedTrailsCycling: ['overlays', 'world', 'waymarked_trails'],
-    waymarkedTrailsMTB: ['overlays', 'world', 'waymarked_trails'],
-    waymarkedTrailsSkating: ['overlays', 'world', 'waymarked_trails'],
-    waymarkedTrailsHorseRiding: ['overlays', 'world', 'waymarked_trails'],
-    waymarkedTrailsWinter: ['overlays', 'world', 'waymarked_trails'],
-    bgMountains: ['basemaps', 'countries', 'bulgaria'],
-    finlandTopo: ['basemaps', 'countries', 'finland'],
-    ignPlanV2: ['basemaps', 'countries', 'france'],
-    ignFrScan25: ['basemaps', 'countries', 'france'],
-    ignSatellite: ['basemaps', 'countries', 'france'],
-    ignFrCadastre: ['overlays', 'countries', 'france'],
-    ignSlope: ['overlays', 'countries', 'france'],
-    linz: ['basemaps', 'countries', 'new_zealand'],
-    linzTopo: ['basemaps', 'countries', 'new_zealand'],
-    norwayTopo: ['basemaps', 'countries', 'norway'],
-    swisstopo: ['basemaps', 'countries', 'switzerland'],
-    swisstopoSlope: ['overlays', 'countries', 'switzerland'],
-    swisstopoCycling: ['overlays', 'countries', 'switzerland'],
-    swisstopoMountainBike: ['overlays', 'countries', 'switzerland'],
-    swedenTopo: ['basemaps', 'countries', 'sweden'],
-    ordnanceSurvey: ['basemaps', 'countries', 'united_kingdom'],
-    usgs: ['basemaps', 'countries', 'united_states'],
-};
-
 export const defaultBasemap = 'mapboxOutdoors';
 
+// Default overlays used (none)
+export const defaultOverlays = {
+    overlays: {
+        world: {
+            cyclOSM: {
+                cyclOSMlite: false,
+            },
+            waymarked_trails: {
+                waymarkedTrailsHiking: false,
+                waymarkedTrailsCycling: false,
+                waymarkedTrailsMTB: false,
+                waymarkedTrailsSkating: false,
+                waymarkedTrailsHorseRiding: false,
+                waymarkedTrailsWinter: false,
+            }
+        },
+        countries: {
+            france: {
+                ignFrCadastre: false,
+                ignSlope: false,
+            },
+            switzerland: {
+                swisstopoSlope: false,
+                swisstopoCycling: false,
+                swisstopoMountainBike: false,
+            }
+        },
+    },
+};
+
+// Default basemaps shown in the layer menu
 export const defaultBasemapTree: LayerTreeType = {
     basemaps: {
-        world: ['mapboxOutdoors', 'mapboxSatellite', 'openStreetMap', 'openTopoMap', 'openHikingMap', 'cyclOSM']
+        world: {
+            mapboxOutdoors: true,
+            mapboxSatellite: true,
+            openStreetMap: true,
+            openTopoMap: true,
+            openHikingMap: true,
+            cyclOSM: true
+        },
+        countries: {
+            bulgaria: {
+                bgMountains: false,
+            },
+            finland: {
+                finlandTopo: false,
+            },
+            france: {
+                ignPlanV2: false,
+                ignFrScan25: false,
+                ignSatellite: false
+            },
+            new_zealand: {
+                linz: false,
+                linzTopo: false,
+            },
+            norway: {
+                norwayTopo: false,
+            },
+            spain: {
+                ignEs: false,
+            },
+            sweden: {
+                swedenTopo: false,
+            },
+            switzerland: {
+                swisstopo: false,
+            },
+            united_kingdom: {
+                ordnanceSurvey: false,
+            },
+            united_states: {
+                usgs: false,
+            }
+        },
     }
 };
+
+// Default overlays shown in the layer menu
 export const defaultOverlayTree: LayerTreeType = {
     overlays: {
         world: {
-            cyclOSM: ['cyclOSMlite'],
+            cyclOSM: {
-            waymarked_trails: ['waymarkedTrailsHiking', 'waymarkedTrailsCycling', 'waymarkedTrailsMTB']
+                cyclOSMlite: true,
-        }
+            },
+            waymarked_trails: {
+                waymarkedTrailsHiking: true,
+                waymarkedTrailsCycling: true,
+                waymarkedTrailsMTB: true,
+                waymarkedTrailsSkating: false,
+                waymarkedTrailsHorseRiding: false,
+                waymarkedTrailsWinter: false,
+            }
+        },
+        countries: {
+            france: {
+                ignFrCadastre: false,
+                ignSlope: false,
+            },
+            switzerland: {
+                swisstopoSlope: false,
+                swisstopoCycling: false,
+                swisstopoMountainBike: false,
+            }
+        },
     }
 }

website/src/lib/components/Menu.svelte

@@ -19,6 +19,8 @@
 	import { resetMode, setMode } from 'mode-watcher';
 
 	import { _ } from 'svelte-i18n';
+	import { anySelectedLayer } from './layer-control/utils';
+	import { defaultOverlays } from '$lib/assets/layers';
 
 	let showDistanceMarkers = false;
 	let showDirectionMarkers = false;
@@ -229,10 +231,10 @@
 			[$currentBasemap, $previousBasemap] = [$previousBasemap, $currentBasemap];
 			e.preventDefault();
 		} else if (e.key === 'F2') {
-			if ($currentOverlays.length > 0) {
+			if (anySelectedLayer($currentOverlays)) {
-				[$currentOverlays, $previousOverlays] = [[], $currentOverlays];
+				[$currentOverlays, $previousOverlays] = [defaultOverlays, $currentOverlays];
 			} else {
-				[$currentOverlays, $previousOverlays] = [$previousOverlays, []];
+				[$currentOverlays, $previousOverlays] = [$previousOverlays, defaultOverlays];
 			}
 			e.preventDefault();
 		}

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

@@ -12,6 +12,7 @@
 	import { settings } from '$lib/db';
 	import { map } from '$lib/stores';
 	import { get, writable } from 'svelte/store';
+	import { getLayers } from './utils';
 
 	const {
 		currentBasemap,
@@ -30,21 +31,21 @@
 
 	$: if ($map) {
 		// Add or remove overlay layers depending on the current overlays
-		// Object.keys(overlays).forEach((id) => {
+		let overlayLayers = getLayers($currentOverlays);
-		// 	if ($currentOverlays.includes(id)) {
+		Object.keys(overlayLayers).forEach((id) => {
-		// 		if (!addOverlayLayer.hasOwnProperty(id)) {
+			if (overlayLayers[id]) {
-		// 			addOverlayLayer[id] = addOverlayLayerForId(id);
+				if (!addOverlayLayer.hasOwnProperty(id)) {
-		// 		}
+					addOverlayLayer[id] = addOverlayLayerForId(id);
-		// 		if (!$map.getLayer(id)) {
+				}
-		// 			addOverlayLayer[id]();
+				if (!$map.getLayer(id)) {
-		// 			$map.on('style.load', addOverlayLayer[id]);
+					addOverlayLayer[id]();
-		// 		}
+					$map.on('style.load', addOverlayLayer[id]);
-		// 	} else if ($map.getLayer(id)) {
+				}
-		// 		$map.removeLayer(id);
+			} else if ($map.getLayer(id)) {
-		// 		$map.off('style.load', addOverlayLayer[id]);
+				$map.removeLayer(id);
-		// 	}
+				$map.off('style.load', addOverlayLayer[id]);
-		// });
+			}
-		console.log($currentOverlays);
+		});
 	}
 
 	let selectedBasemap = writable(get(currentBasemap));
@@ -60,18 +61,6 @@
 		selectedBasemap.set(value);
 	});
 
-	let selectedOverlays = writable(get(currentOverlays));
-	selectedOverlays.subscribe((value) => {
-		// Updates coming from checkboxes
-		if (value != get(currentOverlays)) {
-			currentOverlays.set(value);
-		}
-	});
-	currentOverlays.subscribe((value) => {
-		// Updates coming from the database, or from the user toggling overlays
-		selectedOverlays.set(value);
-	});
-
 	let addOverlayLayer: { [key: string]: () => void } = {};
 	function addOverlayLayerForId(id: string) {
 		return () => {
@@ -124,7 +113,7 @@
 						layerTree={$selectedOverlayTree}
 						name="overlays"
 						multiple={true}
-						bind:checked={$selectedOverlays}
+						bind:checked={$currentOverlays}
 					/>
 				</div>
 				<Separator class="w-full" />

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

@@ -9,21 +9,12 @@
 
 	import { Settings } from 'lucide-svelte';
 
-	import { basemapTree, overlayTree, type CollapsedInfoTreeType } from '$lib/assets/layers';
+	import { basemapTree, overlayTree } from '$lib/assets/layers';
 	import { settings } from '$lib/db';
 
 	import { _ } from 'svelte-i18n';
 
 	const { selectedBasemapTree, selectedOverlayTree } = settings;
-
-	let checkedBasemaps: CollapsedInfoTreeType<{ [key: string]: boolean }> = {
-		self: {},
-		children: {}
-	};
-	let checkedOverlays: CollapsedInfoTreeType<{ [key: string]: boolean }> = {
-		self: {},
-		children: {}
-	};
 </script>
 
 <Sheet.Root>
@@ -48,10 +39,7 @@
 								layerTree={basemapTree}
 								name="basemapSettings"
 								multiple={true}
-								onValueChange={(id, checked) => {
+								bind:checked={$selectedBasemapTree}
-									console.log('basemap', id, checked);
-								}}
-								bind:checked={checkedBasemaps}
 							/>
 						</ScrollArea>
 						<Separator />
@@ -60,10 +48,7 @@
 								layerTree={overlayTree}
 								name="overlaySettings"
 								multiple={true}
-								onValueChange={(id, checked) => {
+								bind:checked={$selectedOverlayTree}
-									console.log('overlay', id, checked);
-								}}
-								bind:checked={checkedOverlays}
 							/>
 						</ScrollArea>
 					</Accordion.Content>

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

@@ -1,10 +1,6 @@
 <script lang="ts">
 	import LayerTreeNode from './LayerTreeNode.svelte';
-	import {
+	import { type CollapsedInfoTreeType, type LayerTreeType } from '$lib/assets/layers';
-		type CheckedInfoTreeType,
-		type CollapsedInfoTreeType,
-		type LayerTreeType
-	} from '$lib/assets/layers';
 
 	export let layerTree: LayerTreeType;
 	export let name: string;
@@ -15,7 +11,7 @@
 		self: true,
 		children: {}
 	};
-	export let checked: CheckedInfoTreeType = {};
+	export let checked: LayerTreeType = {};
 </script>
 
 <form>

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

@@ -6,11 +6,8 @@
 
 	import { ChevronDown, ChevronUp } from 'lucide-svelte';
 
-	import {
+	import { type CollapsedInfoTreeType, type LayerTreeType } from '$lib/assets/layers';
-		type CheckedInfoTreeType,
+	import { anySelectedLayer } from './utils';
-		type CollapsedInfoTreeType,
-		type LayerTreeType
-	} from '$lib/assets/layers';
 
 	import { _ } from 'svelte-i18n';
 
@@ -31,48 +28,40 @@
 		});
 	}
 
-	export let checked: CheckedInfoTreeType;
+	export let checked: LayerTreeType;
-	if (Array.isArray(node)) {
+	Object.keys(node).forEach((id) => {
-		if (multiple) {
+		if (!checked.hasOwnProperty(id)) {
-			node.forEach((id) => {
+			if (typeof node[id] == 'boolean') {
-				if (!checked.hasOwnProperty(id)) {
+				checked[id] = false;
-					checked[id] = false;
+			} else {
-				}
-			});
-		}
-	} else {
-		Object.keys(node).forEach((id) => {
-			if (!checked.hasOwnProperty(id)) {
 				checked[id] = {};
 			}
-		});
+		}
-	}
+	});
 </script>
 
-{#if Array.isArray(node)}
+<div class="flex flex-col gap-1">
-	<div class="flex flex-col gap-1 mt-1">
+	{#each Object.keys(node) as id}
-		{#each node as id}
+		{#if typeof node[id] == 'boolean'}
-			<div class="flex flex-row items-center gap-2">
+			{#if node[id]}
-				{#if multiple}
+				<div class="flex flex-row items-center gap-2 first:mt-1">
-					<Checkbox
+					{#if multiple}
-						id="{name}-{id}"
+						<Checkbox
-						{name}
+							id="{name}-{id}"
-						value={id}
+							{name}
-						bind:checked={checked[id]}
+							value={id}
-						class="scale-90"
+							bind:checked={checked[id]}
-					/>
+							class="scale-90"
-				{:else}
+						/>
-					<input id="{name}-{id}" type="radio" {name} value={id} bind:group={selected} />
+					{:else}
-				{/if}
+						<input id="{name}-{id}" type="radio" {name} value={id} bind:group={selected} />
-				<Label for="{name}-{id}" class="flex flex-row items-center gap-1"
+					{/if}
-					>{$_(`layers.label.${id}`)}</Label
+					<Label for="{name}-{id}" class="flex flex-row items-center gap-1"
-				>
+						>{$_(`layers.label.${id}`)}</Label
-			</div>
+					>
-		{/each}
+				</div>
-	</div>
+			{/if}
-{:else}
+		{:else if anySelectedLayer(node[id])}
-	<div class="flex flex-col gap-1">
-		{#each Object.keys(node) as id}
 			<Collapsible.Root bind:open={open.children[id].self} class="ml-1">
 				<Collapsible.Trigger class="w-full"
 					><Button
@@ -98,9 +87,9 @@
 					/>
 				</Collapsible.Content>
 			</Collapsible.Root>
-		{/each}
+		{/if}
-	</div>
+	{/each}
-{/if}
+</div>
 
 <style lang="postcss">
 	div :global(input[type='radio']) {

website/src/lib/components/layer-control/utils.ts

@@ -0,0 +1,27 @@
+import type { LayerTreeType } from "$lib/assets/layers";
+
+export function anySelectedLayer(node: LayerTreeType) {
+    return Object.keys(node).find((id) => {
+        if (typeof node[id] == "boolean") {
+            if (node[id]) {
+                return true;
+            }
+        } else {
+            if (anySelectedLayer(node[id])) {
+                return true;
+            }
+        }
+        return false;
+    }) !== undefined;
+}
+
+export function getLayers(node: LayerTreeType, layers: { [key: string]: boolean } = {}): { [key: string]: boolean } {
+    Object.keys(node).find((id) => {
+        if (typeof node[id] == "boolean") {
+            layers[id] = node[id];
+        } else {
+            getLayers(node[id], layers);
+        }
+    });
+    return layers;
+}

website/src/lib/db.ts

@@ -4,7 +4,7 @@ import { type FreezedObject, type Patch, produceWithPatches, applyPatches } from
 import { writable, get, derived, type Readable, type Writable } from 'svelte/store';
 import { fileOrder, selectedFiles } from './stores';
 import { mode } from 'mode-watcher';
-import { defaultBasemap, defaultBasemapTree, defaultOverlayTree } from './assets/layers';
+import { defaultBasemap, defaultBasemapTree, defaultOverlayTree, defaultOverlays } from './assets/layers';
 
 class Database extends Dexie {
 
@@ -29,6 +29,46 @@ class Database extends Dexie {
 
 const db = new Database();
 
+// 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 dexieSettingStore(setting: string, initial: any): Writable<any> {
+    let store = writable(initial);
+    liveQuery(() => db.settings.get(setting)).subscribe(value => {
+        if (value !== undefined) {
+            store.set(value);
+        }
+    });
+    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'),
+    temperatureUnits: dexieSettingStore('temperatureUnits', 'celsius'),
+    mode: dexieSettingStore('mode', (() => {
+        let currentMode: string | undefined = get(mode);
+        if (currentMode === undefined) {
+            currentMode = 'system';
+        }
+        return currentMode;
+    })()),
+    routing: dexieSettingStore('routing', true),
+    routingProfile: dexieSettingStore('routingProfile', 'bike'),
+    privateRoads: dexieSettingStore('privateRoads', false),
+    currentBasemap: dexieSettingStore('currentBasemap', defaultBasemap),
+    previousBasemap: dexieSettingStore('previousBasemap', defaultBasemap),
+    selectedBasemapTree: dexieSettingStore('selectedBasemapTree', defaultBasemapTree),
+    currentOverlays: dexieSettingStore('currentOverlays', defaultOverlays),
+    previousOverlays: dexieSettingStore('previousOverlays', defaultOverlays),
+    selectedOverlayTree: dexieSettingStore('selectedOverlayTree', defaultOverlayTree),
+};
+
 // Wrap Dexie live queries in a Svelte store to avoid triggering the query for every subscriber
 function dexieStore<T>(querier: () => T | Promise<T>, initial?: T): Readable<T> {
     let store = writable<T>(initial);
@@ -262,43 +302,3 @@ export const dbUtils = {
         }
     }
 }
-
-function dexieSettingStore(setting: string, initial: any): Writable<any> {
-    let store = writable(initial);
-    liveQuery(() => db.settings.get(setting)).subscribe(value => {
-        if (value !== undefined) {
-            console.log('setting', setting, 'changed to', value);
-            store.set(value);
-        }
-    });
-    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'),
-    temperatureUnits: dexieSettingStore('temperatureUnits', 'celsius'),
-    mode: dexieSettingStore('mode', (() => {
-        let currentMode: string | undefined = get(mode);
-        if (currentMode === undefined) {
-            currentMode = 'system';
-        }
-        return currentMode;
-    })()),
-    routing: dexieSettingStore('routing', true),
-    routingProfile: dexieSettingStore('routingProfile', 'bike'),
-    privateRoads: dexieSettingStore('privateRoads', false),
-    currentBasemap: dexieSettingStore('currentBasemap', defaultBasemap),
-    previousBasemap: dexieSettingStore('previousBasemap', defaultBasemap),
-    selectedBasemapTree: dexieSettingStore('selectedBasemapTree', defaultBasemapTree),
-    currentOverlays: dexieSettingStore('currentOverlays', {}),
-    previousOverlays: dexieSettingStore('previousOverlays', {}),
-    selectedOverlayTree: dexieSettingStore('selectedOverlayTree', defaultOverlayTree),
-};