@nextgis/leaflet-map-adapter 2.2.0 → 2.2.1

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

@@ -1,8 +1,9 @@
-/** Bundle of @nextgis/leaflet-map-adapter; version: 2.2.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, Util, Layer, CRS, GridLayer, DomUtil, TileLayer as TileLayer$1, Map, latLngBounds, latLng } from 'leaflet';
+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) => {
@@ -1127,21 +1138,15 @@ class ImageOverlay extends ImageOverlay$1 {
     super._initImage();
     const headers = this.options.headers;
     const img = this._image;
-    const src = img.src;
-    if (headers) {
-      img.src = "";
-      this._aborter = callAjax(
-        src,
-        (response) => {
-          img.src = response;
-        },
-        headers
-      );
-    } else {
-      this._aborter = () => {
-        img.setAttribute("src", Util.emptyImageUrl);
-      };
-    }
+    img.src = "";
+    imageQueue$1.add(() => {
+      const [promise, abortFunc] = callAjax(img.src, headers);
+      promise.then((imgUrl) => {
+        img.src = imgUrl;
+      });
+      this._aborter = abortFunc;
+      return promise;
+    });
   }
 }
 
@@ -1384,6 +1389,7 @@ class ImageAdapter extends BaseAdapter {
     }
   }
 }
+__publicField$1(ImageAdapter, "queue", imageQueue$1);
 
 function debounce(cb, wait = 10) {
   let timeoutId;
@@ -1416,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;
       }
@@ -1933,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,