@nextgis/ngw-leaflet 2.1.1 → 2.2.1

package/lib/ngw-leaflet.esm-bundler.js

@@ -1,4 +1,4 @@
-/** Bundle of @nextgis/ngw-leaflet; version: 2.1.1; author: NextGIS */
+/** Bundle of @nextgis/ngw-leaflet; version: 2.2.1; author: NextGIS */
 import 'leaflet/dist/leaflet.css';
 import LeafletMapAdapter from '@nextgis/leaflet-map-adapter';
 import { NgwMap } from '@nextgis/ngw-map';

package/lib/ngw-leaflet.global.js

@@ -1,4 +1,4 @@
-/** Bundle of @nextgis/ngw-leaflet; version: 2.1.1; author: NextGIS */
+/** Bundle of @nextgis/ngw-leaflet; version: 2.2.1; author: NextGIS */
 var NgwLeaflet = (function () {
   'use strict';
 
@@ -15031,18 +15031,18 @@ var NgwLeaflet = (function () {
     };
   }
 
-  var __defProp$_ = Object.defineProperty;
-  var __defNormalProp$_ = (obj, key, value) => key in obj ? __defProp$_(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __publicField$H = (obj, key, value) => {
-    __defNormalProp$_(obj, typeof key !== "symbol" ? key + "" : key, value);
+  var __defProp$$ = Object.defineProperty;
+  var __defNormalProp$$ = (obj, key, value) => key in obj ? __defProp$$(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __publicField$I = (obj, key, value) => {
+    __defNormalProp$$(obj, typeof key !== "symbol" ? key + "" : key, value);
     return value;
   };
   class BaseAdapter {
     constructor(map, options) {
       this.map = map;
       this.options = options;
-      __publicField$H(this, "layer");
-      __publicField$H(this, "pane", "order-0");
+      __publicField$I(this, "layer");
+      __publicField$I(this, "pane", "order-0");
       if (options.order !== void 0) {
         const pane = "order-" + options.order;
         let exist = map.getPane(pane);
@@ -15071,19 +15071,19 @@ var NgwLeaflet = (function () {
     };
   }
 
-  var __defProp$Z = Object.defineProperty;
+  var __defProp$_ = Object.defineProperty;
   var __getOwnPropSymbols$E = Object.getOwnPropertySymbols;
   var __hasOwnProp$E = Object.prototype.hasOwnProperty;
   var __propIsEnum$E = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$Z = (obj, key, value) => key in obj ? __defProp$Z(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __defNormalProp$_ = (obj, key, value) => key in obj ? __defProp$_(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
   var __spreadValues$D = (a, b) => {
     for (var prop in b || (b = {}))
       if (__hasOwnProp$E.call(b, prop))
-        __defNormalProp$Z(a, prop, b[prop]);
+        __defNormalProp$_(a, prop, b[prop]);
     if (__getOwnPropSymbols$E)
       for (var prop of __getOwnPropSymbols$E(b)) {
         if (__propIsEnum$E.call(b, prop))
-          __defNormalProp$Z(a, prop, b[prop]);
+          __defNormalProp$_(a, prop, b[prop]);
       }
     return a;
   };
@@ -15102,32 +15102,32 @@ var NgwLeaflet = (function () {
     return opt;
   }
 
-  var __defProp$Y = Object.defineProperty;
+  var __defProp$Z = Object.defineProperty;
   var __getOwnPropSymbols$D = Object.getOwnPropertySymbols;
   var __hasOwnProp$D = Object.prototype.hasOwnProperty;
   var __propIsEnum$D = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$Y = (obj, key, value) => key in obj ? __defProp$Y(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __defNormalProp$Z = (obj, key, value) => key in obj ? __defProp$Z(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
   var __spreadValues$C = (a, b) => {
     for (var prop in b || (b = {}))
       if (__hasOwnProp$D.call(b, prop))
-        __defNormalProp$Y(a, prop, b[prop]);
+        __defNormalProp$Z(a, prop, b[prop]);
     if (__getOwnPropSymbols$D)
       for (var prop of __getOwnPropSymbols$D(b)) {
         if (__propIsEnum$D.call(b, prop))
-          __defNormalProp$Y(a, prop, b[prop]);
+          __defNormalProp$Z(a, prop, b[prop]);
       }
     return a;
   };
-  var __publicField$G = (obj, key, value) => {
-    __defNormalProp$Y(obj, typeof key !== "symbol" ? key + "" : key, value);
+  var __publicField$H = (obj, key, value) => {
+    __defNormalProp$Z(obj, typeof key !== "symbol" ? key + "" : key, value);
     return value;
   };
   class GeoJsonEvents {
     constructor(layer) {
-      __publicField$G(this, "layer");
-      __publicField$G(this, "_onclick");
-      __publicField$G(this, "_mouseout");
-      __publicField$G(this, "_mouseover");
+      __publicField$H(this, "layer");
+      __publicField$H(this, "_onclick");
+      __publicField$H(this, "_mouseout");
+      __publicField$H(this, "_mouseover");
       this.layer = layer;
     }
     handleMouseEvents(layer) {
@@ -15815,19 +15815,19 @@ var NgwLeaflet = (function () {
     typeof: evaluateArgs(([arg]) => typeOfValue(arg))
   };
 
-  var __defProp$X = Object.defineProperty;
+  var __defProp$Y = Object.defineProperty;
   var __getOwnPropSymbols$C = Object.getOwnPropertySymbols;
   var __hasOwnProp$C = Object.prototype.hasOwnProperty;
   var __propIsEnum$C = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$X = (obj, key, value) => key in obj ? __defProp$X(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __defNormalProp$Y = (obj, key, value) => key in obj ? __defProp$Y(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
   var __spreadValues$B = (a, b) => {
     for (var prop in b || (b = {}))
       if (__hasOwnProp$C.call(b, prop))
-        __defNormalProp$X(a, prop, b[prop]);
+        __defNormalProp$Y(a, prop, b[prop]);
     if (__getOwnPropSymbols$C)
       for (var prop of __getOwnPropSymbols$C(b)) {
         if (__propIsEnum$C.call(b, prop))
-          __defNormalProp$X(a, prop, b[prop]);
+          __defNormalProp$Y(a, prop, b[prop]);
       }
     return a;
   };
@@ -15852,19 +15852,19 @@ var NgwLeaflet = (function () {
     throw new Error(`Expression "${name}" is not supported.`);
   }
 
-  var __defProp$W = Object.defineProperty;
+  var __defProp$X = Object.defineProperty;
   var __getOwnPropSymbols$B = Object.getOwnPropertySymbols;
   var __hasOwnProp$B = Object.prototype.hasOwnProperty;
   var __propIsEnum$B = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$W = (obj, key, value) => key in obj ? __defProp$W(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __defNormalProp$X = (obj, key, value) => key in obj ? __defProp$X(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
   var __spreadValues$A = (a, b) => {
     for (var prop in b || (b = {}))
       if (__hasOwnProp$B.call(b, prop))
-        __defNormalProp$W(a, prop, b[prop]);
+        __defNormalProp$X(a, prop, b[prop]);
     if (__getOwnPropSymbols$B)
       for (var prop of __getOwnPropSymbols$B(b)) {
         if (__propIsEnum$B.call(b, prop))
-          __defNormalProp$W(a, prop, b[prop]);
+          __defNormalProp$X(a, prop, b[prop]);
       }
     return a;
   };
@@ -15903,19 +15903,19 @@ var NgwLeaflet = (function () {
     return;
   }
 
-  var __defProp$V = Object.defineProperty;
+  var __defProp$W = Object.defineProperty;
   var __getOwnPropSymbols$A = Object.getOwnPropertySymbols;
   var __hasOwnProp$A = Object.prototype.hasOwnProperty;
   var __propIsEnum$A = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$V = (obj, key, value) => key in obj ? __defProp$V(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __defNormalProp$W = (obj, key, value) => key in obj ? __defProp$W(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
   var __spreadValues$z = (a, b) => {
     for (var prop in b || (b = {}))
       if (__hasOwnProp$A.call(b, prop))
-        __defNormalProp$V(a, prop, b[prop]);
+        __defNormalProp$W(a, prop, b[prop]);
     if (__getOwnPropSymbols$A)
       for (var prop of __getOwnPropSymbols$A(b)) {
         if (__propIsEnum$A.call(b, prop))
-          __defNormalProp$V(a, prop, b[prop]);
+          __defNormalProp$W(a, prop, b[prop]);
       }
     return a;
   };
@@ -15999,19 +15999,19 @@ var NgwLeaflet = (function () {
     return logic === "any" ? filters_.some(filterFunction) : filters_.every(filterFunction);
   }
 
-  var __defProp$U = Object.defineProperty;
+  var __defProp$V = Object.defineProperty;
   var __getOwnPropSymbols$z = Object.getOwnPropertySymbols;
   var __hasOwnProp$z = Object.prototype.hasOwnProperty;
   var __propIsEnum$z = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$U = (obj, key, value) => key in obj ? __defProp$U(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __defNormalProp$V = (obj, key, value) => key in obj ? __defProp$V(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
   var __spreadValues$y = (a, b) => {
     for (var prop in b || (b = {}))
       if (__hasOwnProp$z.call(b, prop))
-        __defNormalProp$U(a, prop, b[prop]);
+        __defNormalProp$V(a, prop, b[prop]);
     if (__getOwnPropSymbols$z)
       for (var prop of __getOwnPropSymbols$z(b)) {
         if (__propIsEnum$z.call(b, prop))
-          __defNormalProp$U(a, prop, b[prop]);
+          __defNormalProp$V(a, prop, b[prop]);
       }
     return a;
   };
@@ -16135,21 +16135,21 @@ var NgwLeaflet = (function () {
     return newPaint;
   }
 
-  var __defProp$T = Object.defineProperty;
+  var __defProp$U = Object.defineProperty;
   var __defProps$j = Object.defineProperties;
   var __getOwnPropDescs$j = Object.getOwnPropertyDescriptors;
   var __getOwnPropSymbols$y = Object.getOwnPropertySymbols;
   var __hasOwnProp$y = Object.prototype.hasOwnProperty;
   var __propIsEnum$y = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$T = (obj, key, value) => key in obj ? __defProp$T(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __defNormalProp$U = (obj, key, value) => key in obj ? __defProp$U(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
   var __spreadValues$x = (a, b) => {
     for (var prop in b || (b = {}))
       if (__hasOwnProp$y.call(b, prop))
-        __defNormalProp$T(a, prop, b[prop]);
+        __defNormalProp$U(a, prop, b[prop]);
     if (__getOwnPropSymbols$y)
       for (var prop of __getOwnPropSymbols$y(b)) {
         if (__propIsEnum$y.call(b, prop))
-          __defNormalProp$T(a, prop, b[prop]);
+          __defNormalProp$U(a, prop, b[prop]);
       }
     return a;
   };
@@ -16166,13 +16166,13 @@ var NgwLeaflet = (function () {
       }
     return target;
   };
-  var __publicField$F = (obj, key, value) => {
-    __defNormalProp$T(obj, typeof key !== "symbol" ? key + "" : key, value);
+  var __publicField$G = (obj, key, value) => {
+    __defNormalProp$U(obj, typeof key !== "symbol" ? key + "" : key, value);
     return value;
   };
   class GeoJsonPaint {
     constructor(layer) {
-      __publicField$F(this, "layer");
+      __publicField$G(this, "layer");
       this.layer = layer;
     }
     setPaintEachLayer(paint) {
@@ -16299,27 +16299,27 @@ var NgwLeaflet = (function () {
     }
   }
 
-  var __defProp$S = Object.defineProperty;
+  var __defProp$T = Object.defineProperty;
   var __defProps$i = Object.defineProperties;
   var __getOwnPropDescs$i = Object.getOwnPropertyDescriptors;
   var __getOwnPropSymbols$x = Object.getOwnPropertySymbols;
   var __hasOwnProp$x = Object.prototype.hasOwnProperty;
   var __propIsEnum$x = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$S = (obj, key, value) => key in obj ? __defProp$S(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __defNormalProp$T = (obj, key, value) => key in obj ? __defProp$T(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
   var __spreadValues$w = (a, b) => {
     for (var prop in b || (b = {}))
       if (__hasOwnProp$x.call(b, prop))
-        __defNormalProp$S(a, prop, b[prop]);
+        __defNormalProp$T(a, prop, b[prop]);
     if (__getOwnPropSymbols$x)
       for (var prop of __getOwnPropSymbols$x(b)) {
         if (__propIsEnum$x.call(b, prop))
-          __defNormalProp$S(a, prop, b[prop]);
+          __defNormalProp$T(a, prop, b[prop]);
       }
     return a;
   };
   var __spreadProps$i = (a, b) => __defProps$i(a, __getOwnPropDescs$i(b));
-  var __publicField$E = (obj, key, value) => {
-    __defNormalProp$S(obj, typeof key !== "symbol" ? key + "" : key, value);
+  var __publicField$F = (obj, key, value) => {
+    __defNormalProp$T(obj, typeof key !== "symbol" ? key + "" : key, value);
     return value;
   };
   var __async$l = (__this, __arguments, generator) => {
@@ -16345,22 +16345,22 @@ var NgwLeaflet = (function () {
   class GeoJsonAdapter extends BaseAdapter {
     constructor(map, options) {
       super(map, options);
-      __publicField$E(this, "layer");
-      __publicField$E(this, "selected", false);
-      __publicField$E(this, "type");
-      __publicField$E(this, "_layers", []);
-      __publicField$E(this, "_events");
-      __publicField$E(this, "paint");
-      __publicField$E(this, "selectedPaint");
-      __publicField$E(this, "_selectedLayers", []);
-      __publicField$E(this, "_filteredLayers", []);
-      __publicField$E(this, "_filterFun");
-      __publicField$E(this, "_openedPopup", []);
-      __publicField$E(this, "_paint");
-      __publicField$E(this, "$updateTooltip", debounce(() => {
+      __publicField$F(this, "layer");
+      __publicField$F(this, "selected", false);
+      __publicField$F(this, "type");
+      __publicField$F(this, "_layers", []);
+      __publicField$F(this, "_events");
+      __publicField$F(this, "paint");
+      __publicField$F(this, "selectedPaint");
+      __publicField$F(this, "_selectedLayers", []);
+      __publicField$F(this, "_filteredLayers", []);
+      __publicField$F(this, "_filterFun");
+      __publicField$F(this, "_openedPopup", []);
+      __publicField$F(this, "_paint");
+      __publicField$F(this, "$updateTooltip", debounce(() => {
         this.updateTooltip();
       }, 300));
-      __publicField$E(this, "$unselect", () => {
+      __publicField$F(this, "$unselect", () => {
         this.unselect();
       });
       this._events = new GeoJsonEvents(this);
@@ -16879,26 +16879,125 @@ var NgwLeaflet = (function () {
     }
   }
 
-  function callAjax(src, callback, headers) {
-    const xhr = new XMLHttpRequest();
-    xhr.open("GET", src);
-    xhr.responseType = "arraybuffer";
-    for (const h in headers) {
-      xhr.setRequestHeader(h, headers[h]);
-    }
-    xhr.onload = function() {
-      const arrayBufferView = new Uint8Array(this.response);
-      const blob = new Blob([arrayBufferView], { type: "image/png" });
-      const urlCreator = window.URL || window.webkitURL;
-      const imageUrl = urlCreator.createObjectURL(blob);
-      callback(imageUrl);
-    };
-    xhr.send();
-    return () => {
-      xhr.abort();
+  function callAjax(src, headers) {
+    let abortFunc = () => {
     };
+    const promise = new Promise((resolve, reject) => {
+      const xhr = new XMLHttpRequest();
+      xhr.open("GET", src);
+      xhr.responseType = "arraybuffer";
+      for (const h in headers) {
+        xhr.setRequestHeader(h, headers[h]);
+      }
+      xhr.onload = function() {
+        const arrayBufferView = new Uint8Array(this.response);
+        const blob = new Blob([arrayBufferView], { type: "image/png" });
+        const urlCreator = window.URL || window.webkitURL;
+        const imageUrl = urlCreator.createObjectURL(blob);
+        resolve(imageUrl);
+      };
+      xhr.onerror = reject;
+      xhr.send();
+      abortFunc = () => {
+        xhr.abort();
+        resolve("");
+      };
+    });
+    return [promise, abortFunc];
   }
 
+  var __defProp$S = Object.defineProperty;
+  var __defNormalProp$S = (obj, key, value) => key in obj ? __defProp$S(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __publicField$E = (obj, key, value) => {
+    __defNormalProp$S(obj, typeof key !== "symbol" ? key + "" : key, value);
+    return value;
+  };
+  class Queue {
+    /**
+     * @param {PromiseQueueOptions} options - Configuration options for the queue.
+     */
+    constructor({ concurrency = 1, delay = 0 } = {}) {
+      __publicField$E(this, "queue", []);
+      __publicField$E(this, "concurrency");
+      __publicField$E(this, "activeCount", 0);
+      __publicField$E(this, "timeoutId");
+      __publicField$E(this, "delay");
+      __publicField$E(this, "toAbort", []);
+      this.concurrency = concurrency;
+      this.delay = delay;
+    }
+    /**
+     * Adds a task to the queue, which can be either a simple asynchronous function or an array containing a function and its abort handler.
+     *
+     * @param {PromiseFuncOrPromiseWithAbortArray} promise - The asynchronous task function or a tuple containing the task and an abort function.
+     * @param {Abort} [abort] - An optional abort function for the task.
+     *
+     * @example
+     * ```javascript
+     * // Add a task without an abort function.
+     * queue.add(() => new Promise(resolve => setTimeout(resolve, 1000)));
+     *
+     * // Add a task with an abort function.
+     * const controller = new AbortController();
+     * queue.add(() => fetch('https://example.com', { signal: controller.signal }), controller.abort);
+     * ```
+     */
+    add(promise, abort) {
+      this.queue.push({ promise, abort });
+      this.debouncedNext();
+    }
+    /**
+     * Aborts all tasks in the queue that have an abort function.
+     *
+     * @example
+     * queue.abort(); // Aborts all abortable tasks in the queue.
+     */
+    abort() {
+      for (const abort of this.toAbort) {
+        abort();
+      }
+      this.toAbort = [];
+      this.queue = [];
+      this._clearTimeout();
+    }
+    debouncedNext() {
+      this._clearTimeout();
+      this.timeoutId = setTimeout(() => this._next(), this.delay);
+    }
+    _clearTimeout() {
+      if (this.timeoutId) {
+        clearTimeout(this.timeoutId);
+      }
+    }
+    _next() {
+      while (this.activeCount < this.concurrency && this.queue.length > 0) {
+        const { promise, abort } = this.queue.shift();
+        this.activeCount++;
+        let toAbort = abort;
+        let request;
+        const execute = promise();
+        if (Array.isArray(execute)) {
+          request = execute[0];
+          toAbort = execute[1];
+        } else {
+          request = execute;
+        }
+        if (toAbort) {
+          this.toAbort.push(toAbort);
+        }
+        request.finally(() => {
+          this.activeCount--;
+          if (toAbort) {
+            this.toAbort = this.toAbort.filter((a) => a !== toAbort);
+          }
+          this.debouncedNext();
+        });
+      }
+    }
+  }
+
+  const imageQueue = new Queue({ concurrency: 6, delay: 200 });
+
   var __defProp$R = Object.defineProperty;
   var __defNormalProp$R = (obj, key, value) => key in obj ? __defProp$R(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
   var __publicField$D = (obj, key, value) => {
@@ -16908,31 +17007,27 @@ var NgwLeaflet = (function () {
   class ImageOverlay extends leafletSrcExports.ImageOverlay {
     constructor(imageUrl, bounds, options) {
       super(imageUrl, bounds, options);
-      __publicField$D(this, "_abort", []);
+      __publicField$D(this, "_aborter");
     }
     cancelLoad() {
-      if (this._abort) {
-        this._abort.forEach((x) => x());
-        this._abort = [];
+      if (this._aborter) {
+        this._aborter();
+        this._aborter = void 0;
       }
     }
     _initImage() {
       super._initImage();
       const headers = this.options.headers;
-      if (headers) {
-        const img = this._image;
-        const src = img.src;
-        img.src = "";
-        this._abort.push(
-          callAjax(
-            src,
-            (response) => {
-              img.src = response;
-            },
-            headers
-          )
-        );
-      }
+      const img = this._image;
+      img.src = "";
+      imageQueue.add(() => {
+        const [promise, abortFunc] = callAjax(img.src, headers);
+        promise.then((imgUrl) => {
+          img.src = imgUrl;
+        });
+        this._aborter = abortFunc;
+        return promise;
+      });
     }
   }
 
@@ -16970,6 +17065,7 @@ var NgwLeaflet = (function () {
       __publicField$C(this, "_url");
       __publicField$C(this, "_currentUrl");
       __publicField$C(this, "_currentOverlay");
+      __publicField$C(this, "_loadedOverlay");
       this._url = url;
       const params = {};
       const opts = {};
@@ -17023,15 +17119,18 @@ var NgwLeaflet = (function () {
       this._currentUrl = url;
       const viewPortBuffer = this.options.viewPortBuffer || 0;
       const bounds = this._map.getBounds().pad(viewPortBuffer);
+      if (this._loadedOverlay) {
+        this._loadedOverlay.cancelLoad();
+        this._loadedOverlay.off("load");
+        this._loadedOverlay = void 0;
+      }
       const overlay = new ImageOverlay(url, bounds, {
         opacity: 0,
         pane: this.options.pane,
         headers: this.options.headers
       });
       overlay.addTo(this._map);
-      if (this._currentOverlay) {
-        this._currentOverlay.cancelLoad();
-      }
+      this._loadedOverlay = overlay;
       overlay.once(
         "load",
         () => {
@@ -17044,6 +17143,7 @@ var NgwLeaflet = (function () {
           } else if (this._currentOverlay) {
             this._map.removeLayer(this._currentOverlay);
           }
+          this._loadedOverlay = void 0;
           this._currentOverlay = overlay;
           overlay.setOpacity(
             this.options.opacity !== void 0 ? this.options.opacity : 1
@@ -17170,6 +17270,7 @@ var NgwLeaflet = (function () {
       }
     }
   }
+  __publicField$B(ImageAdapter, "queue", imageQueue);
 
   function makeRemote(Base) {
     return class RemoteTileLayer extends Base {
@@ -17184,15 +17285,16 @@ var NgwLeaflet = (function () {
       createTile(coords, done) {
         const url = this.getTileUrl(coords);
         const tile = document.createElement("img");
-        tile.abort = callAjax(
+        const [promise, abortFunc] = callAjax(
           url,
-          (response) => {
-            tile.src = response;
-            done(null, tile);
-          },
           // @ts-ignore
           this.options.headers
         );
+        promise.then((response) => {
+          tile.src = response;
+          done(null, tile);
+        });
+        tile.abort = abortFunc;
         if (this.options.crossOrigin || this.options.crossOrigin === "") {
           tile.crossOrigin = this.options.crossOrigin === true ? "" : this.options.crossOrigin;
         }
@@ -17701,6 +17803,12 @@ var NgwLeaflet = (function () {
         for (const e of this._universalEvents) {
           map.on(e, () => this.emitter.emit(e, this), map);
         }
+        map.on("movestart", () => {
+          ImageAdapter.queue.abort();
+        });
+        map.on("zoomstart", () => {
+          ImageAdapter.queue.abort();
+        });
         for (const e of this._positionEvents) {
           map.on(
             e,