maplibre-gl-layer-control 0.14.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