maplibre-gl-layer-control 0.10.0 → 0.12.0

package/dist/index.cjs

@@ -685,6 +685,7 @@ class LayerControl {
     __publicField(this, "excludeLayerPatterns");
     __publicField(this, "customLayerRegistry", null);
     __publicField(this, "customLayerUnsubscribe", null);
+    __publicField(this, "removedCustomLayerIds", /* @__PURE__ */ new Set());
     __publicField(this, "basemapStyleUrl", null);
     __publicField(this, "basemapLayerIds", null);
     __publicField(this, "widthSliderEl", null);
@@ -1483,7 +1484,10 @@ class LayerControl {
       }
     });
     if (this.customLayerRegistry) {
-      this.customLayerUnsubscribe = this.customLayerRegistry.onChange(() => {
+      this.customLayerUnsubscribe = this.customLayerRegistry.onChange((event, layerId) => {
+        if (event === "add" && layerId) {
+          this.removedCustomLayerIds.delete(layerId);
+        }
         setTimeout(() => this.checkForNewLayers(), 100);
       });
     }
@@ -2147,6 +2151,17 @@ class LayerControl {
     content.appendChild(infoText);
     const actions = document.createElement("div");
     actions.className = "style-editor-actions";
+    const removeBtn = document.createElement("button");
+    removeBtn.className = "style-editor-button style-editor-button-remove";
+    removeBtn.textContent = "Remove";
+    removeBtn.title = "Remove layer from map";
+    removeBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      if (confirm("Are you sure you want to remove this layer?")) {
+        this.closeStyleEditor(layerId);
+        this.removeLayer(layerId);
+      }
+    });
     const closeActionBtn = document.createElement("button");
     closeActionBtn.className = "style-editor-button style-editor-button-close";
     closeActionBtn.textContent = "Close";
@@ -2154,6 +2169,7 @@ class LayerControl {
       e.stopPropagation();
       this.closeStyleEditor(layerId);
     });
+    actions.appendChild(removeBtn);
     actions.appendChild(closeActionBtn);
     editor.appendChild(header);
     editor.appendChild(content);
@@ -2209,6 +2225,17 @@ class LayerControl {
       e.stopPropagation();
       this.resetLayerStyle(layerId);
     });
+    const removeBtn = document.createElement("button");
+    removeBtn.className = "style-editor-button style-editor-button-remove";
+    removeBtn.textContent = "Remove";
+    removeBtn.title = "Remove layer from map";
+    removeBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      if (confirm("Are you sure you want to remove this layer?")) {
+        this.closeStyleEditor(layerId);
+        this.removeLayer(layerId);
+      }
+    });
     const closeActionBtn = document.createElement("button");
     closeActionBtn.className = "style-editor-button style-editor-button-close";
     closeActionBtn.textContent = "Close";
@@ -2217,6 +2244,7 @@ class LayerControl {
       this.closeStyleEditor(layerId);
     });
     actions.appendChild(resetBtn);
+    actions.appendChild(removeBtn);
     actions.appendChild(closeActionBtn);
     editor.appendChild(header);
     editor.appendChild(controls);
@@ -2617,7 +2645,7 @@ class LayerControl {
       if (this.customLayerRegistry) {
         const customLayerIds = this.customLayerRegistry.getAllLayerIds();
         customLayerIds.forEach((layerId) => {
-          if (!this.state.layerStates[layerId]) {
+          if (!this.state.layerStates[layerId] && !this.removedCustomLayerIds.has(layerId)) {
             const customState = this.customLayerRegistry.getLayerState(layerId);
             if (customState) {
               this.state.layerStates[layerId] = {
@@ -2658,7 +2686,10 @@ class LayerControl {
   registerCustomAdapter(adapter) {
     if (!this.customLayerRegistry) {
       this.customLayerRegistry = new CustomLayerRegistry();
-      this.customLayerUnsubscribe = this.customLayerRegistry.onChange(() => {
+      this.customLayerUnsubscribe = this.customLayerRegistry.onChange((event, layerId) => {
+        if (event === "add" && layerId) {
+          this.removedCustomLayerIds.delete(layerId);
+        }
         this.checkForNewLayers();
       });
     }
@@ -3073,27 +3104,28 @@ class LayerControl {
     var _a, _b;
     const layerState = this.state.layerStates[layerId];
     if ((layerState == null ? void 0 : layerState.isCustomLayer) && this.customLayerRegistry) {
+      this.removedCustomLayerIds.add(layerId);
+      this.customLayerRegistry.setVisibility(layerId, false);
       this.customLayerRegistry.removeLayer(layerId);
-    } else {
-      try {
-        const layer = this.map.getLayer(layerId);
-        if (layer) {
-          const sourceId = layer.source;
-          this.map.removeLayer(layerId);
-          if (sourceId) {
-            const style = this.map.getStyle();
-            const sourceStillUsed = (_a = style == null ? void 0 : style.layers) == null ? void 0 : _a.some((l) => l.source === sourceId);
-            if (!sourceStillUsed) {
-              try {
-                this.map.removeSource(sourceId);
-              } catch (e) {
-              }
+    }
+    try {
+      const layer = this.map.getLayer(layerId);
+      if (layer) {
+        const sourceId = layer.source;
+        this.map.removeLayer(layerId);
+        if (sourceId) {
+          const style = this.map.getStyle();
+          const sourceStillUsed = (_a = style == null ? void 0 : style.layers) == null ? void 0 : _a.some((l) => l.source === sourceId);
+          if (!sourceStillUsed) {
+            try {
+              this.map.removeSource(sourceId);
+            } catch (e) {
             }
           }
         }
-      } catch (error) {
-        console.warn(`Failed to remove layer ${layerId}:`, error);
       }
+    } catch (error) {
+      console.warn(`Failed to remove layer ${layerId}:`, error);
     }
     delete this.state.layerStates[layerId];
     this.state.customLayerNames.delete(layerId);