maplibre-gl-layer-control 0.9.0 → 0.9.2

package/README.md

@@ -3,6 +3,8 @@
 [![npm version](https://img.shields.io/npm/v/maplibre-gl-layer-control.svg)](https://www.npmjs.com/package/maplibre-gl-layer-control)
 [![npm downloads](https://img.shields.io/npm/dm/maplibre-gl-layer-control.svg)](https://www.npmjs.com/package/maplibre-gl-layer-control)
 [![license](https://img.shields.io/npm/l/maplibre-gl-layer-control.svg)](https://github.com/opengeos/maplibre-gl-layer-control/blob/main/LICENSE)
+[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/p/github/opengeos/maplibre-gl-layer-control)
+[![Open in StackBlitz](https://img.shields.io/badge/Open%20in-StackBlitz-blue?logo=stackblitz)](https://stackblitz.com/github/opengeos/maplibre-gl-layer-control)
 
 A comprehensive layer control for MapLibre GL with advanced styling capabilities. Built with TypeScript and React, providing both vanilla JavaScript and React integration options.
 

package/dist/index.cjs

@@ -740,7 +740,8 @@ class LayerControl {
         currentY: 0,
         placeholder: null,
         draggedElement: null
-      }
+      },
+      isStyleOperationInProgress: false
     };
     this.targetLayers = options.layers || Object.keys(this.state.layerStates);
     this.styleEditors = /* @__PURE__ */ new Map();
@@ -1674,13 +1675,20 @@ class LayerControl {
       this.toggleBackgroundVisibility(visible);
       return;
     }
+    this.state.isStyleOperationInProgress = true;
     if (this.state.layerStates[layerId]) {
       this.state.layerStates[layerId].visible = visible;
     }
     if ((_a = this.customLayerRegistry) == null ? void 0 : _a.setVisibility(layerId, visible)) {
+      setTimeout(() => {
+        this.state.isStyleOperationInProgress = false;
+      }, 200);
       return;
     }
     this.map.setLayoutProperty(layerId, "visibility", visible ? "visible" : "none");
+    setTimeout(() => {
+      this.state.isStyleOperationInProgress = false;
+    }, 200);
   }
   /**
    * Change layer opacity
@@ -1691,16 +1699,23 @@ class LayerControl {
       this.changeBackgroundOpacity(opacity);
       return;
     }
+    this.state.isStyleOperationInProgress = true;
     if (this.state.layerStates[layerId]) {
       this.state.layerStates[layerId].opacity = opacity;
     }
     if ((_a = this.customLayerRegistry) == null ? void 0 : _a.setOpacity(layerId, opacity)) {
+      setTimeout(() => {
+        this.state.isStyleOperationInProgress = false;
+      }, 200);
       return;
     }
     const layerType = getLayerType(this.map, layerId);
     if (layerType) {
       setLayerOpacity(this.map, layerId, layerType, opacity);
     }
+    setTimeout(() => {
+      this.state.isStyleOperationInProgress = false;
+    }, 200);
   }
   /**
    * Check if a layer is a user-added layer (vs basemap layer)
@@ -2509,6 +2524,9 @@ class LayerControl {
    * Check for new layers and add them to the control, remove deleted layers
    */
   checkForNewLayers() {
+    if (this.state.isStyleOperationInProgress) {
+      return;
+    }
     try {
       const style = this.map.getStyle();
       if (!style || !style.layers) {
@@ -3164,6 +3182,7 @@ class LayerControl {
    */
   applyUIOrderToMap() {
     var _a;
+    this.state.isStyleOperationInProgress = true;
     const items = this.panel.querySelectorAll(".layer-control-item");
     const uiLayerIds = [];
     items.forEach((item) => {
@@ -3185,6 +3204,9 @@ class LayerControl {
       }
     }
     (_a = this.onLayerReorder) == null ? void 0 : _a.call(this, uiLayerIds);
+    setTimeout(() => {
+      this.state.isStyleOperationInProgress = false;
+    }, 200);
   }
 }
 exports.CustomLayerRegistry = CustomLayerRegistry;