maplibre-gl-layer-control 0.14.1 → 0.15.0

package/dist/index.cjs

@@ -690,6 +690,7 @@ class LayerControl {
     // Panel width management
     __publicField(this, "minPanelWidth");
     __publicField(this, "maxPanelWidth");
+    __publicField(this, "initialPanelWidth");
     __publicField(this, "maxPanelHeight");
     __publicField(this, "showStyleEditor");
     __publicField(this, "showOpacitySlider");
@@ -710,6 +711,18 @@ class LayerControl {
     __publicField(this, "widthDragStartX", null);
     __publicField(this, "widthDragStartWidth", null);
     __publicField(this, "widthFrame", null);
+    // Exact-opacity input popup
+    __publicField(this, "opacityInputEl", null);
+    // Panel edge-drag resizing (handles on both the left and right edges)
+    __publicField(this, "resizeHandleEls", []);
+    /** Which edge is anchored to the control corner (the other edge is "free") */
+    __publicField(this, "panelAnchorSide", "right");
+    __publicField(this, "isPanelResizing", false);
+    /** The physical edge being dragged in the current resize gesture */
+    __publicField(this, "panelResizeEdge", "left");
+    __publicField(this, "panelResizeStartX", null);
+    __publicField(this, "panelResizeStartWidth", null);
+    __publicField(this, "panelResizeStartOffset", 0);
     // Context menu and drag-drop
     __publicField(this, "contextMenuEl", null);
     __publicField(this, "enableContextMenu");
@@ -719,12 +732,15 @@ class LayerControl {
     __publicField(this, "onLayerRemove");
     this.minPanelWidth = options.panelMinWidth || 240;
     this.maxPanelWidth = options.panelMaxWidth || 420;
+    this.initialPanelWidth = options.panelWidth || 350;
     this.maxPanelHeight = options.panelMaxHeight || 600;
     this.showStyleEditor = options.showStyleEditor !== false;
     this.showOpacitySlider = options.showOpacitySlider !== false;
     this.showLayerSymbol = options.showLayerSymbol !== false;
     this.excludeDrawnLayers = options.excludeDrawnLayers !== false;
-    this.excludeLayerPatterns = this.wildcardPatternsToRegex(options.excludeLayers || []);
+    this.excludeLayerPatterns = this.wildcardPatternsToRegex(
+      options.excludeLayers || []
+    );
     this.enableContextMenu = options.enableContextMenu !== false;
     this.enableDragAndDrop = options.enableDragAndDrop !== false;
     this.onLayerRename = options.onLayerRename;
@@ -804,7 +820,10 @@ class LayerControl {
         }
         this.buildLayerItems();
       }).catch((error) => {
-        console.warn("Failed to fetch basemap style, falling back to heuristic detection:", error);
+        console.warn(
+          "Failed to fetch basemap style, falling back to heuristic detection:",
+          error
+        );
         if (Object.keys(this.state.layerStates).length === 0) {
           this.autoDetectLayers();
         }
@@ -843,7 +862,11 @@ class LayerControl {
         this.basemapLayerIds = /* @__PURE__ */ new Set();
       }
     } catch (error) {
-      console.warn("Failed to fetch basemap style from URL:", this.basemapStyleUrl, error);
+      console.warn(
+        "Failed to fetch basemap style from URL:",
+        this.basemapStyleUrl,
+        error
+      );
       throw error;
     }
   }
@@ -872,6 +895,7 @@ class LayerControl {
       (_a = this.contextMenuEl.parentNode) == null ? void 0 : _a.removeChild(this.contextMenuEl);
       this.contextMenuEl = null;
     }
+    this.hideOpacityInput();
     this.cleanupDragState();
     (_b = this.panel.parentNode) == null ? void 0 : _b.removeChild(this.panel);
     (_c = this.container.parentNode) == null ? void 0 : _c.removeChild(this.container);
@@ -1030,7 +1054,9 @@ class LayerControl {
     }
     if (style.glyphs) {
       try {
-        const url = new URL(style.glyphs.replace("{fontstack}", "x").replace("{range}", "x"));
+        const url = new URL(
+          style.glyphs.replace("{fontstack}", "x").replace("{range}", "x")
+        );
         basemapDomains.add(url.hostname);
       } catch {
       }
@@ -1102,8 +1128,12 @@ class LayerControl {
       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 }
+      ...userState.isCustomLayer !== void 0 && {
+        isCustomLayer: userState.isCustomLayer
+      },
+      ...userState.customLayerType !== void 0 && {
+        customLayerType: userState.customLayerType
+      }
     };
   }
   /**
@@ -1189,8 +1219,111 @@ class LayerControl {
     panel.appendChild(header);
     const actionButtons = this.createActionButtons();
     panel.appendChild(actionButtons);
+    panel.appendChild(this.createResizeHandle("left"));
+    panel.appendChild(this.createResizeHandle("right"));
     return panel;
   }
+  /**
+   * Create a draggable edge handle for resizing the panel width. A handle is
+   * added on each side so the panel can be resized by dragging either edge,
+   * like a conventional resizable window.
+   *
+   * @param side Which physical edge of the panel the handle sits on
+   */
+  createResizeHandle(side) {
+    const handle = document.createElement("div");
+    handle.className = `layer-control-resize-handle layer-control-resize-handle-${side}`;
+    handle.title = "Drag to resize panel";
+    handle.setAttribute("role", "separator");
+    handle.setAttribute("aria-orientation", "vertical");
+    this.resizeHandleEls.push(handle);
+    this.setupResizeHandleEvents(handle, side);
+    return handle;
+  }
+  /**
+   * Wire pointer events for an edge resize handle.
+   *
+   * @param handle The handle element
+   * @param side Which physical edge of the panel the handle sits on
+   */
+  setupResizeHandleEvents(handle, side) {
+    handle.addEventListener("pointerdown", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      this.isPanelResizing = true;
+      this.panelResizeEdge = side;
+      this.panelResizeStartX = event.clientX;
+      this.panelResizeStartWidth = this.state.panelWidth;
+      this.panelResizeStartOffset = parseFloat(this.panel.style[this.panelAnchorSide]) || 0;
+      handle.setPointerCapture(event.pointerId);
+      this.panel.classList.add("resizing-active");
+    });
+    handle.addEventListener("pointermove", (event) => {
+      if (!this.isPanelResizing) return;
+      this.resizePanelFromPointer(event.clientX);
+    });
+    const endResize = (event) => {
+      if (!this.isPanelResizing) return;
+      if (event.pointerId !== void 0) {
+        try {
+          handle.releasePointerCapture(event.pointerId);
+        } catch {
+        }
+      }
+      this.isPanelResizing = false;
+      this.panelResizeStartX = null;
+      this.panelResizeStartWidth = null;
+      this.panel.classList.remove("resizing-active");
+    };
+    handle.addEventListener("pointerup", endResize);
+    handle.addEventListener("pointercancel", endResize);
+    handle.addEventListener("lostpointercapture", endResize);
+    handle.addEventListener("dblclick", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      this.applyPanelWidth(this.initialPanelWidth, true);
+    });
+  }
+  /**
+   * Compute and apply a new panel width from the pointer position during an
+   * edge drag. Dragging the free edge changes the width while the anchored
+   * edge stays put; dragging the anchored edge shifts the anchor so the free
+   * edge stays put — both feel like resizing a normal window.
+   */
+  resizePanelFromPointer(clientX) {
+    const dx = clientX - (this.panelResizeStartX ?? clientX);
+    const startWidth = this.panelResizeStartWidth ?? this.state.panelWidth;
+    const desiredWidth = this.panelResizeEdge === "left" ? startWidth - dx : startWidth + dx;
+    const clamped = Math.round(
+      Math.min(this.maxPanelWidth, Math.max(this.minPanelWidth, desiredWidth))
+    );
+    if (this.panelResizeEdge === this.panelAnchorSide) {
+      let appliedDelta = clamped - startWidth;
+      let newOffset = this.panelResizeStartOffset - appliedDelta;
+      if (newOffset < 0) {
+        newOffset = 0;
+        appliedDelta = this.panelResizeStartOffset;
+      }
+      const finalWidth = Math.round(
+        Math.min(
+          this.maxPanelWidth,
+          Math.max(this.minPanelWidth, startWidth + appliedDelta)
+        )
+      );
+      this.applyPanelWidth(finalWidth, true);
+      this.panel.style[this.panelAnchorSide] = `${newOffset}px`;
+    } else {
+      this.applyPanelWidth(clamped, true);
+    }
+  }
+  /**
+   * Record which panel edge is anchored to the control corner, based on the
+   * corner the control occupies. Right corners anchor the right edge (panel
+   * grows leftward); left corners anchor the left edge (panel grows rightward).
+   */
+  updatePanelAnchorSide(position) {
+    this.panelAnchorSide = position === "top-right" || position === "bottom-right" ? "right" : "left";
+  }
   /**
    * Detect which corner the control is positioned in
    * @returns The position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
@@ -1198,10 +1331,14 @@ class LayerControl {
   getControlPosition() {
     const parent = this.container.parentElement;
     if (!parent) return "top-right";
-    if (parent.classList.contains("maplibregl-ctrl-top-left")) return "top-left";
-    if (parent.classList.contains("maplibregl-ctrl-top-right")) return "top-right";
-    if (parent.classList.contains("maplibregl-ctrl-bottom-left")) return "bottom-left";
-    if (parent.classList.contains("maplibregl-ctrl-bottom-right")) return "bottom-right";
+    if (parent.classList.contains("maplibregl-ctrl-top-left"))
+      return "top-left";
+    if (parent.classList.contains("maplibregl-ctrl-top-right"))
+      return "top-right";
+    if (parent.classList.contains("maplibregl-ctrl-bottom-left"))
+      return "bottom-left";
+    if (parent.classList.contains("maplibregl-ctrl-bottom-right"))
+      return "bottom-right";
     return "top-right";
   }
   /**
@@ -1213,6 +1350,7 @@ class LayerControl {
     const buttonRect = this.button.getBoundingClientRect();
     const mapRect = this.mapContainer.getBoundingClientRect();
     const position = this.getControlPosition();
+    this.updatePanelAnchorSide(position);
     const buttonTop = buttonRect.top - mapRect.top;
     const buttonBottom = mapRect.bottom - buttonRect.bottom;
     const buttonLeft = buttonRect.left - mapRect.left;
@@ -1252,13 +1390,19 @@ class LayerControl {
     showAllBtn.className = "layer-control-action-btn";
     showAllBtn.textContent = "Show All";
     showAllBtn.title = "Show all layers";
-    showAllBtn.addEventListener("click", () => this.setAllLayersVisibility(true));
+    showAllBtn.addEventListener(
+      "click",
+      () => this.setAllLayersVisibility(true)
+    );
     const hideAllBtn = document.createElement("button");
     hideAllBtn.type = "button";
     hideAllBtn.className = "layer-control-action-btn";
     hideAllBtn.textContent = "Hide All";
     hideAllBtn.title = "Hide all layers";
-    hideAllBtn.addEventListener("click", () => this.setAllLayersVisibility(false));
+    hideAllBtn.addEventListener(
+      "click",
+      () => this.setAllLayersVisibility(false)
+    );
     container.appendChild(showAllBtn);
     container.appendChild(hideAllBtn);
     return container;
@@ -1271,7 +1415,9 @@ class LayerControl {
       this.toggleLayerVisibility(layerId, visible);
       const itemEl = this.panel.querySelector(`[data-layer-id="${layerId}"]`);
       if (itemEl) {
-        const checkbox = itemEl.querySelector(".layer-control-checkbox");
+        const checkbox = itemEl.querySelector(
+          ".layer-control-checkbox"
+        );
         if (checkbox) {
           checkbox.checked = visible;
           checkbox.indeterminate = false;
@@ -1422,7 +1568,9 @@ class LayerControl {
    * Apply panel width (clamped to min/max)
    */
   applyPanelWidth(width, immediate = false) {
-    const clamped = Math.round(Math.min(this.maxPanelWidth, Math.max(this.minPanelWidth, width)));
+    const clamped = Math.round(
+      Math.min(this.maxPanelWidth, Math.max(this.minPanelWidth, width))
+    );
     const applyWidth = () => {
       this.state.panelWidth = clamped;
       const px = `${clamped}px`;
@@ -1449,7 +1597,10 @@ class LayerControl {
       this.widthValueEl.textContent = `${this.state.panelWidth}px`;
     }
     if (this.widthSliderEl) {
-      this.widthSliderEl.setAttribute("aria-valuenow", String(this.state.panelWidth));
+      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;
@@ -1522,12 +1673,14 @@ class LayerControl {
       }
     });
     if (this.customLayerRegistry) {
-      this.customLayerUnsubscribe = this.customLayerRegistry.onChange((event, layerId) => {
-        if (event === "add" && layerId) {
-          this.removedCustomLayerIds.delete(layerId);
+      this.customLayerUnsubscribe = this.customLayerRegistry.onChange(
+        (event, layerId) => {
+          if (event === "add" && layerId) {
+            this.removedCustomLayerIds.delete(layerId);
+          }
+          setTimeout(() => this.checkForNewLayers(), 100);
         }
-        setTimeout(() => this.checkForNewLayers(), 100);
-      });
+      );
     }
   }
   /**
@@ -1630,6 +1783,10 @@ class LayerControl {
         this.changeLayerOpacity(layerId, parseFloat(opacity.value));
         opacity.title = `Opacity: ${Math.round(parseFloat(opacity.value) * 100)}%`;
       });
+      opacity.addEventListener("dblclick", (event) => {
+        event.preventDefault();
+        this.showOpacityInput(layerId, opacity);
+      });
       row.appendChild(opacity);
     }
     if (this.showStyleEditor) {
@@ -1727,11 +1884,103 @@ class LayerControl {
       }, 200);
       return;
     }
-    this.map.setLayoutProperty(layerId, "visibility", visible ? "visible" : "none");
+    this.map.setLayoutProperty(
+      layerId,
+      "visibility",
+      visible ? "visible" : "none"
+    );
     setTimeout(() => {
       this.state.isStyleOperationInProgress = false;
     }, 200);
   }
+  /**
+   * Show a small popup that lets the user type an exact opacity percentage
+   * (0-100) for a layer. Triggered by double-clicking the opacity slider.
+   *
+   * @param layerId The layer ID whose opacity is being edited
+   * @param slider The opacity range input associated with the layer row
+   */
+  showOpacityInput(layerId, slider) {
+    this.hideOpacityInput();
+    const popup = document.createElement("div");
+    popup.className = "layer-control-opacity-input";
+    const label = document.createElement("span");
+    label.className = "layer-control-opacity-input-label";
+    label.textContent = "Opacity";
+    const field = document.createElement("div");
+    field.className = "layer-control-opacity-input-field";
+    const input = document.createElement("input");
+    input.type = "number";
+    input.min = "0";
+    input.max = "100";
+    input.step = "1";
+    input.value = String(Math.round(parseFloat(slider.value) * 100));
+    const suffix = document.createElement("span");
+    suffix.className = "layer-control-opacity-input-suffix";
+    suffix.textContent = "%";
+    field.appendChild(input);
+    field.appendChild(suffix);
+    popup.appendChild(label);
+    popup.appendChild(field);
+    popup.addEventListener("click", (event) => event.stopPropagation());
+    popup.addEventListener("pointerdown", (event) => event.stopPropagation());
+    let settled = false;
+    const apply = () => {
+      if (settled) return;
+      settled = true;
+      const pct = clamp(Math.round(parseFloat(input.value)), 0, 100);
+      if (!Number.isNaN(pct)) {
+        const opacity = pct / 100;
+        slider.value = String(opacity);
+        slider.title = `Opacity: ${pct}%`;
+        this.changeLayerOpacity(layerId, opacity);
+      }
+      this.hideOpacityInput();
+    };
+    const cancel = () => {
+      if (settled) return;
+      settled = true;
+      this.hideOpacityInput();
+    };
+    input.addEventListener("keydown", (event) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        apply();
+        slider.focus();
+      } else if (event.key === "Escape") {
+        event.preventDefault();
+        cancel();
+        slider.focus();
+      }
+    });
+    input.addEventListener("blur", apply);
+    this.mapContainer.appendChild(popup);
+    this.opacityInputEl = popup;
+    const sliderRect = slider.getBoundingClientRect();
+    const mapRect = this.mapContainer.getBoundingClientRect();
+    const popupRect = popup.getBoundingClientRect();
+    let left = sliderRect.left - mapRect.left;
+    let top = sliderRect.bottom - mapRect.top + 4;
+    if (left + popupRect.width > mapRect.width) {
+      left = Math.max(0, mapRect.width - popupRect.width - 5);
+    }
+    if (top + popupRect.height > mapRect.height) {
+      top = sliderRect.top - mapRect.top - popupRect.height - 4;
+    }
+    popup.style.left = `${Math.max(0, left)}px`;
+    popup.style.top = `${Math.max(0, top)}px`;
+    input.focus();
+    input.select();
+  }
+  /**
+   * Remove the exact-opacity input popup if it is open.
+   */
+  hideOpacityInput() {
+    if (this.opacityInputEl) {
+      this.opacityInputEl.remove();
+      this.opacityInputEl = null;
+    }
+  }
   /**
    * Change layer opacity
    */
