fix custom basemap tile URL update

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;
 			});
 
+			if ($currentBasemap === layerId) {
+				$customBasemapUpdate++;
+			} else {
 				$currentBasemap = layerId;
+			}
 
 			if (!$customBasemapOrder.includes(layerId)) {
 				$customBasemapOrder = [...$customBasemapOrder, layerId];

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();
 	}
 

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) => {
@@ -37,3 +38,5 @@ export function isSelected(node: LayerTreeType, id: string) {
         return false;
     });
 }
+
+export const customBasemapUpdate = writable(0);