@nextgis/leaflet-map-adapter 3.1.0 → 4.0.0-alpha.1

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

@@ -1,8 +1,10 @@
-/** Bundle of @nextgis/leaflet-map-adapter; version: 3.1.0; author: NextGIS */
+/** Bundle of @nextgis/leaflet-map-adapter; version: 4.0.0-alpha.1; author: NextGIS */
+import { LeafletControlContainer, createControl, createButtonControl, createToggleControl } from '@nextgis/leaflet-control-container';
 import { EventEmitter } from 'events';
-import { Control, DomEvent, GeoJSON, 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, Layer, Util, 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';
 import Queue from '@nextgis/queue';
 
 class AttributionControl extends Control.Attribution {
@@ -22,81 +24,6 @@ class AttributionControl extends Control.Attribution {
   }
 }
 
-function createControl(control, options = {}, map) {
-  const C = Control.extend({
-    onAdd() {
-      const element = document.createElement("div");
-      const content = control.onAdd(map);
-      element.classList.add("leaflet-control");
-      if (options.bar) {
-        element.classList.add("leaflet-bar");
-      }
-      if (options.addClass) {
-        element.classList.add(options.addClass);
-      }
-      if (!options.margin && !options.bar) {
-        element.style.marginBottom = "0px";
-        element.style.marginTop = "0px";
-        element.style.marginLeft = "0px";
-        element.style.marginRight = "0px";
-      }
-      if (content) {
-        element.appendChild(content);
-      }
-      DomEvent.disableClickPropagation(element);
-      return element;
-    },
-    onRemove() {
-      control.onRemove();
-    }
-  });
-  return new C();
-}
-
-function createButtonControl(options, map) {
-  const link = document.createElement("a");
-  const title = options.title || "";
-  link.href = "#";
-  link.title = title;
-  link.setAttribute("role", "button");
-  link.setAttribute("aria-label", title);
-  if (options.addClass) {
-    link.classList.add(options.addClass);
-  }
-  DomEvent.disableClickPropagation(link);
-  DomEvent.on(link, "click", DomEvent.stop);
-  if (options.html instanceof HTMLElement) {
-    link.appendChild(options.html);
-  } else if (typeof options.html === "string") {
-    link.innerHTML = options.html;
-  }
-  const onClick = (e) => {
-    e.stopPropagation();
-    options.onClick();
-  };
-  return createControl(
-    {
-      onAdd() {
-        if (options.onClick !== void 0) {
-          link.addEventListener("click", onClick);
-        }
-        return link;
-      },
-      onRemove() {
-        const parent = link.parentNode;
-        if (parent) {
-          parent.removeChild(link);
-        }
-        if (options.onClick !== void 0) {
-          link.removeEventListener("click", onClick);
-        }
-      }
-    },
-    { bar: true },
-    map
-  );
-}
-
 function boundsToArray(bounds) {
   const ne = bounds.getNorthEast();
   const sw = bounds.getSouthWest();
@@ -1091,34 +1018,38 @@ class GeoJsonAdapter extends BaseAdapter {
 function callAjax({
   src,
   headers,
-  withCredentials
+  withCredentials,
+  request
 }) {
-  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]);
-    }
-    if (withCredentials) {
-      xhr.withCredentials = withCredentials;
-    }
-    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("");
-    };
+  const layerRequest = getLayerRequestOptions({
+    headers,
+    request,
+    withCredentials
+  });
+  const requestHeaders = (layerRequest == null ? void 0 : layerRequest.headers) || {};
+  const controller = new AbortController();
+  const promise = fetch(src, {
+    cache: layerRequest == null ? void 0 : layerRequest.cache,
+    credentials: layerRequest == null ? void 0 : layerRequest.credentials,
+    headers: requestHeaders,
+    signal: controller.signal
+  }).then((response) => {
+    if (!response.ok) {
+      throw new Error(response.statusText);
+    }
+    return response.blob();
+  }).then((blob) => {
+    const urlCreator = window.URL || window.webkitURL;
+    return urlCreator.createObjectURL(blob);
+  }).catch((er) => {
+    if (er.name === "AbortError") {
+      return "";
+    }
+    throw er;
   });
+  const abortFunc = () => {
+    controller.abort();
+  };
   return [promise, abortFunc];
 }
 
