From 6f2e81b272ae56cef1deebb6820c843a6d914fa7 Mon Sep 17 00:00:00 2001
From: ccmdi <ccmdi.dev@gmail.com>
Date: Sat, 22 Nov 2025 17:14:56 -0500
Subject: [PATCH] fix: debounce update of tilelayer/image bounds

---
 src/map-renderer.ts                  |  4 ++--
 src/views/map-bases-view.ts          | 11 ++++++++++-
 src/views/map-timeline-bases-view.ts | 15 ++++++++++++++-
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/map-renderer.ts b/src/map-renderer.ts
index a17465e..dcbaac3 100644
--- a/src/map-renderer.ts
+++ b/src/map-renderer.ts
@@ -1,5 +1,5 @@
 import { App, TFile, setIcon } from 'obsidian';
-import { Deck, PickingInfo, MapViewState, FlyToInterpolator } from '@deck.gl/core';
+import { Deck, PickingInfo, MapViewState, FlyToInterpolator, Layer } from '@deck.gl/core';
 import { BitmapLayer, IconLayer, ScatterplotLayer, PolygonLayer } from '@deck.gl/layers';
 import { TileLayer } from '@deck.gl/geo-layers';
 import type { TileLayerProps, _Tile2DHeader as Tile2DHeader } from '@deck.gl/geo-layers';
@@ -696,7 +696,7 @@ export async function createMapRenderer(config: MapRendererOptions): Promise<Dec
             const markerLayer = createMarkerLayer(deckData, markerType, settings, tagSettings, options, app);
             const polygonLayer = createPolygonLayer(points, tagSettings, markerColor, options, app);
 
-            const layers = [backgroundLayer];
+            const layers: Layer[] = [backgroundLayer];
             if (polygonLayer) layers.push(polygonLayer);
             layers.push(markerLayer);
 
diff --git a/src/views/map-bases-view.ts b/src/views/map-bases-view.ts
index 91c4c8b..d1b3b0f 100644
--- a/src/views/map-bases-view.ts
+++ b/src/views/map-bases-view.ts
@@ -30,7 +30,7 @@ export class MapBasesView extends BasesView {
     
     protected savedViewState: { latitude: number; longitude: number; zoom: number } | null = null;
     protected lastPoints: MapPoint[] = [];
-    protected watchProps = ['center', 'defaultZoom'];
+    protected mapUpdateTimeout?: number;
     protected lastConfigState: Record<string, unknown> = {};
 
     constructor(controller: QueryController, scrollEl: HTMLElement, plugin: MapPlugin) {
@@ -171,6 +171,15 @@ export class MapBasesView extends BasesView {
     public onDataUpdated(): void {
         // If map exists, just update points. Otherwise create map.
         if (this.deck) {
+            if(this.hasConfigPropertyChanged('tileLayer') || this.hasConfigPropertyChanged('imageBounds')) {
+                //debounce 500ms
+                if (this.mapUpdateTimeout) {
+                    window.clearTimeout(this.mapUpdateTimeout);
+                }
+                this.mapUpdateTimeout = window.setTimeout(() => {
+                    this.refresh();
+                }, 1500);
+            }
             this.updateMap();
         } else {
             this.renderMap();
diff --git a/src/views/map-timeline-bases-view.ts b/src/views/map-timeline-bases-view.ts
index ef2a875..2bf6a14 100644
--- a/src/views/map-timeline-bases-view.ts
+++ b/src/views/map-timeline-bases-view.ts
@@ -29,7 +29,6 @@ export class MapTimelineBasesView extends MapBasesView {
     private playButton: HTMLButtonElement | null = null;
     // private liveUpdateTimeout?: number;
     private allTimelineEntries: TimelineMapPoint[] = [];
-    private mapUpdateTimeout?: number;
     private dataUpdateTimeout?: number;
 
     private isPlaying: boolean = false;
@@ -451,6 +450,20 @@ export class MapTimelineBasesView extends MapBasesView {
     }
 
     public onDataUpdated(): void {
+        // Check for base view config changes first (tileLayer, imageBounds, etc.)
+        if (this.deck) {
+            if(this.hasConfigPropertyChanged('tileLayer') || this.hasConfigPropertyChanged('imageBounds')) {
+                //debounce 500ms
+                if (this.mapUpdateTimeout) {
+                    window.clearTimeout(this.mapUpdateTimeout);
+                }
+                this.mapUpdateTimeout = window.setTimeout(() => {
+                    this.refresh();
+                }, 250);
+                return;
+            }
+        }
+
         if (this.getDateProperty()) {
             this.updateTimelineData();