maplibre-gl-layer-control 0.13.0 → 0.14.1

package/dist/index.cjs

@@ -686,6 +686,7 @@ class LayerControl {
     __publicField(this, "styleEditors");
     __publicField(this, "initialSourceIds", null);
     __publicField(this, "initialLayerIds", null);
+    __publicField(this, "initialLayerStates");
     // Panel width management
     __publicField(this, "minPanelWidth");
     __publicField(this, "maxPanelWidth");
@@ -729,11 +730,12 @@ class LayerControl {
     this.onLayerRename = options.onLayerRename;
     this.onLayerReorder = options.onLayerReorder;
     this.onLayerRemove = options.onLayerRemove;
+    this.initialLayerStates = options.layerStates || {};
     this.state = {
       collapsed: options.collapsed !== false,
       panelWidth: options.panelWidth || 350,
       activeStyleEditor: null,
-      layerStates: options.layerStates || {},
+      layerStates: {},
       originalStyles: /* @__PURE__ */ new Map(),
       userInteractingWithSlider: false,
       backgroundLegendOpen: false,
@@ -757,7 +759,7 @@ class LayerControl {
       },
       isStyleOperationInProgress: false
     };
-    this.targetLayers = options.layers || Object.keys(this.state.layerStates);
+    this.targetLayers = options.layers || Object.keys(this.initialLayerStates);
     this.styleEditors = /* @__PURE__ */ new Map();
     if (options.customLayerAdapters && options.customLayerAdapters.length > 0) {
       this.customLayerRegistry = new CustomLayerRegistry();
@@ -929,11 +931,11 @@ class LayerControl {
         const layerType = layer.type;
         const opacity = getLayerOpacity(this.map, layerId, layerType);
         const friendlyName = this.generateFriendlyName(layerId);
-        this.state.layerStates[layerId] = {
+        this.state.layerStates[layerId] = this.mergeWithUserState(layerId, {
           visible: isVisible,
           opacity,
           name: friendlyName
-        };
+        });
       });
     } else {
       const userLayers = [];
@@ -964,11 +966,11 @@ class LayerControl {
         const layerType = layer.type;
         const opacity = getLayerOpacity(this.map, layerId, layerType);
         const friendlyName = this.generateFriendlyName(layerId);
-        this.state.layerStates[layerId] = {
+        this.state.layerStates[layerId] = this.mergeWithUserState(layerId, {
           visible: isVisible,
           opacity,
           name: friendlyName
-        };
+        });
       });
     }
     if (this.customLayerRegistry) {
@@ -1089,6 +1091,21 @@ class LayerControl {
     name = name.replace(/\b\w/g, (char) => char.toUpperCase());
     return name || layerId;
   }
+  /**
+   * Merge auto-detected layer state with user-provided initial state.
+   * User-provided values take precedence over detected values.
+   */
+  mergeWithUserState(layerId, detected) {
+    const userState = this.initialLayerStates[layerId];
+    if (!userState) return detected;
+    return {
+      visible: userState.visible ?? detected.visible,
+      opacity: userState.opacity ?? detected.opacity,
+      name: userState.name ?? detected.name,
+      ...userState.isCustomLayer !== void 0 && { isCustomLayer: userState.isCustomLayer },
+      ...userState.customLayerType !== void 0 && { customLayerType: userState.customLayerType }
+    };
+  }
   /**
    * Check if a layer ID belongs to a drawing library (Geoman, Mapbox GL Draw, etc.)
    * @param layerId The layer ID to check
@@ -2200,10 +2217,10 @@ class LayerControl {
     removeBtn.title = "Remove layer from map";
     removeBtn.addEventListener("click", (e) => {
       e.stopPropagation();
-      if (confirm("Are you sure you want to remove this layer?")) {
+      this.showRemoveConfirmation(editor, () => {
         this.closeStyleEditor(layerId);
         this.removeLayer(layerId);
-      }
+      });
     });
     const closeActionBtn = document.createElement("button");
     closeActionBtn.className = "style-editor-button style-editor-button-close";
@@ -2292,10 +2309,10 @@ class LayerControl {
     removeBtn.title = "Remove layer from map";
     removeBtn.addEventListener("click", (e) => {
       e.stopPropagation();
-      if (confirm("Are you sure you want to remove this layer?")) {
+      this.showRemoveConfirmation(editor, () => {
         this.closeStyleEditor(layerId);
         this.removeLayer(layerId);
-      }
+      });
     });
     const closeActionBtn = document.createElement("button");
     closeActionBtn.className = "style-editor-button style-editor-button-close";
@@ -2375,10 +2392,10 @@ class LayerControl {
     removeBtn.title = "Remove layer from map";
     removeBtn.addEventListener("click", (e) => {
       e.stopPropagation();
-      if (confirm("Are you sure you want to remove this layer?")) {
+      this.showRemoveConfirmation(editor, () => {
         this.closeStyleEditor(layerId);
         this.removeLayer(layerId);
-      }
+      });
     });
     const closeActionBtn = document.createElement("button");
     closeActionBtn.className = "style-editor-button style-editor-button-close";
@@ -3247,6 +3264,51 @@ class LayerControl {
     this.buildLayerItems();
     (_b = this.onLayerReorder) == null ? void 0 : _b.call(this, this.getUserLayerIdsInMapOrder());
   }
+  /**
+   * Show inline remove confirmation instead of browser confirm() dialog.
+   * Works in Jupyter notebooks where native dialogs may not appear.
+   */
+  showRemoveConfirmation(container, onConfirm) {
+    const existing = container.querySelector(".layer-control-remove-confirm");
+    if (existing) {
+      existing.remove();
+    }
+    const confirmEl = document.createElement("div");
+    confirmEl.className = "layer-control-remove-confirm";
+    const message = document.createElement("div");
+    message.className = "layer-control-remove-confirm-message";
+    message.innerHTML = `
+      <svg class="layer-control-remove-confirm-icon" viewBox="0 0 20 20" fill="currentColor">
+        <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"/>
+      </svg>
+      <span>Remove this layer?</span>
+    `;
+    const buttons = document.createElement("div");
+    buttons.className = "layer-control-remove-confirm-buttons";
+    const cancelBtn = document.createElement("button");
+    cancelBtn.className = "layer-control-remove-confirm-btn layer-control-remove-confirm-btn-cancel";
+    cancelBtn.textContent = "Cancel";
+    cancelBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      confirmEl.remove();
+    });
+    const confirmBtn = document.createElement("button");
+    confirmBtn.className = "layer-control-remove-confirm-btn layer-control-remove-confirm-btn-confirm";
+    confirmBtn.textContent = "Remove";
+    confirmBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      confirmEl.remove();
+      onConfirm();
+    });
+    buttons.appendChild(cancelBtn);
+    buttons.appendChild(confirmBtn);
+    confirmEl.appendChild(message);
+    confirmEl.appendChild(buttons);
+    container.appendChild(confirmEl);
+    requestAnimationFrame(() => {
+      confirmEl.scrollIntoView({ behavior: "smooth", block: "nearest" });
+    });
+  }
   /**
    * Remove a layer from the map
    */