From 210dd2fe9898a6e14b15efbe67fa52776c276167 Mon Sep 17 00:00:00 2001
From: vcoppe <vianney.coppe@gmail.com>
Date: Tue, 16 Jul 2024 13:26:11 +0200
Subject: [PATCH] fix custom layer creation, relates to #12

---
 .../layer-control/CustomLayers.svelte         | 22 +++++++++++-------
 .../layer-control/LayerTreeNode.svelte        | 23 +++++++++++--------
 2 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/website/src/lib/components/layer-control/CustomLayers.svelte b/website/src/lib/components/layer-control/CustomLayers.svelte
index a5a39a45..a6db6593 100644
--- a/website/src/lib/components/layer-control/CustomLayers.svelte
+++ b/website/src/lib/components/layer-control/CustomLayers.svelte
@@ -99,15 +99,21 @@
 
 	function addLayer(layerId: string) {
 		if (layerType === 'basemap') {
-			if (!$selectedBasemapTree.basemaps.hasOwnProperty('custom')) {
-				$selectedBasemapTree.basemaps['custom'] = {};
-			}
-			$selectedBasemapTree.basemaps['custom'][layerId] = true;
+			selectedBasemapTree.update(($tree) => {
+				if (!$tree.basemaps.hasOwnProperty('custom')) {
+					$tree.basemaps['custom'] = {};
+				}
+				$tree.basemaps['custom'][layerId] = true;
+				return $tree;
+			});
 		} else {
-			if (!$selectedOverlayTree.overlays.hasOwnProperty('custom')) {
-				$selectedOverlayTree.overlays['custom'] = {};
-			}
-			$selectedOverlayTree.overlays['custom'][layerId] = true;
+			selectedOverlayTree.update(($tree) => {
+				if (!$tree.overlays.hasOwnProperty('custom')) {
+					$tree.overlays['custom'] = {};
+				}
+				$tree.overlays['custom'][layerId] = true;
+				return $tree;
+			});
 		}
 	}
 
diff --git a/website/src/lib/components/layer-control/LayerTreeNode.svelte b/website/src/lib/components/layer-control/LayerTreeNode.svelte
index 5f3d84db..d63de8f9 100644
--- a/website/src/lib/components/layer-control/LayerTreeNode.svelte
+++ b/website/src/lib/components/layer-control/LayerTreeNode.svelte
@@ -8,6 +8,7 @@
 
 	import { _ } from 'svelte-i18n';
 	import { settings } from '$lib/db';
+	import { beforeUpdate } from 'svelte';
 
 	export let name: string;
 	export let node: LayerTreeType;
@@ -18,17 +19,19 @@
 
 	const { customLayers } = settings;
 
-	$: if (checked !== undefined) {
-		Object.keys(node).forEach((id) => {
-			if (!checked.hasOwnProperty(id)) {
-				if (typeof node[id] == 'boolean') {
-					checked[id] = false;
-				} else {
-					checked[id] = {};
+	beforeUpdate(() => {
+		if (checked !== undefined) {
+			Object.keys(node).forEach((id) => {
+				if (!checked.hasOwnProperty(id)) {
+					if (typeof node[id] == 'boolean') {
+						checked[id] = false;
+					} else {
+						checked[id] = {};
+					}
 				}
-			}
-		});
-	}
+			});
+		}
+	});
 </script>
 
 <div class="flex flex-col gap-[3px]">