@@ -1140,7 +1071,7 @@ class ImageOverlay extends ImageOverlay$1 {
   }
   _initImage() {
     super._initImage();
-    const { headers, withCredentials } = this.options;
+    const { headers, request, withCredentials } = this.options;
     const img = this._image;
     const src = img.src;
     img.src = "";
@@ -1148,6 +1079,7 @@ class ImageOverlay extends ImageOverlay$1 {
       const [promise, abortFunc] = callAjax({
         src,
         headers,
+        request,
         withCredentials
       });
       promise.then((imgUrl) => {
@@ -1256,6 +1188,7 @@ class ImageLayer extends Layer {
       opacity: 0,
       pane: this.options.pane,
       headers: this.options.headers,
+      request: this.options.request,
       withCredentials: this.options.withCredentials
     });
     overlay.addTo(this._map);
@@ -1380,15 +1313,17 @@ class ImageAdapter extends BaseAdapter {
     const url = options && options.url;
     if (url) {
       const updateWmsParamsFromOpt = options.updateWmsParams;
-      this.layer = new ImageLayer(url, __spreadValues$4(__spreadValues$4(__spreadValues$4({
+      const request = getLayerRequestOptions(options);
+      this.layer = new ImageLayer(url, __spreadProps$3(__spreadValues$4(__spreadValues$4(__spreadValues$4({
         pane: this.pane,
-        headers: options.headers,
         setViewDelay: options.setViewDelay
       }, __spreadProps$3(__spreadValues$4({
         transparent: true
       }, options), {
         opacity: (_a = options.opacity) != null ? _a : void 0
-      })), options.params), options.nativeOptions));
+      })), options.params), options.nativeOptions), {
+        request
+      }));
       if (updateWmsParamsFromOpt) {
         const updateWmsParams = this.layer.updateWmsParams;
         this.layer.updateWmsParams = function(map) {
@@ -1443,7 +1378,8 @@ function makeRemote(Base) {
       const [promise, abortFunc] = callAjax({
         src,
         withCredentials: this.options.withCredentials,
-        headers: this.options.headers
+        headers: this.options.headers,
+        request: this.options.request
       });
       promise.then((response) => {
         tile.src = response;
@@ -1534,10 +1470,10 @@ class TileAdapter extends BaseAdapter {
           tileLayerOptions.subdomains = opt.subdomains;
         }
         let layer;
-        if (opt.headers || opt.withCredentials) {
+        const request = getLayerRequestOptions(opt);
+        if (request) {
           layer = new TileLayer(url, __spreadProps$2(__spreadValues$3({}, tileLayerOptions), {
-            headers: opt.headers,
-            withCredentials: opt.withCredentials,
+            request,
             setViewDelay: opt.setViewDelay
           }));
         } else {
@@ -1642,10 +1578,10 @@ class WmsAdapter extends BaseAdapter {
         transparent: true
       }, options.nativeOptions);
       let layer;
-      if (opt.headers || opt.withCredentials) {
+      const request = getLayerRequestOptions(opt);
+      if (request) {
         layer = new WmsLayer(url, __spreadProps(__spreadValues$1({}, layerOptions), {
-          headers: opt.headers,
-          withCredentials: opt.withCredentials
+          request
         }));
       } else {
         layer = new TileLayer$1.WMS(url, layerOptions);
@@ -1688,6 +1624,7 @@ const _LeafletMapAdapter = class _LeafletMapAdapter {
     __publicField(this, "emitter", new EventEmitter());
     __publicField(this, "map");
     __publicField(this, "_resizeObserver");
+    __publicField(this, "_controlContainer");
     __publicField(this, "_unselectCb", []);
     __publicField(this, "_universalEvents", [
       "move",
@@ -1726,6 +1663,7 @@ const _LeafletMapAdapter = class _LeafletMapAdapter {
       this._updateMinZoomForBounds(minZoom);
       this._watchSizeChangeToUpdateMinZoom();
       const defPane = this.map.createPane("order-0");
+      this._controlContainer = new LeafletControlContainer(this.map);
       this.map._addUnselectCb = (def) => {
         this._addUnselectCb(def);
       };
@@ -1738,12 +1676,19 @@ const _LeafletMapAdapter = class _LeafletMapAdapter {
     if (this.map) {
       this.map.remove();
     }
+    if (this._controlContainer) {
+      this._controlContainer.detach();
+      this._controlContainer = void 0;
+    }
     this._stopWatchSizeChangeToUpdateMinZoom();
   }
   getContainer() {
     return this.map && this.map.getContainer();
   }
   getControlContainer() {
+    if (this._controlContainer) {
+      return this._controlContainer.getContainer();
+    }
     const controlContainer = this.map && this.map._controlContainer;
     if (controlContainer) {
       return controlContainer;
@@ -1857,16 +1802,17 @@ const _LeafletMapAdapter = class _LeafletMapAdapter {
   createButtonControl(options) {
     return createButtonControl(options, this);
   }
-  addControl(control, position) {
-    control.options.position = position.replace("-", "");
-    if (this.map) {
-      this.map.addControl(control);
-      return control;
+  createToggleControl(options) {
+    return createToggleControl(options, this);
+  }
+  addControl(control, position, options) {
+    if (this._controlContainer) {
+      return this._controlContainer.addControl(control, position, options);
     }
   }
   removeControl(control) {
-    if (this.map) {
-      this.map.removeControl(control);
+    if (this._controlContainer) {
+      this._controlContainer.removeControl(control);
     }
   }
   removeLayer(layer) {