maplibre-gl-layer-control 0.15.1 → 0.17.0

package/README.md

@@ -14,7 +14,7 @@ A comprehensive layer control for MapLibre GL with advanced styling capabilities
 - ✅ **Layer visibility toggle** - Checkbox control for each layer
 - ✅ **Layer opacity control** - Smooth opacity slider with type-aware property mapping; **double-click the slider to type an exact percentage (0-100%)**
 - ✅ **Layer symbols** - Visual type indicators (colored shapes) next to layer names, auto-detected from layer paint properties
-- ✅ **Resizable panel** - **Drag either edge of the panel to resize it**, plus a width slider and keyboard support
+- ✅ **Resizable panel** - **Drag either edge of the panel to resize it**; double-click an edge to reset to the default width. The panel also grows to fill the available height so long layer lists only scroll once they exceed the map.
 - ✅ **Advanced style editor** - Per-layer-type styling controls:
   - **Fill layers**: color, opacity, outline-color
   - **Line layers**: color, width, opacity, blur
@@ -24,6 +24,7 @@ A comprehensive layer control for MapLibre GL with advanced styling capabilities
 - ✅ **Dynamic layer detection** - Automatically detect and manage new layers
 - ✅ **Background layer grouping** - Control all basemap layers as one group
 - ✅ **Background layer legend** - Gear icon to toggle individual background layer visibility
+- ✅ **Saved configurations** - Save the current basemap element visibility as a named preset and re-apply it with one click; presets persist across sessions and projects via `localStorage`
 - ✅ **Accessibility** - Full ARIA support and keyboard navigation
 - ✅ **TypeScript** - Full type safety and IntelliSense support
 - ✅ **React integration** - Optional React components and hooks
@@ -72,7 +73,7 @@ map.on('load', () => {
     layers: ['my-layer'], // LayerControl auto-detects opacity, visibility, and generates friendly names
     panelWidth: 340,
     panelMinWidth: 240,
-    panelMaxWidth: 450
+    panelMaxWidth: 960
   });
 
   // Option 2: Auto-detect with basemapStyleUrl (recommended for reliable basemap detection)
