@nextgis/leaflet-map-adapter 2.1.0 → 2.2.1

package/lib/leaflet-map-adapter.esm-bundler.js

@@ -1,8 +1,9 @@
-/** Bundle of @nextgis/leaflet-map-adapter; version: 2.1.0; author: NextGIS */
+/** Bundle of @nextgis/leaflet-map-adapter; version: 2.2.1; author: NextGIS */
 import { EventEmitter } from 'events';
 import { Control, DomEvent, GeoJSON, DivIcon, Marker, CircleMarker, FeatureGroup, ImageOverlay as ImageOverlay$1, Layer, Util, CRS, GridLayer, DomUtil, TileLayer as TileLayer$1, Map, latLngBounds, latLng } from 'leaflet';
 import { defined, debounce as debounce$1 } from '@nextgis/utils';
 import { isPaintCallback, isPaint } from '@nextgis/paint';
+import Queue from '@nextgis/queue';
 
 class AttributionControl extends Control.Attribution {
   // options: AttributionControlOptions
@@ -1086,26 +1087,36 @@ class GeoJsonAdapter extends BaseAdapter {
   }
 }
 
-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];
 }
 
+const imageQueue = new Queue({ concurrency: 6, delay: 200 });
+var imageQueue$1 = imageQueue;
+
 var __defProp$6 = Object.defineProperty;
 var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField$3 = (obj, key, value) => {
@@ -1115,31 +1126,27 @@ var __publicField$3 = (obj, key, value) => {
 class ImageOverlay extends ImageOverlay$1 {
   constructor(imageUrl, bounds, options) {
     super(imageUrl, bounds, options);
-    __publicField$3(this, "_abort", []);
+    __publicField$3(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$1.add(() => {
+      const [promise, abortFunc] = callAjax(img.src, headers);
+      promise.then((imgUrl) => {
+        img.src = imgUrl;
+      });
+      this._aborter = abortFunc;
+      return promise;
+    });
   }
 }
 
@@ -1177,6 +1184,7 @@ class ImageLayer extends Layer {
     __publicField$2(this, "_url");
     __publicField$2(this, "_currentUrl");
     __publicField$2(this, "_currentOverlay");
+    __publicField$2(this, "_loadedOverlay");
     this._url = url;
     const params = {};
     const opts = {};
@@ -1230,15 +1238,18 @@ class ImageLayer extends Layer {
     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",
       () => {
@@ -1251,6 +1262,7 @@ class ImageLayer extends Layer {
         } 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
@@ -1377,6 +1389,7 @@ class ImageAdapter extends BaseAdapter {
     }
   }
 }
+__publicField$1(ImageAdapter, "queue", imageQueue$1);
 
 function debounce(cb, wait = 10) {
   let timeoutId;
@@ -1409,15 +1422,16 @@ function makeRemote(Base) {
     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;
       }
@@ -1926,6 +1940,12 @@ const _LeafletMapAdapter = class _LeafletMapAdapter {
       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,