@@ -1794,13 +2043,21 @@ class LayerControl {
     styleLayers.forEach((layer) => {
       if (!this.isUserAddedLayer(layer.id)) {
         this.state.backgroundLayerVisibility.set(layer.id, visible);
-        this.map.setLayoutProperty(layer.id, "visibility", visible ? "visible" : "none");
+        this.map.setLayoutProperty(
+          layer.id,
+          "visibility",
+          visible ? "visible" : "none"
+        );
       }
     });
     if (this.state.backgroundLegendOpen) {
-      const legendPanel = this.panel.querySelector(".layer-control-background-legend");
+      const legendPanel = this.panel.querySelector(
+        ".layer-control-background-legend"
+      );
       if (legendPanel) {
-        const checkboxes = legendPanel.querySelectorAll(".background-legend-checkbox");
+        const checkboxes = legendPanel.querySelectorAll(
+          ".background-legend-checkbox"
+        );
         checkboxes.forEach((checkbox) => {
           checkbox.checked = visible;
         });
@@ -1833,8 +2090,14 @@ class LayerControl {
     button.className = "layer-control-style-button layer-control-background-legend-button";
     button.innerHTML = "&#9881;";
     button.title = "Show background layer details";
-    button.setAttribute("aria-label", "Show background layer visibility controls");
-    button.setAttribute("aria-expanded", String(this.state.backgroundLegendOpen));
+    button.setAttribute(
+      "aria-label",
+      "Show background layer visibility controls"
+    );
+    button.setAttribute(
+      "aria-expanded",
+      String(this.state.backgroundLegendOpen)
+    );
     button.addEventListener("click", (e) => {
       e.stopPropagation();
       this.toggleBackgroundLegend();
@@ -1862,7 +2125,9 @@ class LayerControl {
     if (!itemEl) return;
     let legendPanel = itemEl.querySelector(".layer-control-background-legend");
     if (legendPanel) {
-      const layerList = legendPanel.querySelector(".background-legend-layer-list");
+      const layerList = legendPanel.querySelector(
+        ".background-legend-layer-list"
+      );
       if (layerList) {
         this.populateBackgroundLayerList(layerList);
       }
@@ -1871,7 +2136,9 @@ class LayerControl {
       itemEl.appendChild(legendPanel);
     }
     this.state.backgroundLegendOpen = true;
-    const button = itemEl.querySelector(".layer-control-background-legend-button");
+    const button = itemEl.querySelector(
+      ".layer-control-background-legend-button"
+    );
     if (button) {
       button.setAttribute("aria-expanded", "true");
       button.classList.add("active");
@@ -1886,12 +2153,16 @@ class LayerControl {
   closeBackgroundLegend() {
     const itemEl = this.panel.querySelector('[data-layer-id="Background"]');
     if (!itemEl) return;
-    const legendPanel = itemEl.querySelector(".layer-control-background-legend");
+    const legendPanel = itemEl.querySelector(
+      ".layer-control-background-legend"
+    );
     if (legendPanel) {
       legendPanel.remove();
     }
     this.state.backgroundLegendOpen = false;
-    const button = itemEl.querySelector(".layer-control-background-legend-button");
+    const button = itemEl.querySelector(
+      ".layer-control-background-legend-button"
+    );
     if (button) {
       button.setAttribute("aria-expanded", "false");
       button.classList.remove("active");
@@ -1923,11 +2194,17 @@ class LayerControl {
     const showAllBtn = document.createElement("button");
     showAllBtn.className = "background-legend-action-btn";
     showAllBtn.textContent = "Show All";
-    showAllBtn.addEventListener("click", () => this.setAllBackgroundLayersVisibility(true));
+    showAllBtn.addEventListener(
+      "click",
+      () => this.setAllBackgroundLayersVisibility(true)
+    );
     const hideAllBtn = document.createElement("button");
     hideAllBtn.className = "background-legend-action-btn";
     hideAllBtn.textContent = "Hide All";
-    hideAllBtn.addEventListener("click", () => this.setAllBackgroundLayersVisibility(false));
+    hideAllBtn.addEventListener(
+      "click",
+      () => this.setAllBackgroundLayersVisibility(false)
+    );
     actionsRow.appendChild(showAllBtn);
     actionsRow.appendChild(hideAllBtn);
     const filterRow = document.createElement("div");
@@ -2041,7 +2318,11 @@ class LayerControl {
    */
   toggleIndividualBackgroundLayer(layerId, visible) {
     this.state.backgroundLayerVisibility.set(layerId, visible);
-    this.map.setLayoutProperty(layerId, "visibility", visible ? "visible" : "none");
+    this.map.setLayoutProperty(
+      layerId,
+      "visibility",
+      visible ? "visible" : "none"
+    );
     this.updateBackgroundCheckboxState();
   }
   /**
@@ -2052,12 +2333,20 @@ class LayerControl {
     styleLayers.forEach((layer) => {
       if (!this.isUserAddedLayer(layer.id)) {
         this.state.backgroundLayerVisibility.set(layer.id, visible);
-        this.map.setLayoutProperty(layer.id, "visibility", visible ? "visible" : "none");
+        this.map.setLayoutProperty(
+          layer.id,
+          "visibility",
+          visible ? "visible" : "none"
+        );
       }
     });
-    const legendPanel = this.panel.querySelector(".layer-control-background-legend");
+    const legendPanel = this.panel.querySelector(
+      ".layer-control-background-legend"
+    );
     if (legendPanel) {
-      const checkboxes = legendPanel.querySelectorAll(".background-legend-checkbox");
+      const checkboxes = legendPanel.querySelectorAll(
+        ".background-legend-checkbox"
+      );
       checkboxes.forEach((checkbox) => {
         checkbox.checked = visible;
       });
@@ -2078,9 +2367,13 @@ class LayerControl {
         if (visible === false) allVisible = false;
       }
     });
-    const backgroundItem = this.panel.querySelector('[data-layer-id="Background"]');
+    const backgroundItem = this.panel.querySelector(
+      '[data-layer-id="Background"]'
+    );
     if (backgroundItem) {
-      const checkbox = backgroundItem.querySelector(".layer-control-checkbox");
+      const checkbox = backgroundItem.querySelector(
+        ".layer-control-checkbox"
+      );
       if (checkbox) {
         checkbox.checked = anyVisible;
         checkbox.indeterminate = anyVisible && !allVisible;
@@ -2143,11 +2436,18 @@ class LayerControl {
           if (!this.state.originalStyles.has(nativeId)) {
             const nativeLayer = this.map.getLayer(nativeId);
             if (nativeLayer) {
-              cacheOriginalLayerStyle(this.map, nativeId, this.state.originalStyles);
+              cacheOriginalLayerStyle(
+                this.map,
+                nativeId,
+                this.state.originalStyles
+              );
             }
           }
         }
-        const editor3 = this.createNativeSubLayerStyleEditor(layerId, nativeLayerIds);
+        const editor3 = this.createNativeSubLayerStyleEditor(
+          layerId,
+          nativeLayerIds
+        );
         if (editor3) {
           itemEl.appendChild(editor3);
           this.styleEditors.set(layerId, editor3);
@@ -2450,14 +2750,38 @@ class LayerControl {
     if (!fillColor) {
       fillColor = this.map.getPaintProperty(layerId, "fill-color");
     }
-    this.createColorControl(container, layerId, "fill-color", "Fill Color", normalizeColor(fillColor || "#088"));
+    this.createColorControl(
+      container,
+      layerId,
+      "fill-color",
+      "Fill Color",
+      normalizeColor(fillColor || "#088")
+    );
     const fillOpacity = this.map.getPaintProperty(layerId, "fill-opacity");
     if (fillOpacity !== void 0 && typeof fillOpacity === "number") {
-      this.createSliderControl(container, layerId, "fill-opacity", "Fill Opacity", fillOpacity, 0, 1, 0.05);
-    }
-    const outlineColor = this.map.getPaintProperty(layerId, "fill-outline-color");
+      this.createSliderControl(
+        container,
+        layerId,
+        "fill-opacity",
+        "Fill Opacity",
+        fillOpacity,
+        0,
+        1,
+        0.05
+      );
+    }
+    const outlineColor = this.map.getPaintProperty(
+      layerId,
+      "fill-outline-color"
+    );
     if (outlineColor !== void 0) {
-      this.createColorControl(container, layerId, "fill-outline-color", "Outline Color", normalizeColor(outlineColor));
+      this.createColorControl(
+        container,
+        layerId,
+        "fill-outline-color",
+        "Outline Color",
+        normalizeColor(outlineColor)
+      );
     }
   }
   /**
@@ -2474,16 +2798,49 @@ class LayerControl {
     if (!lineColor) {
       lineColor = this.map.getPaintProperty(layerId, "line-color");
     }
-    this.createColorControl(container, layerId, "line-color", "Line Color", normalizeColor(lineColor || "#000"));
+    this.createColorControl(
+      container,
+      layerId,
+      "line-color",
+      "Line Color",
+      normalizeColor(lineColor || "#000")
+    );
     const lineWidth = this.map.getPaintProperty(layerId, "line-width");
-    this.createSliderControl(container, layerId, "line-width", "Line Width", typeof lineWidth === "number" ? lineWidth : 1, 0, 20, 0.5);
+    this.createSliderControl(
+      container,
+      layerId,
+      "line-width",
+      "Line Width",
+      typeof lineWidth === "number" ? lineWidth : 1,
+      0,
+      20,
+      0.5
+    );
     const lineOpacity = this.map.getPaintProperty(layerId, "line-opacity");
     if (lineOpacity !== void 0 && typeof lineOpacity === "number") {
-      this.createSliderControl(container, layerId, "line-opacity", "Line Opacity", lineOpacity, 0, 1, 0.05);
+      this.createSliderControl(
+        container,
+        layerId,
+        "line-opacity",
+        "Line Opacity",
+        lineOpacity,
+        0,
+        1,
+        0.05
+      );
     }
     const lineBlur = this.map.getPaintProperty(layerId, "line-blur");
     if (lineBlur !== void 0 && typeof lineBlur === "number") {
-      this.createSliderControl(container, layerId, "line-blur", "Line Blur", lineBlur, 0, 5, 0.1);
+      this.createSliderControl(
+        container,
+        layerId,
+        "line-blur",
+        "Line Blur",
+        lineBlur,
+        0,
+        5,
+        0.1
+      );
     }
   }
   /**
@@ -2500,20 +2857,65 @@ class LayerControl {
     if (!circleColor) {
       circleColor = this.map.getPaintProperty(layerId, "circle-color");
     }
-    this.createColorControl(container, layerId, "circle-color", "Circle Color", normalizeColor(circleColor || "#000"));
+    this.createColorControl(
+      container,
+      layerId,
+      "circle-color",
+      "Circle Color",
+      normalizeColor(circleColor || "#000")
+    );
     const circleRadius = this.map.getPaintProperty(layerId, "circle-radius");
-    this.createSliderControl(container, layerId, "circle-radius", "Radius", typeof circleRadius === "number" ? circleRadius : 5, 0, 40, 0.5);
+    this.createSliderControl(
+      container,
+      layerId,
+      "circle-radius",
+      "Radius",
+      typeof circleRadius === "number" ? circleRadius : 5,
+      0,
+      40,
+      0.5
+    );
     const circleOpacity = this.map.getPaintProperty(layerId, "circle-opacity");
     if (circleOpacity !== void 0 && typeof circleOpacity === "number") {
-      this.createSliderControl(container, layerId, "circle-opacity", "Opacity", circleOpacity, 0, 1, 0.05);
-    }
-    const strokeColor = this.map.getPaintProperty(layerId, "circle-stroke-color");
+      this.createSliderControl(
+        container,
+        layerId,
+        "circle-opacity",
+        "Opacity",
+        circleOpacity,
+        0,
+        1,
+        0.05
+      );
+    }
+    const strokeColor = this.map.getPaintProperty(
+      layerId,
+      "circle-stroke-color"
+    );
     if (strokeColor !== void 0) {
-      this.createColorControl(container, layerId, "circle-stroke-color", "Stroke Color", normalizeColor(strokeColor));
-    }
-    const strokeWidth = this.map.getPaintProperty(layerId, "circle-stroke-width");
+      this.createColorControl(
+        container,
+        layerId,
+        "circle-stroke-color",
+        "Stroke Color",
+        normalizeColor(strokeColor)
+      );
+    }
+    const strokeWidth = this.map.getPaintProperty(
+      layerId,
+      "circle-stroke-width"
+    );
     if (strokeWidth !== void 0 && typeof strokeWidth === "number") {
-      this.createSliderControl(container, layerId, "circle-stroke-width", "Stroke Width", strokeWidth, 0, 10, 0.1);
+      this.createSliderControl(
+        container,
+        layerId,
+        "circle-stroke-width",
+        "Stroke Width",
+        strokeWidth,
+        0,
+        10,
+        0.1
+      );
     }
   }
   /**
@@ -2521,17 +2923,77 @@ class LayerControl {
    */
   addRasterControls(container, layerId) {
     const rasterOpacity = this.map.getPaintProperty(layerId, "raster-opacity");
-    this.createSliderControl(container, layerId, "raster-opacity", "Opacity", typeof rasterOpacity === "number" ? rasterOpacity : 1, 0, 1, 0.05);
-    const brightnessMin = this.map.getPaintProperty(layerId, "raster-brightness-min");
-    this.createSliderControl(container, layerId, "raster-brightness-min", "Brightness Min", typeof brightnessMin === "number" ? brightnessMin : 0, -1, 1, 0.05);
-    const brightnessMax = this.map.getPaintProperty(layerId, "raster-brightness-max");
-    this.createSliderControl(container, layerId, "raster-brightness-max", "Brightness Max", typeof brightnessMax === "number" ? brightnessMax : 1, -1, 1, 0.05);
+    this.createSliderControl(
+      container,
+      layerId,
+      "raster-opacity",
+      "Opacity",
+      typeof rasterOpacity === "number" ? rasterOpacity : 1,
+      0,
+      1,
+      0.05
+    );
+    const brightnessMin = this.map.getPaintProperty(
+      layerId,
+      "raster-brightness-min"
+    );
+    this.createSliderControl(
+      container,
+      layerId,
+      "raster-brightness-min",
+      "Brightness Min",
+      typeof brightnessMin === "number" ? brightnessMin : 0,
+      -1,
+      1,
+      0.05
+    );
+    const brightnessMax = this.map.getPaintProperty(
+      layerId,
+      "raster-brightness-max"
+    );
+    this.createSliderControl(
+      container,
+      layerId,
+      "raster-brightness-max",
+      "Brightness Max",
+      typeof brightnessMax === "number" ? brightnessMax : 1,
+      -1,
+      1,
+      0.05
+    );
     const saturation = this.map.getPaintProperty(layerId, "raster-saturation");
-    this.createSliderControl(container, layerId, "raster-saturation", "Saturation", typeof saturation === "number" ? saturation : 0, -1, 1, 0.05);
+    this.createSliderControl(
+      container,
+      layerId,
+      "raster-saturation",
+      "Saturation",
+      typeof saturation === "number" ? saturation : 0,
+      -1,
+      1,
+      0.05
+    );
     const contrast = this.map.getPaintProperty(layerId, "raster-contrast");
-    this.createSliderControl(container, layerId, "raster-contrast", "Contrast", typeof contrast === "number" ? contrast : 0, -1, 1, 0.05);
+    this.createSliderControl(
+      container,
+      layerId,
+      "raster-contrast",
+      "Contrast",
+      typeof contrast === "number" ? contrast : 0,
+      -1,
+      1,
+      0.05
+    );
     const hueRotate = this.map.getPaintProperty(layerId, "raster-hue-rotate");
-    this.createSliderControl(container, layerId, "raster-hue-rotate", "Hue Rotate", typeof hueRotate === "number" ? hueRotate : 0, 0, 350, 5);
+    this.createSliderControl(
+      container,
+      layerId,
+      "raster-hue-rotate",
+      "Hue Rotate",
+      typeof hueRotate === "number" ? hueRotate : 0,
+      0,
+      350,
+      5
+    );
   }
   /**
    * Add controls for symbol layers
@@ -2539,15 +3001,39 @@ class LayerControl {
   addSymbolControls(container, layerId) {
     const textColor = this.map.getPaintProperty(layerId, "text-color");
     if (textColor !== void 0) {
-      this.createColorControl(container, layerId, "text-color", "Text Color", normalizeColor(textColor));
+      this.createColorControl(
+        container,
+        layerId,
+        "text-color",
+        "Text Color",
+        normalizeColor(textColor)
+      );
     }
     const textOpacity = this.map.getPaintProperty(layerId, "text-opacity");
     if (textOpacity !== void 0 && typeof textOpacity === "number") {
-      this.createSliderControl(container, layerId, "text-opacity", "Text Opacity", textOpacity, 0, 1, 0.05);
+      this.createSliderControl(
+        container,
+        layerId,
+        "text-opacity",
+        "Text Opacity",
+        textOpacity,
+        0,
+        1,
+        0.05
+      );
     }
     const iconOpacity = this.map.getPaintProperty(layerId, "icon-opacity");
     if (iconOpacity !== void 0 && typeof iconOpacity === "number") {
-      this.createSliderControl(container, layerId, "icon-opacity", "Icon Opacity", iconOpacity, 0, 1, 0.05);
+      this.createSliderControl(
+        container,
+        layerId,
+        "icon-opacity",
+        "Icon Opacity",
+        iconOpacity,
+        0,
+        1,
+        0.05
+      );
     }
   }
   /**
@@ -2630,7 +3116,9 @@ class LayerControl {
     restoreOriginalStyle(this.map, layerId, this.state.originalStyles);
     const editor = this.styleEditors.get(layerId);
     if (editor) {
-      const sliders = editor.querySelectorAll(".style-control-slider");
+      const sliders = editor.querySelectorAll(
+        ".style-control-slider"
+      );
       sliders.forEach((slider) => {
         var _a;
         const property = slider.dataset.property;
@@ -2638,7 +3126,9 @@ class LayerControl {
           const value = this.map.getPaintProperty(layerId, property);
           if (value !== void 0 && typeof value === "number") {
             slider.value = String(value);
-            const valueDisplay = (_a = slider.parentElement) == null ? void 0 : _a.querySelector(".style-control-value");
+            const valueDisplay = (_a = slider.parentElement) == null ? void 0 : _a.querySelector(
+              ".style-control-value"
+            );
             if (valueDisplay) {
               const step = parseFloat(slider.step);
               valueDisplay.textContent = formatNumericValue(value, step);
@@ -2646,7 +3136,9 @@ class LayerControl {
           }
         }
       });
-      const colorPickers = editor.querySelectorAll(".style-control-color-picker");
+      const colorPickers = editor.querySelectorAll(
+        ".style-control-color-picker"
+      );
       colorPickers.forEach((picker) => {
         var _a;
         const property = picker.dataset.property;
@@ -2655,7 +3147,9 @@ class LayerControl {
           if (value !== void 0) {
             const hexColor = normalizeColor(value);
             picker.value = hexColor;
-            const hexDisplay = (_a = picker.parentElement) == null ? void 0 : _a.querySelector(".style-control-color-value");
+            const hexDisplay = (_a = picker.parentElement) == null ? void 0 : _a.querySelector(
+              ".style-control-color-value"
+            );
             if (hexDisplay) {
               hexDisplay.textContent = hexColor;
             }
@@ -2703,8 +3197,12 @@ class LayerControl {
     const layerItems = this.panel.querySelectorAll(".layer-control-item");
     layerItems.forEach((item) => {
       if (item.dataset.layerId === layerId) {
-        const checkbox = item.querySelector(".layer-control-checkbox");
-        const opacitySlider = item.querySelector(".layer-control-opacity");
+        const checkbox = item.querySelector(
+          ".layer-control-checkbox"
+        );
+        const opacitySlider = item.querySelector(
+          ".layer-control-opacity"
+        );
         if (checkbox) {
           checkbox.checked = visible;
         }
@@ -2728,7 +3226,9 @@ class LayerControl {
         return;
       }
       const currentMapLayerIds = new Set(style.layers.map((layer) => layer.id));
-      const isAutoDetectMode = this.targetLayers.length === 0 || this.targetLayers.length === 1 && this.targetLayers[0] === "Background" || this.targetLayers.every((id) => id === "Background" || this.state.layerStates[id]);
+      const isAutoDetectMode = this.targetLayers.length === 0 || this.targetLayers.length === 1 && this.targetLayers[0] === "Background" || this.targetLayers.every(
+        (id) => id === "Background" || this.state.layerStates[id]
+      );
       const newLayers = [];
       const useBasemapStyleDetection = this.basemapLayerIds !== null && this.basemapLayerIds.size > 0;
       const useInitialLayerDetection = !useBasemapStyleDetection && this.initialLayerIds !== null && this.initialLayerIds.size > 0;
@@ -2783,7 +3283,9 @@ class LayerControl {
       if (removedLayers.length > 0) {
         removedLayers.forEach((layerId) => {
           delete this.state.layerStates[layerId];
-          const itemEl = this.panel.querySelector(`[data-layer-id="${layerId}"]`);
+          const itemEl = this.panel.querySelector(
+            `[data-layer-id="${layerId}"]`
+          );
           if (itemEl) {
             itemEl.remove();
           }
@@ -2830,7 +3332,9 @@ class LayerControl {
           const state = this.state.layerStates[layerId];
           if (state.isCustomLayer && !customLayerIds.includes(layerId)) {
             delete this.state.layerStates[layerId];
-            const itemEl = this.panel.querySelector(`[data-layer-id="${layerId}"]`);
+            const itemEl = this.panel.querySelector(
+              `[data-layer-id="${layerId}"]`
+            );
             if (itemEl) {
               itemEl.remove();
             }
@@ -2853,12 +3357,14 @@ class LayerControl {
   registerCustomAdapter(adapter) {
     if (!this.customLayerRegistry) {
       this.customLayerRegistry = new CustomLayerRegistry();
-      this.customLayerUnsubscribe = this.customLayerRegistry.onChange((event, layerId) => {
-        if (event === "add" && layerId) {
-          this.removedCustomLayerIds.delete(layerId);
+      this.customLayerUnsubscribe = this.customLayerRegistry.onChange(
+        (event, layerId) => {
+          if (event === "add" && layerId) {
+            this.removedCustomLayerIds.delete(layerId);
+          }
+          this.checkForNewLayers();
         }
-        this.checkForNewLayers();
-      });
+      );
     }
     this.customLayerRegistry.register(adapter);
     if (this.panel) {
@@ -2905,20 +3411,29 @@ class LayerControl {
       }
       this.hideContextMenu();
     });
-    const moveBottomItem = this.createContextMenuItem("Move to Bottom", "⤓", () => {
-      if (this.state.contextMenu.targetLayerId) {
-        this.moveLayerToBottom(this.state.contextMenu.targetLayerId);
+    const moveBottomItem = this.createContextMenuItem(
+      "Move to Bottom",
+      "⤓",
+      () => {
+        if (this.state.contextMenu.targetLayerId) {
+          this.moveLayerToBottom(this.state.contextMenu.targetLayerId);
+        }
+        this.hideContextMenu();
       }
-      this.hideContextMenu();
-    });
+    );
     const sep2 = document.createElement("div");
     sep2.className = "context-menu-separator";
-    const removeItem = this.createContextMenuItem("Remove Layer", "🗑️", () => {
-      if (this.state.contextMenu.targetLayerId) {
-        this.removeLayer(this.state.contextMenu.targetLayerId);
-      }
-      this.hideContextMenu();
-    }, true);
+    const removeItem = this.createContextMenuItem(
+      "Remove Layer",
+      "🗑️",
+      () => {
+        if (this.state.contextMenu.targetLayerId) {
+          this.removeLayer(this.state.contextMenu.targetLayerId);
+        }
+        this.hideContextMenu();
+      },
+      true
+    );
     menu.appendChild(renameItem);
     menu.appendChild(zoomItem);
     menu.appendChild(sep1);
@@ -3048,7 +3563,9 @@ class LayerControl {
     if ((layerState == null ? void 0 : layerState.isCustomLayer) && this.customLayerRegistry) {
       const bounds = this.customLayerRegistry.getBounds(layerId);
       if (bounds) {
-        this.map.fitBounds(bounds, { padding: 50 });
+        this.map.fitBounds(bounds, {
+          padding: 50
+        });
         return;
       }
     }
@@ -3080,7 +3597,9 @@ class LayerControl {
         } else if (feature.geometry.type === "LineString" || feature.geometry.type === "MultiPoint") {
           feature.geometry.coordinates.forEach(processCoords);
         } else if (feature.geometry.type === "Polygon" || feature.geometry.type === "MultiLineString") {
-          feature.geometry.coordinates.forEach((ring) => ring.forEach(processCoords));
+          feature.geometry.coordinates.forEach(
+            (ring) => ring.forEach(processCoords)
+          );
         } else if (feature.geometry.type === "MultiPolygon") {
           feature.geometry.coordinates.forEach(
             (polygon) => polygon.forEach((ring) => ring.forEach(processCoords))
@@ -3088,7 +3607,13 @@ class LayerControl {
         }
       });
       if (minLng !== Infinity && minLat !== Infinity && maxLng !== -Infinity && maxLat !== -Infinity) {
-        this.map.fitBounds([[minLng, minLat], [maxLng, maxLat]], { padding: 50 });
+        this.map.fitBounds(
+          [
+            [minLng, minLat],
+            [maxLng, maxLat]
+          ],
+          { padding: 50 }
+        );
       }
     } catch (error) {
       console.warn(`Failed to zoom to layer ${layerId}:`, error);
@@ -3102,15 +3627,21 @@ class LayerControl {
     const style = this.map.getStyle();
     if (!(style == null ? void 0 : style.layers)) return [];
     const mapLayerIds = style.layers.map((l) => l.id);
-    const userLayerIds = Object.keys(this.state.layerStates).filter((id) => id !== "Background");
-    const mapLibreLayers = userLayerIds.filter((id) => mapLayerIds.includes(id));
+    const userLayerIds = Object.keys(this.state.layerStates).filter(
+      (id) => id !== "Background"
+    );
+    const mapLibreLayers = userLayerIds.filter(
+      (id) => mapLayerIds.includes(id)
+    );
     const customLayers = userLayerIds.filter(
       (id) => {
         var _a;
         return ((_a = this.state.layerStates[id]) == null ? void 0 : _a.isCustomLayer) && !mapLayerIds.includes(id);
       }
     );
-    const sortedMapLibreLayers = mapLibreLayers.sort((a, b) => mapLayerIds.indexOf(b) - mapLayerIds.indexOf(a));
+    const sortedMapLibreLayers = mapLibreLayers.sort(
+      (a, b) => mapLayerIds.indexOf(b) - mapLayerIds.indexOf(a)
+    );
     return [...customLayers, ...sortedMapLibreLayers];
   }
   /**
@@ -3152,7 +3683,10 @@ class LayerControl {
     }
     const newLayerStates = {};
     const orderedIds = [...layerIds];
-    [orderedIds[index], orderedIds[index - 1]] = [orderedIds[index - 1], orderedIds[index]];
+    [orderedIds[index], orderedIds[index - 1]] = [
+      orderedIds[index - 1],
+      orderedIds[index]
+    ];
     if (this.state.layerStates["Background"]) {
       newLayerStates["Background"] = this.state.layerStates["Background"];
     }
@@ -3216,7 +3750,10 @@ class LayerControl {
     }
     const newLayerStates = {};
     const orderedIds = [...layerIds];
-    [orderedIds[index], orderedIds[index + 1]] = [orderedIds[index + 1], orderedIds[index]];
+    [orderedIds[index], orderedIds[index + 1]] = [
+      orderedIds[index + 1],
+      orderedIds[index]
+    ];
     if (this.state.layerStates["Background"]) {
       newLayerStates["Background"] = this.state.layerStates["Background"];
     }
@@ -3240,7 +3777,11 @@ class LayerControl {
     if (index < 0 || index === layerIds.length - 1) return;
     const isCustom = (_a = this.state.layerStates[layerId]) == null ? void 0 : _a.isCustomLayer;
     if (!isCustom && this.isMapLibreLayer(layerId)) {
-      const bottomLayerId = this.findNextMapLibreLayer(layerIds, layerIds.length - 1, -1);
+      const bottomLayerId = this.findNextMapLibreLayer(
+        layerIds,
+        layerIds.length - 1,
+        -1
+      );
       if (bottomLayerId && bottomLayerId !== layerId) {
         try {
           this.map.moveLayer(layerId, bottomLayerId);
@@ -3328,7 +3869,9 @@ class LayerControl {
         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);
+          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);
@@ -3395,7 +3938,9 @@ class LayerControl {
    */
   startDrag(layerId, e) {
     var _a;
-    const itemEl = this.panel.querySelector(`[data-layer-id="${layerId}"]`);
+    const itemEl = this.panel.querySelector(
+      `[data-layer-id="${layerId}"]`
+    );
     if (!itemEl) return;
     const rect = itemEl.getBoundingClientRect();
     this.state.drag = {
@@ -3446,7 +3991,11 @@ class LayerControl {
     clone.style.top = `${currentTop + deltaY}px`;
     this.state.drag.startY = e.clientY;
     this.state.drag.currentY = e.clientY;
-    const items = Array.from(this.panel.querySelectorAll(".layer-control-item:not(.dragging)")).filter((item) => item.dataset.layerId !== "Background");
+    const items = Array.from(
+      this.panel.querySelectorAll(".layer-control-item:not(.dragging)")
+    ).filter(
+      (item) => item.dataset.layerId !== "Background"
+    );
     for (const item of items) {
       const itemRect = item.getBoundingClientRect();
       if (e.clientY >= itemRect.top && e.clientY <= itemRect.bottom) {
@@ -3472,7 +4021,9 @@ class LayerControl {
     if (!this.state.drag.active) return;
     const layerId = this.state.drag.layerId;
     const placeholder = this.state.drag.placeholder;
-    const itemEl = this.panel.querySelector(`[data-layer-id="${layerId}"]`);
+    const itemEl = this.panel.querySelector(
+      `[data-layer-id="${layerId}"]`
+    );
     if (itemEl && placeholder) {
       (_a = placeholder.parentNode) == null ? void 0 : _a.insertBefore(itemEl, placeholder);
       itemEl.classList.remove("dragging");