From 22e9c76a5bd8a51ea6d30010b6b930e6487344d9 Mon Sep 17 00:00:00 2001
From: vcoppe <vianney.coppe@gmail.com>
Date: Wed, 14 Aug 2024 09:21:55 +0200
Subject: [PATCH] fix custom basemap tile URL update

---
 .../src/lib/components/layer-control/CustomLayers.svelte | 9 ++++++++-
 .../src/lib/components/layer-control/LayerControl.svelte | 4 ++--
 website/src/lib/components/layer-control/utils.ts        | 5 ++++-
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/website/src/lib/components/layer-control/CustomLayers.svelte b/website/src/lib/components/layer-control/CustomLayers.svelte
index 01d355d4..465fb35d 100644
--- a/website/src/lib/components/layer-control/CustomLayers.svelte
+++ b/website/src/lib/components/layer-control/CustomLayers.svelte
@@ -23,6 +23,7 @@
 	import { map } from '$lib/stores';
 	import { onDestroy, onMount } from 'svelte';
 	import Sortable from 'sortablejs/Sortable';
+	import { customBasemapUpdate } from './utils';
 
 	const {
 		customLayers,
@@ -130,6 +131,7 @@
 						[layerId]: {
 							type: 'raster',
 							tiles: tileUrls,
+							tileSize: 256,
 							maxzoom: maxZoom
 						}
 					},
@@ -145,6 +147,7 @@
 				layer.value = {
 					type: 'raster',
 					tiles: tileUrls,
+					tileSize: 256,
 					maxzoom: maxZoom
 				};
 			}
@@ -173,7 +176,11 @@
 				return $tree;
 			});
 
-			$currentBasemap = layerId;
+			if ($currentBasemap === layerId) {
+				$customBasemapUpdate++;
+			} else {
+				$currentBasemap = layerId;
+			}
 
 			if (!$customBasemapOrder.includes(layerId)) {
 				$customBasemapOrder = [...$customBasemapOrder, layerId];
diff --git a/website/src/lib/components/layer-control/LayerControl.svelte b/website/src/lib/components/layer-control/LayerControl.svelte
index a6ea05a8..2e03ea9c 100644
--- a/website/src/lib/components/layer-control/LayerControl.svelte
+++ b/website/src/lib/components/layer-control/LayerControl.svelte
@@ -11,7 +11,7 @@
 	import { settings } from '$lib/db';
 	import { map } from '$lib/stores';
 	import { get, writable } from 'svelte/store';
-	import { getLayers } from './utils';
+	import { customBasemapUpdate, getLayers } from './utils';
 	import { OverpassLayer } from './OverpassLayer';
 	import OverpassPopup from './OverpassPopup.svelte';
 
@@ -41,7 +41,7 @@
 		}
 	}
 
-	$: if ($map && $currentBasemap) {
+	$: if ($map && ($currentBasemap || $customBasemapUpdate)) {
 		setStyle();
 	}
 
diff --git a/website/src/lib/components/layer-control/utils.ts b/website/src/lib/components/layer-control/utils.ts
index d3db8a39..cd682a26 100644
--- a/website/src/lib/components/layer-control/utils.ts
+++ b/website/src/lib/components/layer-control/utils.ts
@@ -1,4 +1,5 @@
 import type { LayerTreeType } from "$lib/assets/layers";
+import { writable } from "svelte/store";
 
 export function anySelectedLayer(node: LayerTreeType) {
     return Object.keys(node).find((id) => {
@@ -36,4 +37,6 @@ export function isSelected(node: LayerTreeType, id: string) {
         }
         return false;
     });
-}
\ No newline at end of file
+}
+
+export const customBasemapUpdate = writable(0);
\ No newline at end of file