@nextgis/ngw-leaflet 1.8.0 → 1.8.4

package/README.md

@@ -66,7 +66,7 @@ const ngwMap = new NgwMap({
 });
 ```
 
-Check out the [API Documentation](https://github.com/nextgis/nextgis_frontend/blob/master/markdown/ngw-map.md)
+Check out the [API Documentation](https://code-api.nextgis.com/modules/ngw_map.html)
 
 ## Commercial support
 

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

@@ -1,4 +1,4 @@
-/** Bundle of @nextgis/ngw-leaflet; version: 1.8.0; author: NextGIS */
+/** Bundle of @nextgis/ngw-leaflet; version: 1.8.4; author: NextGIS */
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
   var insertAt = ref.insertAt;
@@ -16682,10 +16682,10 @@ class WebMapLayers extends WebMapMain {
                     }
                 }
                 if (l.showLayer) {
-                    l.showLayer.call(l, l.layer);
+                    await l.showLayer.call(l, l.layer);
                 }
                 else if (l.layer !== undefined) {
-                    this.mapAdapter.showLayer(l.layer);
+                    await this.mapAdapter.showLayer(l.layer);
                 }
                 if (order !== undefined) {
                     this.mapAdapter.setLayerOrder(l.layer, order, this._layers);
@@ -16693,10 +16693,10 @@ class WebMapLayers extends WebMapMain {
             }
             else {
                 if (l.hideLayer) {
-                    l.hideLayer.call(l, l.layer);
+                    await l.hideLayer.call(l, l.layer);
                 }
                 else if (l.layer !== undefined) {
-                    this.mapAdapter.hideLayer(l.layer);
+                    await this.mapAdapter.hideLayer(l.layer);
                 }
             }
             if (!silent) {
@@ -16714,13 +16714,15 @@ class WebMapLayers extends WebMapMain {
         const layer = this.getLayer(layerDef);
         if (layer) {
             if (layer.updateLayer) {
-                layer.updateLayer();
+                return Promise.resolve(layer.updateLayer());
             }
             else if (this.isLayerVisible(layer)) {
-                this.hideLayer(layer, { silent: true });
-                this.showLayer(layer, { silent: true });
+                return this.hideLayer(layer, { silent: true }).then(() => {
+                    return this.showLayer(layer, { silent: true });
+                });
             }
         }
+        return Promise.resolve();
     }
     /**
      * Set transparency for a given layer by number from 0 to 1
@@ -19294,6 +19296,9 @@ class BaseProperty {
     getParent() {
         return this.item.tree.getParent();
     }
+    getChildren() {
+        return this.item.tree.getChildren();
+    }
     isGroup() {
         const children = this.item.tree.getDescendants();
         return children.length;
@@ -19408,6 +19413,24 @@ class CheckProperty extends BaseProperty {
                 return property && property.get();
             }));
     }
+    block(options) {
+        this._blocked = true;
+        this._block(options);
+    }
+    unBlock(options) {
+        this._blocked = false;
+        if (this.getValue()) {
+            this._unBlock(options);
+        }
+    }
+    blockChild(options) {
+        this.item.tree
+            .getDescendants()
+            .forEach((x) => this._blockChild(x, options));
+    }
+    unblockChild(options) {
+        this.item.tree.getChildren().forEach((x) => this._unBlockChild(x, options));
+    }
     _prepareValue(value) {
         return value;
     }
@@ -19429,30 +19452,12 @@ class CheckProperty extends BaseProperty {
             this.unblockChild(options);
         }
     }
-    block(options) {
-        this._blocked = true;
-        this._block(options);
-    }
     _block(options) {
         this._turnOff(options);
     }
-    unBlock(options) {
-        this._blocked = false;
-        if (this.getValue()) {
-            this._unBlock(options);
-        }
-    }
     _unBlock(options) {
         this._turnOn(options);
     }
-    blockChild(options) {
-        this.item.tree
-            .getDescendants()
-            .forEach((x) => this._blockChild(x, options));
-    }
-    unblockChild(options) {
-        this.item.tree.getChildren().forEach((x) => this._unBlockChild(x, options));
-    }
     _blockChild(item, options) {
         const prop = item.properties &&
             item.properties.property(this.name);
@@ -19510,22 +19515,22 @@ class ItemProperties {
     }
     _setPropertyHandler(propOpt) {
         const handlers = ItemProperties.handlers;
-        let handler = propOpt.handler;
-        if (!handler && propOpt.type) {
+        let Handler = propOpt.handler;
+        if (!Handler && propOpt.type) {
             switch (propOpt.type) {
                 case 'boolean':
-                    handler = handlers.CheckProperty;
+                    Handler = handlers.CheckProperty;
                     break;
                 case 'string':
-                    handler = handlers.BaseProperty;
+                    Handler = handlers.BaseProperty;
                     break;
                 default:
-                    handler = handlers.BaseProperty;
+                    Handler = handlers.BaseProperty;
             }
         }
-        if (handler && propOpt.name) {
+        if (Handler && propOpt.name) {
             const options = { ...(propOpt || {}) };
-            this._properties[propOpt.name] = new handler(propOpt.name, this.item, options);
+            this._properties[propOpt.name] = new Handler(propOpt.name, this.item, options);
             this._propertiesList.push(propOpt.name);
         }
     }
@@ -19581,6 +19586,55 @@ class Item {
     }
 }
 
+class WebmapLayerOpacityPropertyHandler extends BaseProperty {
+    getProperty() {
+        const layer = this.item.layer;
+        if (layer) {
+            return layer && layer.options && layer.options.opacity !== undefined
+                ? layer.options.opacity
+                : 1;
+        }
+        return 1;
+    }
+    update(value, options) {
+        options = options || {};
+        if (this.isGroup()) {
+            this._value = this._prepareValue(value, options);
+            const children = this.getChildren();
+            for (const child of children) {
+                const property = child.properties.property(this.name);
+                if (property) {
+                    if (options.propagation) {
+                        property.set(value, options);
+                    }
+                    else {
+                        property.update(property.get(), options);
+                    }
+                }
+            }
+        }
+        const layer = this.item.layer;
+        if (layer) {
+            const parents = this.getParents();
+            const coef = parents.reduce((s, x) => {
+                const prop = x.properties.property(this.name);
+                const multiplier = prop ? prop.getValue() : 1;
+                return s * multiplier;
+            }, 1);
+            const val = value * coef;
+            this.item.webMap.setLayerOpacity(layer, this._prepareValue(val));
+        }
+    }
+    _prepareValue(value, options) {
+        if (options && options.propagation && this.isGroup()) {
+            return 1;
+        }
+        // value = Number(value);
+        // return value < 0.1 ? 0.1 : value;
+        return Number(value);
+    }
+}
+
 class NgwWebmapItem extends Item {
     constructor(webMap, item, options, connector, parent, noInit) {
         super({ ...NgwWebmapItem.options, ...options });
@@ -19662,6 +19716,9 @@ class NgwWebmapItem extends Item {
     fit() {
         if (this.item.item_type === 'layer') ;
     }
+    getLayer() {
+        return this.layer;
+    }
     getItemOptions(item) {
         const transparency = item.item_type === 'layer' && item.layer_transparency;
         const opacity = typeof transparency === 'number' ? (100 - transparency) / 100 : undefined;
@@ -19682,12 +19739,7 @@ class NgwWebmapItem extends Item {
             options.order = Number((this.options.order | 0) + '.' + subLevel);
         }
         if (item.item_type === 'layer') {
-            const maxZoom = item.layer_max_scale_denom
-                ? this._mapScaleToZoomLevel(item.layer_max_scale_denom)
-                : this.webMap.options.maxZoom;
-            const minZoom = item.layer_min_scale_denom
-                ? this._mapScaleToZoomLevel(item.layer_min_scale_denom)
-                : this.webMap.options.minZoom;
+            const { maxZoom, minZoom } = this._getZoomRange(item);
             objectAssign(options, {
                 updateWmsParams: item.updateWmsParams,
                 url: item.url,
@@ -19710,6 +19762,23 @@ class NgwWebmapItem extends Item {
     _mapScaleToZoomLevel(scale) {
         return setScaleRatio(scale);
     }
+    _getZoomRange(item) {
+        const minZoomMap = this.webMap.options.minZoom;
+        const maxZoomMap = this.webMap.options.maxZoom;
+        const minZoomWebmap = this.options.minZoom;
+        const maxZoomWebmap = this.options.maxZoom;
+        const minZoomLayer = item.layer_min_scale_denom
+            ? this._mapScaleToZoomLevel(item.layer_min_scale_denom)
+            : undefined;
+        const maxZoomLayer = item.layer_max_scale_denom
+            ? this._mapScaleToZoomLevel(item.layer_max_scale_denom)
+            : undefined;
+        const minZooms = [minZoomMap, minZoomWebmap, minZoomLayer].filter(Boolean);
+        const maxZooms = [maxZoomMap, maxZoomWebmap, maxZoomLayer].filter(Boolean);
+        const minZoom = Math.max(...minZooms);
+        const maxZoom = Math.min(...maxZooms);
+        return { minZoom, maxZoom };
+    }
     _init(item) {
         this.initItem(item).then(() => {
             this.emitter.emit('init');
@@ -19763,6 +19832,10 @@ NgwWebmapItem.options = {
                 }
             },
         },
+        {
+            name: 'opacity',
+            handler: WebmapLayerOpacityPropertyHandler,
+        },
     ],
 };
 
@@ -19784,15 +19857,23 @@ async function createOnFirstShowAdapter({ webMap, adapterOptions = {}, onLayerAd
         destroyed() {
             return this._removed;
         }
-        showLayer() {
+        async showLayer() {
             this.options.visibility = true;
             if (this.layer.length) {
-                this.layer.forEach((x) => {
-                    webMap.showLayer(x);
-                });
+                for (const x of this.layer) {
+                    await webMap.showLayer(x);
+                }
             }
             else {
-                this.loadLayer();
+                await this.loadLayer();
+            }
+        }
+        async hideLayer() {
+            this.options.visibility = false;
+            if (this.layer) {
+                for (const x of this.layer) {
+                    await webMap.hideLayer(x);
+                }
             }
         }
         async loadLayer() {
@@ -19816,21 +19897,15 @@ async function createOnFirstShowAdapter({ webMap, adapterOptions = {}, onLayerAd
                     if (this._removed) {
                         webMap.removeLayer(adapter);
                     }
+                    this.layer.push(adapter);
                     if (this.options.visibility) {
                         await webMap.showLayer(adapter);
                     }
-                    this.layer.push(adapter);
                     this._creatingInProgress = false;
                 }
             }
             return this.layer;
         }
-        hideLayer() {
-            this.options.visibility = false;
-            if (this.layer) {
-                this.layer.forEach((x) => webMap.hideLayer(x));
-            }
-        }
     }
     return OnFirstShowAdapter;
 }
@@ -19949,14 +20024,19 @@ class NgwWebmapLayerAdapter {
         delete this.response;
         delete this._webmapLayersIds;
     }
-    showLayer() {
+    async showLayer() {
+        if (this.layer && this.layer.properties) {
+            return this.layer.properties.property('visibility').set(true);
+        }
+    }
+    async hideLayer() {
         if (this.layer && this.layer.properties) {
-            this.layer.properties.property('visibility').set(true);
+            return this.layer.properties.property('visibility').set(false);
         }
     }
-    hideLayer() {
+    async setOpacity(val) {
         if (this.layer && this.layer.properties) {
-            this.layer.properties.property('visibility').set(false);
+            return this.layer.properties.property('opacity').set(val);
         }
     }
     /** @deprecated use {@link NgwWebmapLayerAdapter.getBounds} instead */
@@ -20048,6 +20128,8 @@ class NgwWebmapLayerAdapter {
                     options.order = this.options.order;
                     options.ratio = this.options.ratio;
                     options.crossOrigin = this.options.crossOrigin;
+                    options.minZoom = this.options.minZoom;
+                    options.maxZoom = this.options.maxZoom;
                     options.drawOrderEnabled = webmap.draw_order_enabled;
                     const layer = new this.NgwWebmapItem(this.options.webMap, webmap.root_item, options, this.options.connector);
                     layer.emitter.on('init', () => resolve(layer));
@@ -22010,7 +22092,9 @@ class GeoJsonAdapter extends BaseAdapter {
     getBounds() {
         if (this.layer) {
             const bounds = this.layer.getBounds();
-            return boundsToArray(bounds);
+            if (bounds.isValid()) {
+                return boundsToArray(bounds);
+            }
         }
     }
     setOpacity(value) {
@@ -22072,8 +22156,9 @@ class GeoJsonAdapter extends BaseAdapter {
                 this._removePopup(popup);
             }
         };
-        const content = options.createPopupContent
-            ? await options.createPopupContent({
+        let content;
+        if (options.createPopupContent) {
+            content = await options.createPopupContent({
                 layer,
                 feature,
                 target: this,
@@ -22081,17 +22166,24 @@ class GeoJsonAdapter extends BaseAdapter {
                 close,
                 onClose,
                 ...createFeaturePositionOptions(feature),
-            })
-            : options.popupContent;
+            });
+        }
+        else {
+            content = options.popupContent;
+        }
         if (content && layer) {
-            popup = layer.bindPopup(content, {
+            const popupOptions = {
                 minWidth,
                 autoPan,
-                maxWidth,
+                // maxWidth,
                 closeButton,
                 closeOnClick: false,
                 autoClose: false,
-            });
+            };
+            if (defined(maxWidth)) {
+                popupOptions.maxWidth = maxWidth;
+            }
+            popup = layer.bindPopup(content, popupOptions);
             const unselectOnClose = (_b = (_a = this.options.popupOptions) === null || _a === void 0 ? void 0 : _a.unselectOnClose) !== null && _b !== void 0 ? _b : true;
             if (unselectOnClose) {
                 const p = layer.getPopup();
@@ -22101,9 +22193,7 @@ class GeoJsonAdapter extends BaseAdapter {
                     }, this);
             }
             this._openedPopup.push([popup, _closeHandlers, def]);
-            setTimeout(() => {
-                popup.openPopup(latlng);
-            }, 0);
+            popup.openPopup(latlng);
         }
     }
     _removePopup(popup) {