maplibre-gl-layer-control 0.17.1 → 0.17.3

package/README.md

@@ -179,6 +179,8 @@ function MapComponent() {
 | `enableBackgroundPresets` | `boolean` | `true` | Show the "Saved configurations" controls in the Background Layers panel |
 | `backgroundPresetStorageKey` | `string` | `'maplibre-layer-control:background-presets'` | `localStorage` key under which background visibility presets are stored |
 | `onBackgroundPresetsChange` | `(presets: BackgroundPresets) => void` | `undefined` | Called whenever the saved preset set changes (created or deleted); applying a preset does not change the set, so it does not fire |
+| `onBackgroundVisibilityChange` | `(visible: boolean) => void` | `undefined` | Called when the Background (basemap) group is toggled via the checkbox; mirror it into your own store to keep external basemap UI in sync |
+| `onBackgroundOpacityChange` | `(opacity: number) => void` | `undefined` | Called when the Background (basemap) group opacity slider changes; mirror it into your own store to keep external basemap UI in sync |
 
 ### LayerState
 

package/dist/index.cjs

@@ -724,6 +724,8 @@ class LayerControl {
     __publicField(this, "onLayerRename");
     __publicField(this, "onLayerReorder");
     __publicField(this, "onLayerRemove");
+    __publicField(this, "onBackgroundVisibilityChange");
+    __publicField(this, "onBackgroundOpacityChange");
     // Background-layer visibility presets
     __publicField(this, "enableBackgroundPresets");
     __publicField(this, "backgroundPresetStorageKey");
@@ -744,6 +746,8 @@ class LayerControl {
     this.onLayerRename = options.onLayerRename;
     this.onLayerReorder = options.onLayerReorder;
     this.onLayerRemove = options.onLayerRemove;
+    this.onBackgroundVisibilityChange = options.onBackgroundVisibilityChange;
+    this.onBackgroundOpacityChange = options.onBackgroundOpacityChange;
     this.enableBackgroundPresets = options.enableBackgroundPresets !== false;
     this.backgroundPresetStorageKey = options.backgroundPresetStorageKey || "maplibre-layer-control:background-presets";
     this.onBackgroundPresetsChange = options.onBackgroundPresetsChange;
@@ -1586,7 +1590,7 @@ class LayerControl {
       if (!state) {
         return;
       }
-      if (this.targetLayers.length === 0 || this.targetLayers.includes(layerId)) {
+      if (layerId === "Background" || this.targetLayers.length === 0 || this.targetLayers.includes(layerId)) {
         this.addLayerItem(layerId, state);
       }
     });
@@ -1906,6 +1910,7 @@ class LayerControl {
    * Toggle visibility for all background layers (basemap layers)
    */
   toggleBackgroundVisibility(visible) {
+    var _a;
     if (this.state.layerStates["Background"]) {
       this.state.layerStates["Background"].visible = visible;
     }
@@ -1933,11 +1938,13 @@ class LayerControl {
         });
       }
     }
+    (_a = this.onBackgroundVisibilityChange) == null ? void 0 : _a.call(this, visible);
   }
   /**
    * Change opacity for all background layers (basemap layers)
    */
   changeBackgroundOpacity(opacity) {
+    var _a;
     if (this.state.layerStates["Background"]) {
       this.state.layerStates["Background"].opacity = opacity;
     }
@@ -1950,6 +1957,7 @@ class LayerControl {
         }
       }
     });
+    (_a = this.onBackgroundOpacityChange) == null ? void 0 : _a.call(this, opacity);
   }
   // ===== Background Legend Methods =====
   /**
@@ -3345,6 +3353,7 @@ class LayerControl {
       const isAutoDetectMode = this.targetLayers.length === 0 || this.targetLayers.length === 1 && this.targetLayers[0] === "Background" || this.targetLayers.every(
         (id) => id === "Background" || this.state.layerStates[id]
       );
+      let layersAdded = false;
       const newLayers = [];
       const useBasemapStyleDetection = this.basemapLayerIds !== null && this.basemapLayerIds.size > 0;
       const useInitialLayerDetection = !useBasemapStyleDetection && this.initialLayerIds !== null && this.initialLayerIds.size > 0;
@@ -3424,7 +3433,10 @@ class LayerControl {
             opacity,
             name: this.generateFriendlyName(layerId)
           };
-          this.addLayerItem(layerId, this.state.layerStates[layerId]);
+          if (this.targetLayers.length > 0 && !this.targetLayers.includes(layerId)) {
+            this.targetLayers.push(layerId);
+          }
+          layersAdded = true;
         });
       }
       if (this.customLayerRegistry) {
@@ -3440,7 +3452,10 @@ class LayerControl {
                 isCustomLayer: true,
                 customLayerType: this.customLayerRegistry.getSymbolType(layerId) || void 0
               };
-              this.addLayerItem(layerId, this.state.layerStates[layerId]);
+              if (this.targetLayers.length > 0 && !this.targetLayers.includes(layerId)) {
+                this.targetLayers.push(layerId);
+              }
+              layersAdded = true;
             }
           }
         });
@@ -3461,6 +3476,9 @@ class LayerControl {
           }
         });
       }
+      if (layersAdded) {
+        this.buildLayerItems();
+      }
     } catch (error) {
       console.warn("Failed to check for new layers:", error);
     }