progress with layer settings

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

@@ -8,43 +8,93 @@
 
 	import { Layers } from 'lucide-svelte';
 
-	import {
-		basemaps,
-		basemapTree,
-		overlays,
-		overlayTree,
-		opacities,
-		defaultBasemap
-	} from '$lib/assets/layers';
-
+	import { basemaps, overlays, opacities } from '$lib/assets/layers';
+	import { settings } from '$lib/db';
 	import { map } from '$lib/stores';
+	import { get, writable } from 'svelte/store';
+
+	const {
+		currentBasemap,
+		previousBasemap,
+		currentOverlays,
+		selectedBasemapTree,
+		selectedOverlayTree
+	} = settings;
 
 	$: if ($map) {
-		$map.on('load', () => {
-			$map.setStyle(basemaps[defaultBasemap]);
+		// Set style depending on the current basemap
+		$map.setStyle(basemaps[$currentBasemap], {
+			diff: false
 		});
 	}
 
-	let addOverlayLayer: { [key: string]: () => void } = {};
+	$: if ($map) {
+		// Add or remove overlay layers depending on the current overlays
+		// Object.keys(overlays).forEach((id) => {
+		// 	if ($currentOverlays.includes(id)) {
+		// 		if (!addOverlayLayer.hasOwnProperty(id)) {
+		// 			addOverlayLayer[id] = addOverlayLayerForId(id);
+		// 		}
+		// 		if (!$map.getLayer(id)) {
+		// 			addOverlayLayer[id]();
+		// 			$map.on('style.load', addOverlayLayer[id]);
+		// 		}
+		// 	} else if ($map.getLayer(id)) {
+		// 		$map.removeLayer(id);
+		// 		$map.off('style.load', addOverlayLayer[id]);
+		// 	}
+		// });
+		console.log($currentOverlays);
+	}
 
+	let selectedBasemap = writable(get(currentBasemap));
+	selectedBasemap.subscribe((value) => {
+		// Updates coming from radio buttons
+		if (value !== get(currentBasemap)) {
+			previousBasemap.set(get(currentBasemap));
+			currentBasemap.set(value);
+		}
+	});
+	currentBasemap.subscribe((value) => {
+		// Updates coming from the database, or from the user swapping basemaps
+		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 () => {
 			if ($map) {
-				if (!$map.getSource(id)) {
-					$map.addSource(id, overlays[id]);
-				}
-				$map.addLayer({
-					id,
-					type: overlays[id].type === 'raster' ? 'raster' : 'line',
-					source: id,
-					paint: {
-						...(id in opacities
-							? overlays[id].type === 'raster'
-								? { 'raster-opacity': opacities[id] }
-								: { 'line-opacity': opacities[id] }
-							: {})
+				try {
+					if (!$map.getSource(id)) {
+						$map.addSource(id, overlays[id]);
 					}
-				});
+					$map.addLayer({
+						id,
+						type: overlays[id].type === 'raster' ? 'raster' : 'line',
+						source: id,
+						paint: {
+							...(id in opacities
+								? overlays[id].type === 'raster'
+									? { 'raster-opacity': opacities[id] }
+									: { 'line-opacity': opacities[id] }
+								: {})
+						}
+					});
+				} catch (e) {
+					// No reliable way to check if the map is ready to add sources and layers
+				}
 			}
 		};
 	}
@@ -63,37 +113,18 @@
 			<div class="h-fit">
 				<div class="p-2">
 					<LayerTree
-						layerTree={basemapTree}
+						layerTree={$selectedBasemapTree}
 						name="basemaps"
-						onValueChange={(id) => {
-							if ($map) {
-								$map.setStyle(basemaps[id], {
-									diff: false
-								});
-							}
-						}}
+						bind:selected={$selectedBasemap}
 					/>
 				</div>
 				<Separator class="w-full" />
 				<div class="p-2">
 					<LayerTree
-						layerTree={overlayTree}
+						layerTree={$selectedOverlayTree}
 						name="overlays"
 						multiple={true}
-						onValueChange={(id, checked) => {
-							if (!addOverlayLayer.hasOwnProperty(id)) {
-								addOverlayLayer[id] = addOverlayLayerForId(id);
-							}
-							if ($map) {
-								if (checked) {
-									addOverlayLayer[id]();
-									$map.on('style.load', addOverlayLayer[id]);
-								} else {
-									$map.removeLayer(id);
-									$map.off('style.load', addOverlayLayer[id]);
-								}
-							}
-						}}
+						bind:checked={$selectedOverlays}
 					/>
 				</div>
 				<Separator class="w-full" />

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

@@ -9,16 +9,21 @@
 
 	import { Settings } from 'lucide-svelte';
 
-	import {
-		basemaps,
-		basemapTree,
-		overlays,
-		overlayTree,
-		opacities,
-		defaultBasemap
-	} from '$lib/assets/layers';
+	import { basemapTree, overlayTree, type CollapsedInfoTreeType } 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>
@@ -43,9 +48,10 @@
 								layerTree={basemapTree}
 								name="basemapSettings"
 								multiple={true}
-								onValueChange={(id) => {
-									// TODO
+								onValueChange={(id, checked) => {
+									console.log('basemap', id, checked);
 								}}
+								bind:checked={checkedBasemaps}
 							/>
 						</ScrollArea>
 						<Separator />
@@ -55,8 +61,9 @@
 								name="overlaySettings"
 								multiple={true}
 								onValueChange={(id, checked) => {
-									// TODO
+									console.log('overlay', id, checked);
 								}}
+								bind:checked={checkedOverlays}
 							/>
 						</ScrollArea>
 					</Accordion.Content>

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

@@ -1,19 +1,25 @@
 <script lang="ts">
 	import LayerTreeNode from './LayerTreeNode.svelte';
-	import { type CollapsedInfoTreeType, type LayerTreeType } from '$lib/assets/layers';
+	import {
+		type CheckedInfoTreeType,
+		type CollapsedInfoTreeType,
+		type LayerTreeType
+	} from '$lib/assets/layers';
 
 	export let layerTree: LayerTreeType;
 	export let name: string;
+	export let selected: string | undefined = undefined;
 	export let multiple: boolean = false;
 
-	export let onValueChange: (id: string, checked: boolean) => void;
-
-	let open: CollapsedInfoTreeType = {
+	let open: CollapsedInfoTreeType<boolean> = {
 		self: true,
 		children: {}
 	};
+	export let checked: CheckedInfoTreeType = {};
 </script>
 
-<fieldset class="min-w-64">
-	<LayerTreeNode {name} node={layerTree} {multiple} {onValueChange} bind:open />
-</fieldset>
+<form>
+	<fieldset class="min-w-64">
+		<LayerTreeNode {name} node={layerTree} bind:selected {multiple} bind:open bind:checked />
+	</fieldset>
+</form>

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

@@ -6,24 +6,20 @@
 
 	import { ChevronDown, ChevronUp } from 'lucide-svelte';
 
-	import { type CollapsedInfoTreeType, type LayerTreeType } from '$lib/assets/layers';
+	import {
+		type CheckedInfoTreeType,
+		type CollapsedInfoTreeType,
+		type LayerTreeType
+	} from '$lib/assets/layers';
 
 	import { _ } from 'svelte-i18n';
 
 	export let name: string;
 	export let node: LayerTreeType;
+	export let selected: string | undefined = undefined;
 	export let multiple: boolean = false;
 
-	export let onValueChange: (id: string, checked: boolean) => void;
-
-	let checked: { [key: string]: boolean } = {};
-	if (multiple && Array.isArray(node)) {
-		node.forEach((id) => {
-			checked[id] = false;
-		});
-	}
-
-	export let open: CollapsedInfoTreeType;
+	export let open: CollapsedInfoTreeType<boolean>;
 	if (!Array.isArray(node)) {
 		Object.keys(node).forEach((id) => {
 			if (!open.children.hasOwnProperty(id)) {
@@ -34,6 +30,23 @@
 			}
 		});
 	}
+
+	export let checked: CheckedInfoTreeType;
+	if (Array.isArray(node)) {
+		if (multiple) {
+			node.forEach((id) => {
+				if (!checked.hasOwnProperty(id)) {
+					checked[id] = false;
+				}
+			});
+		}
+	} else {
+		Object.keys(node).forEach((id) => {
+			if (!checked.hasOwnProperty(id)) {
+				checked[id] = {};
+			}
+		});
+	}
 </script>
 
 {#if Array.isArray(node)}
@@ -42,27 +55,18 @@
 			<div class="flex flex-row items-center gap-2">
 				{#if multiple}
 					<Checkbox
-						{id}
+						id="{name}-{id}"
 						{name}
 						value={id}
 						bind:checked={checked[id]}
-						on:click={() => {
-							onValueChange(id, !checked[id]);
-						}}
 						class="scale-90"
 					/>
 				{:else}
-					<input
-						type="radio"
-						{id}
-						{name}
-						value={id}
-						on:change={() => {
-							onValueChange(id, true);
-						}}
-					/>
+					<input id="{name}-{id}" type="radio" {name} value={id} bind:group={selected} />
 				{/if}
-				<Label for={id}>{$_(`layers.label.${id}`)}</Label>
+				<Label for="{name}-{id}" class="flex flex-row items-center gap-1"
+					>{$_(`layers.label.${id}`)}</Label
+				>
 			</div>
 		{/each}
 	</div>
@@ -87,9 +91,10 @@
 					<svelte:self
 						node={node[id]}
 						{name}
+						bind:selected
 						{multiple}
-						{onValueChange}
 						bind:open={open.children[id]}
+						bind:checked={checked[id]}
 					/>
 				</Collapsible.Content>
 			</Collapsible.Root>