@nextgis/leaflet-map-adapter 4.0.1 → 4.1.0

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

@@ -1,7 +1,7 @@
-/** Bundle of @nextgis/leaflet-map-adapter; version: 4.0.1; author: NextGIS */
+/** Bundle of @nextgis/leaflet-map-adapter; version: 4.1.0; author: NextGIS */
 import { LeafletControlContainer, createControl, createButtonControl, createToggleControl } from '@nextgis/leaflet-control-container';
 import { EventEmitter } from 'events';
-import { Control, GeoJSON, DomEvent, DivIcon, Marker, CircleMarker, FeatureGroup, ImageOverlay as ImageOverlay$1, Layer, Util, GridLayer, DomUtil, TileLayer as TileLayer$1, Map, latLngBounds, latLng } from 'leaflet';
+import { Control, GeoJSON, DomEvent, DivIcon, Marker, CircleMarker, FeatureGroup, ImageOverlay as ImageOverlay$1, Util, Layer, GridLayer, DomUtil, TileLayer as TileLayer$1, Map, latLngBounds, latLng } from 'leaflet';
 import { defined, debounce as debounce$1, isObject, updateUrlParams } from '@nextgis/utils';
 import { isPaintCallback, isPaint } from '@nextgis/paint';
 import { getLayerRequestOptions } from '@nextgis/webmap';
@@ -1062,17 +1062,19 @@ function callAjax({
   return [promise, abortFunc];
 }
 
-const imageQueue = new Queue({ concurrency: 6, delay: 200 });
+const imageQueue = new Queue({ limit: 6, debounce: 150 });
 
 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) => __defNormalProp$6(obj, key + "" , value);
+const transparentImage = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEAAAAALAAAAAABAAEAAAIBAAA=";
 class ImageOverlay extends ImageOverlay$1 {
   constructor(imageUrl, bounds, options) {
     super(imageUrl, bounds, options);
     __publicField$3(this, "_aborter");
   }
   cancelLoad() {
+    imageQueue.remove(Util.stamp(this));
     if (this._aborter) {
       this._aborter();
       this._aborter = void 0;
@@ -1084,19 +1086,27 @@ class ImageOverlay extends ImageOverlay$1 {
     const img = this._image;
     const src = img.src;
     img.src = "";
-    imageQueue.add(() => {
-      const [promise, abortFunc] = callAjax({
-        src,
-        headers,
-        request,
-        withCredentials
-      });
-      promise.then((imgUrl) => {
-        img.src = imgUrl;
-      });
-      this._aborter = abortFunc;
-      return promise;
-    });
+    imageQueue.add(
+      ({ signal }) => {
+        const [promise, abortFunc] = callAjax({
+          src,
+          headers,
+          request,
+          withCredentials
+        });
+        void promise.then((imgUrl) => {
+          if (!signal.aborted) img.src = imgUrl || transparentImage;
+        }).catch((error) => {
+          if (!signal.aborted) {
+            console.error(error);
+            img.src = transparentImage;
+          }
+        });
+        this._aborter = abortFunc;
+        return [promise, abortFunc];
+      },
+      { id: Util.stamp(this) }
+    );
   }
 }
 
@@ -1166,6 +1176,12 @@ class ImageLayer extends Layer {
       map.removeLayer(this._currentOverlay);
       delete this._currentOverlay;
     }
+    if (this._loadedOverlay) {
+      this._loadedOverlay.cancelLoad();
+      this._loadedOverlay.off("load");
+      map.removeLayer(this._loadedOverlay);
+      this._loadedOverlay = void 0;
+    }
     if (this._currentUrl) {
       delete this._currentUrl;
     }
@@ -1191,6 +1207,7 @@ class ImageLayer extends Layer {
     if (this._loadedOverlay) {
       this._loadedOverlay.cancelLoad();
       this._loadedOverlay.off("load");
+      this._map.removeLayer(this._loadedOverlay);
       this._loadedOverlay = void 0;
     }
     const overlay = new ImageOverlay(url, bounds, {
@@ -1241,6 +1258,7 @@ class ImageLayer extends Layer {
     if (this._currentOverlay) {
       this._currentOverlay.setOpacity(opacity);
     }
+    this.fire("opacitychange", { opacity });
   }
   bringToBack() {
     this.options.isBack = true;