@@ -92,7 +93,7 @@ map.on('load', () => {
   //   collapsed: false,
   //   panelWidth: 340,
   //   panelMinWidth: 240,
-  //   panelMaxWidth: 450
+  //   panelMaxWidth: 960
   // });
 
   // Option 4: Manually specify layer states (for full control over names)
@@ -166,8 +167,8 @@ function MapComponent() {
 | `layerStates` | `Record<string, LayerState>` | `undefined` | Manual layer state configuration |
 | `panelWidth` | `number` | `320` | Initial panel width in pixels |
 | `panelMinWidth` | `number` | `240` | Minimum panel width |
-| `panelMaxWidth` | `number` | `420` | Maximum panel width |
-| `panelMaxHeight` | `number` | `600` | Maximum panel height (scrollable when exceeded) |
+| `panelMaxWidth` | `number` | `960` | Maximum panel width |
+| `panelMaxHeight` | `number` | `undefined` | Maximum panel height in pixels. Omit to fill the available vertical space (scrollable only when the layer list is taller than the map) |
 | `showStyleEditor` | `boolean` | `true` | Show gear icon for style editor |
 | `showOpacitySlider` | `boolean` | `true` | Show opacity slider for layers |
 | `showLayerSymbol` | `boolean` | `true` | Show layer type symbols (colored icons) next to layer names |
@@ -175,6 +176,9 @@ function MapComponent() {
 | `excludeLayers` | `string[]` | `undefined` | Array of wildcard patterns to exclude layers by name (e.g., `['*-temp-*', 'debug-*']`) |
 | `customLayerAdapters` | `CustomLayerAdapter[]` | `undefined` | Adapters for non-MapLibre layers (deck.gl, Zarr, etc.) |
 | `basemapStyleUrl` | `string` | `undefined` | URL of basemap style JSON for reliable layer detection (see below) |
+| `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 |
 
 ### LayerState
 
@@ -293,9 +297,31 @@ When using the `layers` option to specify specific layers, all other layers are
 - Quick "Show All" / "Hide All" buttons
 - **"Only rendered" filter** - Shows only layers that are currently rendered in the map viewport
 - Indeterminate checkbox state when some layers are hidden
+- **Saved configurations** - Save the current set of visibility toggles as a named preset and re-apply it later with one click
 
 This allows fine-grained control over which basemap layers are visible while maintaining a simplified layer control interface.
 
+#### Saved configurations (presets)
+
+The Background Layers panel includes a **Saved configurations** section that lets users save the current basemap element visibility as a named preset and re-apply it with a single click. Presets are stored in `localStorage`, so they persist across page reloads and apply to any project that uses the same basemap layers. Toggle the UI off with `enableBackgroundPresets: false`, or change the storage location with `backgroundPresetStorageKey`.
+
+The same functionality is available programmatically:
+
+```javascript
+// Capture the current basemap element visibility
+const visibility = layerControl.getBackgroundLayerVisibility();
+// → { 'water': true, 'road-primary': false, ... }
+
+// Apply a configuration (only layers present in the style are affected)
+layerControl.applyBackgroundLayerVisibility(visibility);
+
+// Named presets (persisted to localStorage)
+layerControl.saveBackgroundPreset('Minimal');   // save current visibility
+layerControl.getBackgroundPresets();            // → { Minimal: { ... } }
+layerControl.applyBackgroundPreset('Minimal');  // → true if it existed
+layerControl.deleteBackgroundPreset('Minimal');
+```
+
 ### Custom Layer Adapters
 
 The layer control supports non-MapLibre layers (such as deck.gl or Zarr layers) through the Custom Layer Adapter interface. This allows you to integrate any custom layer type with the layer control's visibility toggle, opacity slider, and layer list.

package/dist/index.cjs

@@ -691,6 +691,7 @@ class LayerControl {
     __publicField(this, "minPanelWidth");
     __publicField(this, "maxPanelWidth");
     __publicField(this, "initialPanelWidth");
+    /** Explicit max panel height; null means fill available vertical space */
     __publicField(this, "maxPanelHeight");
     __publicField(this, "showStyleEditor");
     __publicField(this, "showOpacitySlider");
@@ -703,13 +704,6 @@ class LayerControl {
     __publicField(this, "nativeLayerGroups", /* @__PURE__ */ new Map());
     __publicField(this, "basemapStyleUrl", null);
     __publicField(this, "basemapLayerIds", null);
-    __publicField(this, "widthSliderEl", null);
-    __publicField(this, "widthThumbEl", null);
-    __publicField(this, "widthValueEl", null);
-    __publicField(this, "isWidthSliderActive", false);
-    __publicField(this, "widthDragRectWidth", null);
-    __publicField(this, "widthDragStartX", null);
-    __publicField(this, "widthDragStartWidth", null);
     __publicField(this, "widthFrame", null);
     // Exact-opacity input popup
     __publicField(this, "opacityInputEl", null);
@@ -730,10 +724,14 @@ class LayerControl {
     __publicField(this, "onLayerRename");
     __publicField(this, "onLayerReorder");
     __publicField(this, "onLayerRemove");
+    // Background-layer visibility presets
+    __publicField(this, "enableBackgroundPresets");
+    __publicField(this, "backgroundPresetStorageKey");
+    __publicField(this, "onBackgroundPresetsChange");
     this.minPanelWidth = options.panelMinWidth || 240;
-    this.maxPanelWidth = options.panelMaxWidth || 420;
+    this.maxPanelWidth = options.panelMaxWidth || 960;
     this.initialPanelWidth = options.panelWidth || 350;
-    this.maxPanelHeight = options.panelMaxHeight || 600;
+    this.maxPanelHeight = options.panelMaxHeight ?? null;
     this.showStyleEditor = options.showStyleEditor !== false;
     this.showOpacitySlider = options.showOpacitySlider !== false;
     this.showLayerSymbol = options.showLayerSymbol !== false;
@@ -746,6 +744,9 @@ class LayerControl {
     this.onLayerRename = options.onLayerRename;
     this.onLayerReorder = options.onLayerReorder;
     this.onLayerRemove = options.onLayerRemove;
+    this.enableBackgroundPresets = options.enableBackgroundPresets !== false;
+    this.backgroundPresetStorageKey = options.backgroundPresetStorageKey || "maplibre-layer-control:background-presets";
+    this.onBackgroundPresetsChange = options.onBackgroundPresetsChange;
     this.initialLayerStates = options.layerStates || {};
     this.state = {
       collapsed: options.collapsed !== false,
@@ -811,7 +812,6 @@ class LayerControl {
       this.contextMenuEl = this.createContextMenu();
       this.mapContainer.appendChild(this.contextMenuEl);
     }
-    this.updateWidthDisplay();
     this.setupEventListeners();
     if (this.basemapStyleUrl && !this.basemapLayerIds) {
       this.fetchBasemapStyle().then(() => {
@@ -1211,7 +1211,9 @@ class LayerControl {
     const panel = document.createElement("div");
     panel.className = "layer-control-panel";
     panel.style.width = `${this.state.panelWidth}px`;
-    panel.style.maxHeight = `${this.maxPanelHeight}px`;
+    if (this.maxPanelHeight != null) {
+      panel.style.maxHeight = `${this.maxPanelHeight}px`;
+    }
     if (!this.state.collapsed) {
       panel.classList.add("expanded");
     }
@@ -1378,6 +1380,15 @@ class LayerControl {
         this.panel.style.right = `${buttonRight}px`;
         break;
     }
+    const edgeMargin = 8;
+    const isTopAnchored = position === "top-left" || position === "top-right";
+    const occupiedFromEdge = isTopAnchored ? buttonTop + buttonRect.height + panelGap : buttonBottom + buttonRect.height + panelGap;
+    const availableHeight = Math.max(
+      120,
+      Math.round(mapRect.height - occupiedFromEdge - edgeMargin)
+    );
+    const maxHeight = this.maxPanelHeight != null ? Math.min(this.maxPanelHeight, availableHeight) : availableHeight;
+    this.panel.style.maxHeight = `${maxHeight}px`;
   }
   /**
    * Create action buttons for Show All / Hide All
@@ -1426,7 +1437,8 @@ class LayerControl {
     });
   }
   /**
-   * Create the panel header with title and width control
+   * Create the panel header with the title. Panel width is adjusted by
+   * dragging either edge of the panel (see createResizeHandle).
    */
   createPanelHeader() {
     const header = document.createElement("div");
@@ -1435,135 +1447,8 @@ class LayerControl {
     title.className = "layer-control-panel-title";
     title.textContent = "Layers";
     header.appendChild(title);
-    const widthControl = this.createWidthControl();
-    header.appendChild(widthControl);
     return header;
   }
-  /**
-   * Create the width control slider
-   */
-  createWidthControl() {
-    const widthControl = document.createElement("label");
-    widthControl.className = "layer-control-width-control";
-    widthControl.title = "Adjust layer panel width";
-    const widthLabel = document.createElement("span");
-    widthLabel.textContent = "Width";
-    widthControl.appendChild(widthLabel);
-    const widthSlider = document.createElement("div");
-    widthSlider.className = "layer-control-width-slider";
-    widthSlider.setAttribute("role", "slider");
-    widthSlider.setAttribute("aria-valuemin", String(this.minPanelWidth));
-    widthSlider.setAttribute("aria-valuemax", String(this.maxPanelWidth));
-    widthSlider.setAttribute("aria-valuenow", String(this.state.panelWidth));
-    widthSlider.setAttribute("aria-valuestep", "10");
-    widthSlider.setAttribute("aria-label", "Layer panel width");
-    widthSlider.tabIndex = 0;
-    const widthTrack = document.createElement("div");
-    widthTrack.className = "layer-control-width-track";
-    const widthThumb = document.createElement("div");
-    widthThumb.className = "layer-control-width-thumb";
-    widthSlider.appendChild(widthTrack);
-    widthSlider.appendChild(widthThumb);
-    this.widthSliderEl = widthSlider;
-    this.widthThumbEl = widthThumb;
-    const widthValue = document.createElement("span");
-    widthValue.className = "layer-control-width-value";
-    this.widthValueEl = widthValue;
-    widthControl.appendChild(widthSlider);
-    widthControl.appendChild(widthValue);
-    this.updateWidthDisplay();
-    this.setupWidthSliderEvents(widthSlider);
-    return widthControl;
-  }
-  /**
-   * Setup event listeners for width slider
-   */
-  setupWidthSliderEvents(widthSlider) {
-    widthSlider.addEventListener("pointerdown", (event) => {
-      event.preventDefault();
-      const rect = widthSlider.getBoundingClientRect();
-      this.widthDragRectWidth = rect.width || 1;
-      this.widthDragStartX = event.clientX;
-      this.widthDragStartWidth = this.state.panelWidth;
-      this.isWidthSliderActive = true;
-      widthSlider.setPointerCapture(event.pointerId);
-      this.updateWidthFromPointer(event, true);
-    });
-    widthSlider.addEventListener("pointermove", (event) => {
-      if (!this.isWidthSliderActive) return;
-      this.updateWidthFromPointer(event);
-    });
-    const endPointerDrag = (event) => {
-      if (!this.isWidthSliderActive) return;
-      if (event.pointerId !== void 0) {
-        try {
-          widthSlider.releasePointerCapture(event.pointerId);
-        } catch (error) {
-        }
-      }
-      this.isWidthSliderActive = false;
-      this.widthDragRectWidth = null;
-      this.widthDragStartX = null;
-      this.widthDragStartWidth = null;
-      this.updateWidthDisplay();
-    };
-    widthSlider.addEventListener("pointerup", endPointerDrag);
-    widthSlider.addEventListener("pointercancel", endPointerDrag);
-    widthSlider.addEventListener("lostpointercapture", endPointerDrag);
-    widthSlider.addEventListener("keydown", (event) => {
-      let handled = true;
-      const step = event.shiftKey ? 20 : 10;
-      switch (event.key) {
-        case "ArrowLeft":
-        case "ArrowDown":
-          this.applyPanelWidth(this.state.panelWidth - step, true);
-          break;
-        case "ArrowRight":
-        case "ArrowUp":
-          this.applyPanelWidth(this.state.panelWidth + step, true);
-          break;
-        case "Home":
-          this.applyPanelWidth(this.minPanelWidth, true);
-          break;
-        case "End":
-          this.applyPanelWidth(this.maxPanelWidth, true);
-          break;
-        case "PageUp":
-          this.applyPanelWidth(this.state.panelWidth + 50, true);
-          break;
-        case "PageDown":
-          this.applyPanelWidth(this.state.panelWidth - 50, true);
-          break;
-        default:
-          handled = false;
-      }
-      if (handled) {
-        event.preventDefault();
-        this.updateWidthDisplay();
-      }
-    });
-  }
-  /**
-   * Update panel width from pointer event
-   */
-  updateWidthFromPointer(event, resetBaseline = false) {
-    if (!this.widthSliderEl) return;
-    const sliderWidth = this.widthDragRectWidth || this.widthSliderEl.getBoundingClientRect().width || 1;
-    const widthRange = this.maxPanelWidth - this.minPanelWidth;
-    let width;
-    if (resetBaseline) {
-      const rect = this.widthSliderEl.getBoundingClientRect();
-      const relative = rect.width > 0 ? (event.clientX - rect.left) / rect.width : 0;
-      const clampedRatio = Math.min(1, Math.max(0, relative));
-      width = this.minPanelWidth + clampedRatio * widthRange;
-      this.widthDragStartWidth = width;
-      this.widthDragStartX = event.clientX;
-    } else {
-      const delta = event.clientX - (this.widthDragStartX || event.clientX);
-      width = (this.widthDragStartWidth || this.state.panelWidth) + delta / sliderWidth * widthRange;
-    }
-    this.applyPanelWidth(width, this.isWidthSliderActive);
-  }
   /**
    * Apply panel width (clamped to min/max)
    */
@@ -1575,7 +1460,6 @@ class LayerControl {
       this.state.panelWidth = clamped;
       const px = `${clamped}px`;
       this.panel.style.width = px;
-      this.updateWidthDisplay();
     };
     if (immediate) {
       applyWidth();
@@ -1589,34 +1473,6 @@ class LayerControl {
       this.widthFrame = null;
     });
   }
-  /**
-   * Update width display (value label and thumb position)
-   */
-  updateWidthDisplay() {
-    if (this.widthValueEl) {
-      this.widthValueEl.textContent = `${this.state.panelWidth}px`;
-    }
-    if (this.widthSliderEl) {
-      this.widthSliderEl.setAttribute(
-        "aria-valuenow",
-        String(this.state.panelWidth)
-      );
-      const ratio = (this.state.panelWidth - this.minPanelWidth) / (this.maxPanelWidth - this.minPanelWidth || 1);
-      if (this.widthThumbEl) {
-        const sliderWidth = this.widthSliderEl.clientWidth;
-        if (sliderWidth === 0) {
-          requestAnimationFrame(() => this.updateWidthDisplay());
-          return;
-        }
-        const thumbWidth = this.widthThumbEl.offsetWidth || 14;
-        const padding = 16;
-        const available = Math.max(0, sliderWidth - padding - thumbWidth);
-        const clampedRatio = Math.min(1, Math.max(0, ratio));
-        const leftPx = 8 + available * clampedRatio;
-        this.widthThumbEl.style.left = `${leftPx}px`;
-      }
-    }
-  }
   /**
    * Setup main event listeners
    */
@@ -1715,7 +1571,21 @@ class LayerControl {
     const existingItems = this.panel.querySelectorAll(".layer-control-item");
     existingItems.forEach((item) => item.remove());
     this.styleEditors.clear();
-    Object.entries(this.state.layerStates).forEach(([layerId, state]) => {
+    const orderedLayerIds = this.getUserLayerIdsInMapOrder();
+    const captured = new Set(orderedLayerIds);
+    for (const layerId of Object.keys(this.state.layerStates)) {
+      if (layerId !== "Background" && !captured.has(layerId)) {
+        orderedLayerIds.push(layerId);
+      }
+    }
+    if (this.state.layerStates["Background"]) {
+      orderedLayerIds.push("Background");
+    }
+    orderedLayerIds.forEach((layerId) => {
+      const state = this.state.layerStates[layerId];
+      if (!state) {
+        return;
+      }
       if (this.targetLayers.length === 0 || this.targetLayers.includes(layerId)) {
         this.addLayerItem(layerId, state);
       }
@@ -2234,8 +2104,112 @@ class LayerControl {
     panel.appendChild(actionsRow);
     panel.appendChild(filterRow);
     panel.appendChild(layerList);
+    if (this.enableBackgroundPresets) {
+      panel.appendChild(this.createBackgroundPresetsRow());
+    }
     return panel;
   }
+  /**
+   * Build the "Saved configurations" controls: a dropdown of saved presets with
+   * Apply/Delete actions, plus a name field and Save button to capture the
+   * current basemap element visibility as a reusable, persisted preset.
+   */
+  createBackgroundPresetsRow() {
+    const section = document.createElement("div");
+    section.className = "background-legend-presets";
+    const label = document.createElement("div");
+    label.className = "background-legend-presets-label";
+    label.textContent = "Saved configurations";
+    section.appendChild(label);
+    const selectRow = document.createElement("div");
+    selectRow.className = "background-legend-presets-row";
+    const select = document.createElement("select");
+    select.className = "background-legend-presets-select";
+    select.title = "Saved configurations";
+    const applyBtn = document.createElement("button");
+    applyBtn.className = "background-legend-action-btn";
+    applyBtn.textContent = "Apply";
+    applyBtn.title = "Apply the selected configuration";
+    const deleteBtn = document.createElement("button");
+    deleteBtn.className = "background-legend-action-btn";
+    deleteBtn.textContent = "Delete";
+    deleteBtn.title = "Delete the selected configuration";
+    const refreshSelect = (selected) => {
+      const presets = this.getBackgroundPresets();
+      const names = Object.keys(presets).sort(
+        (a, b) => a.localeCompare(b, void 0, { sensitivity: "base" })
+      );
+      select.innerHTML = "";
+      const placeholder = document.createElement("option");
+      placeholder.value = "";
+      placeholder.textContent = names.length ? "Select a configuration…" : "No saved configurations";
+      placeholder.disabled = names.length > 0;
+      select.appendChild(placeholder);
+      names.forEach((name) => {
+        const option = document.createElement("option");
+        option.value = name;
+        option.textContent = name;
+        select.appendChild(option);
+      });
+      select.value = selected && names.includes(selected) ? selected : "";
+      const hasSelection = select.value !== "";
+      applyBtn.disabled = !hasSelection;
+      deleteBtn.disabled = !hasSelection;
+    };
+    select.addEventListener("change", () => {
+      const hasSelection = select.value !== "";
+      applyBtn.disabled = !hasSelection;
+      deleteBtn.disabled = !hasSelection;
+    });
+    applyBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      if (select.value) this.applyBackgroundPreset(select.value);
+    });
+    deleteBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      if (select.value) {
+        this.deleteBackgroundPreset(select.value);
+        refreshSelect();
+      }
+    });
+    selectRow.appendChild(select);
+    selectRow.appendChild(applyBtn);
+    selectRow.appendChild(deleteBtn);
+    const saveRow = document.createElement("div");
+    saveRow.className = "background-legend-presets-row";
+    const nameInput = document.createElement("input");
+    nameInput.type = "text";
+    nameInput.className = "background-legend-presets-input";
+    nameInput.placeholder = "Configuration name…";
+    nameInput.maxLength = 60;
+    const saveBtn = document.createElement("button");
+    saveBtn.className = "background-legend-action-btn";
+    saveBtn.textContent = "Save";
+    saveBtn.title = "Save the current visibility as a configuration";
+    const commitSave = () => {
+      const name = nameInput.value.trim();
+      if (!name) return;
+      this.saveBackgroundPreset(name);
+      nameInput.value = "";
+      refreshSelect(name);
+    };
+    saveBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      commitSave();
+    });
+    nameInput.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        commitSave();
+      }
+    });
+    saveRow.appendChild(nameInput);
+    saveRow.appendChild(saveBtn);
+    section.appendChild(selectRow);
+    section.appendChild(saveRow);
+    refreshSelect();
+    return section;
+  }
   /**
    * Check if a layer is currently rendered in the map viewport
    */
@@ -2383,6 +2357,148 @@ class LayerControl {
       this.state.layerStates["Background"].visible = anyVisible;
     }
   }
+  /**
+   * Return the IDs of the background (basemap) style layers the control can
+   * toggle, honoring the drawn-layer and user-defined exclusion filters but not
+   * the transient "only rendered" view filter.
+   */
+  getControllableBackgroundLayerIds() {
+    const styleLayers = this.map.getStyle().layers || [];
+    return styleLayers.filter((layer) => {
+      if (this.isUserAddedLayer(layer.id)) return false;
+      if (this.excludeDrawnLayers && this.isDrawnLayer(layer.id))
+        return false;
+      if (this.isExcludedByPattern(layer.id)) return false;
+      return true;
+    }).map((layer) => layer.id);
+  }
+  /**
+   * Get the current visibility of every controllable background (basemap) layer.
+   *
+   * @returns A map of style-layer ID to whether it is currently visible.
+   */
+  getBackgroundLayerVisibility() {
+    const visibility = {};
+    for (const layerId of this.getControllableBackgroundLayerIds()) {
+      const value = this.map.getLayoutProperty(layerId, "visibility");
+      visibility[layerId] = value !== "none";
+    }
+    return visibility;
+  }
+  /**
+   * Apply a saved background-layer visibility configuration to the map. Only
+   * layers that currently exist in the style are affected, so a configuration
+   * captured on one basemap degrades gracefully when applied to another.
+   *
+   * @param visibility - Map of style-layer ID to desired visibility.
+   */
+  applyBackgroundLayerVisibility(visibility) {
+    for (const [layerId, visible] of Object.entries(visibility)) {
+      if (this.isUserAddedLayer(layerId)) continue;
+      if (!this.map.getLayer(layerId)) continue;
+      this.state.backgroundLayerVisibility.set(layerId, visible);
+      this.map.setLayoutProperty(
+        layerId,
+        "visibility",
+        visible ? "visible" : "none"
+      );
+    }
+    const legendPanel = this.panel.querySelector(
+      ".background-legend-layer-list"
+    );
+    if (legendPanel) {
+      this.populateBackgroundLayerList(legendPanel);
+    }
+    this.updateBackgroundCheckboxState();
+  }
+  /**
+   * Read all saved background-layer presets from localStorage. Returns an empty
+   * object when storage is unavailable or the stored value is malformed.
+   */
+  getBackgroundPresets() {
+    try {
+      const raw = typeof localStorage !== "undefined" ? localStorage.getItem(this.backgroundPresetStorageKey) : null;
+      if (!raw) return {};
+      const parsed = JSON.parse(raw);
+      if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+        return {};
+      }
+      const presets = {};
+      for (const [name, value] of Object.entries(parsed)) {
+        if (this.isUnsafePresetKey(name)) continue;
+        if (value && typeof value === "object" && !Array.isArray(value)) {
+          presets[name] = value;
+        }
+      }
+      return presets;
+    } catch {
+      return {};
+    }
+  }
+  /**
+   * Reject preset names that, used as object keys, could pollute the prototype
+   * chain or otherwise alias built-in object members.
+   */
+  isUnsafePresetKey(name) {
+    return name === "__proto__" || name === "constructor" || name === "prototype";
+  }
+  /**
+   * Persist the full preset map to localStorage and notify listeners.
+   */
+  writeBackgroundPresets(presets) {
+    var _a;
+    try {
+      if (typeof localStorage !== "undefined") {
+        localStorage.setItem(
+          this.backgroundPresetStorageKey,
+          JSON.stringify(presets)
+        );
+      }
+    } catch {
+    }
+    (_a = this.onBackgroundPresetsChange) == null ? void 0 : _a.call(this, presets);
+  }
+  /**
+   * Save the current background-layer visibility as a named preset. Reusing an
+   * existing name overwrites that preset.
+   *
+   * @param name - Preset name; whitespace is trimmed. Empty names are ignored.
+   * @returns The updated preset map.
+   */
+  saveBackgroundPreset(name) {
+    const trimmed = name.trim();
+    const presets = this.getBackgroundPresets();
+    if (!trimmed || this.isUnsafePresetKey(trimmed)) return presets;
+    presets[trimmed] = this.getBackgroundLayerVisibility();
+    this.writeBackgroundPresets(presets);
+    return presets;
+  }
+  /**
+   * Apply a previously saved preset to the map.
+   *
+   * @param name - The preset name to apply.
+   * @returns `true` if a preset with that name existed and was applied.
+   */
+  applyBackgroundPreset(name) {
+    const presets = this.getBackgroundPresets();
+    if (!Object.prototype.hasOwnProperty.call(presets, name)) return false;
+    this.applyBackgroundLayerVisibility(presets[name]);
+    return true;
+  }
+  /**
+   * Delete a saved preset.
+   *
+   * @param name - The preset name to remove.
+   * @returns The updated preset map.
+   */
+  deleteBackgroundPreset(name) {
+    const presets = this.getBackgroundPresets();
+    if (Object.prototype.hasOwnProperty.call(presets, name)) {
+      delete presets[name];
+      this.writeBackgroundPresets(presets);
+    }
+    return presets;
+  }
   /**
    * Create style button for a layer
    */
@@ -4068,18 +4184,17 @@ class LayerControl {
         uiLayerIds.push(layerId);
       }
     });
-    const reversedIds = [...uiLayerIds].reverse();
     const style = this.map.getStyle();
     const mapLibreLayerIds = new Set(((_a = style == null ? void 0 : style.layers) == null ? void 0 : _a.map((l) => l.id)) || []);
-    for (let i = 0; i < reversedIds.length; i++) {
-      const layerId = reversedIds[i];
+    for (let i = 0; i < uiLayerIds.length; i++) {
+      const layerId = uiLayerIds[i];
       if (!mapLibreLayerIds.has(layerId)) {
         continue;
       }
       let beforeId = void 0;
       for (let j = i - 1; j >= 0; j--) {
-        if (mapLibreLayerIds.has(reversedIds[j])) {
-          beforeId = reversedIds[j];
+        if (mapLibreLayerIds.has(uiLayerIds[j])) {
+          beforeId = uiLayerIds[j];
           break;
         }
       }