maplibre-gl-layer-control 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1166 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+function getOpacityProperty(layerType) {
+  switch (layerType) {
+    case "fill":
+      return "fill-opacity";
+    case "line":
+      return "line-opacity";
+    case "circle":
+      return "circle-opacity";
+    case "symbol":
+      return ["icon-opacity", "text-opacity"];
+    case "raster":
+      return "raster-opacity";
+    case "background":
+      return "background-opacity";
+    default:
+      return `${layerType}-opacity`;
+  }
+}
+function getLayerOpacity(map, layerId, layerType) {
+  const opacityProp = getOpacityProperty(layerType);
+  if (Array.isArray(opacityProp)) {
+    const opacity2 = map.getPaintProperty(layerId, opacityProp[0]);
+    return opacity2 !== void 0 && opacity2 !== null ? opacity2 : 1;
+  }
+  const opacity = map.getPaintProperty(layerId, opacityProp);
+  return opacity !== void 0 && opacity !== null ? opacity : 1;
+}
+function setLayerOpacity(map, layerId, layerType, opacity) {
+  const opacityProp = getOpacityProperty(layerType);
+  if (Array.isArray(opacityProp)) {
+    opacityProp.forEach((prop) => {
+      map.setPaintProperty(layerId, prop, opacity);
+    });
+  } else {
+    map.setPaintProperty(layerId, opacityProp, opacity);
+  }
+}
+function isStyleableLayerType(layerType) {
+  return ["fill", "line", "circle", "symbol", "raster"].includes(layerType);
+}
+function getLayerType(map, layerId) {
+  try {
+    const layer = map.getLayer(layerId);
+    return layer ? layer.type : null;
+  } catch (error) {
+    console.warn(`Failed to get layer type for ${layerId}:`, error);
+    return null;
+  }
+}
+function clonePaintValue(value) {
+  if (Array.isArray(value)) {
+    return value.map((item) => clonePaintValue(item));
+  }
+  if (value && typeof value === "object") {
+    try {
+      return JSON.parse(JSON.stringify(value));
+    } catch (error) {
+      return value;
+    }
+  }
+  return value;
+}
+function cacheOriginalLayerStyle(map, layerId, originalStyles) {
+  var _a;
+  if (originalStyles.has(layerId)) {
+    return;
+  }
+  try {
+    const layer = map.getLayer(layerId);
+    if (!layer) {
+      return;
+    }
+    const paint = {};
+    const style = map.getStyle();
+    const layerDef = (_a = style.layers) == null ? void 0 : _a.find((l) => l.id === layerId);
+    if (layer.type === "raster") {
+      const rasterDefaults = {
+        "raster-opacity": 1,
+        "raster-brightness-min": 0,
+        "raster-brightness-max": 1,
+        "raster-saturation": 0,
+        "raster-contrast": 0,
+        "raster-hue-rotate": 0
+      };
+      Object.assign(paint, rasterDefaults);
+      if (layerDef && "paint" in layerDef && layerDef.paint) {
+        Object.entries(layerDef.paint).forEach(([prop, value]) => {
+          if (prop.startsWith("raster-")) {
+            paint[prop] = clonePaintValue(value);
+          }
+        });
+      }
+    } else {
+      if (layerDef && "paint" in layerDef && layerDef.paint) {
+        Object.entries(layerDef.paint).forEach(([prop, value]) => {
+          paint[prop] = clonePaintValue(value);
+        });
+      }
+    }
+    originalStyles.set(layerId, { paint });
+  } catch (error) {
+    console.warn(`Failed to cache original style for ${layerId}:`, error);
+  }
+}
+function restoreOriginalStyle(map, layerId, originalStyles) {
+  const original = originalStyles.get(layerId);
+  if (!original) {
+    return {};
+  }
+  const applied = {};
+  Object.entries(original.paint).forEach(([property, value]) => {
+    try {
+      const restoredValue = clonePaintValue(value);
+      map.setPaintProperty(layerId, property, restoredValue);
+      applied[property] = restoredValue;
+    } catch (error) {
+      console.warn(`Failed to restore ${property} for ${layerId}:`, error);
+    }
+  });
+  return applied;
+}
+function rgbToHex(r, g, b) {
+  const clamp2 = (v) => Math.max(0, Math.min(255, Math.round(v)));
+  const toHex = (v) => {
+    const hex = clamp2(v).toString(16);
+    return hex.length === 1 ? `0${hex}` : hex;
+  };
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function normalizeColor(value) {
+  if (typeof value === "string") {
+    if (value.startsWith("#")) {
+      if (value.length === 4) {
+        const r = value[1];
+        const g = value[2];
+        const b = value[3];
+        return `#${r}${r}${g}${g}${b}${b}`;
+      }
+      return value;
+    }
+    if (value.startsWith("rgb")) {
+      const match = value.match(/\d+/g);
+      if (match && match.length >= 3) {
+        const [r, g, b] = match.map((num) => parseInt(num, 10));
+        return rgbToHex(r, g, b);
+      }
+    }
+  } else if (Array.isArray(value) && value.length >= 3) {
+    return rgbToHex(value[0], value[1], value[2]);
+  }
+  return "#3388ff";
+}
+function formatNumericValue(value, step) {
+  let decimals = 0;
+  if (step && Number(step) !== 1) {
+    const stepNumber = Number(step);
+    if (stepNumber > 0 && stepNumber < 1) {
+      decimals = Math.min(4, Math.ceil(Math.abs(Math.log10(stepNumber))));
+    }
+  }
+  return value.toFixed(decimals);
+}
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(max, value));
+}
+class LayerControl {
+  constructor(options = {}) {
+    __publicField(this, "map");
+    __publicField(this, "container");
+    __publicField(this, "button");
+    __publicField(this, "panel");
+    // State management
+    __publicField(this, "state");
+    __publicField(this, "targetLayers");
+    __publicField(this, "styleEditors");
+    // Panel width management
+    __publicField(this, "minPanelWidth");
+    __publicField(this, "maxPanelWidth");
+    __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);
+    this.minPanelWidth = options.panelMinWidth || 240;
+    this.maxPanelWidth = options.panelMaxWidth || 420;
+    this.state = {
+      collapsed: options.collapsed !== false,
+      panelWidth: options.panelWidth || 320,
+      activeStyleEditor: null,
+      layerStates: options.layerStates || {},
+      originalStyles: /* @__PURE__ */ new Map(),
+      userInteractingWithSlider: false
+    };
+    this.targetLayers = options.layers || Object.keys(this.state.layerStates);
+    this.styleEditors = /* @__PURE__ */ new Map();
+  }
+  /**
+   * Called when the control is added to the map
+   */
+  onAdd(map) {
+    this.map = map;
+    if (Object.keys(this.state.layerStates).length === 0) {
+      this.autoDetectLayers();
+    }
+    this.container = this.createContainer();
+    this.button = this.createToggleButton();
+    this.panel = this.createPanel();
+    this.container.appendChild(this.button);
+    this.container.appendChild(this.panel);
+    this.updateWidthDisplay();
+    this.setupEventListeners();
+    this.buildLayerItems();
+    return this.container;
+  }
+  /**
+   * Called when the control is removed from the map
+   */
+  onRemove() {
+    var _a;
+    (_a = this.container.parentNode) == null ? void 0 : _a.removeChild(this.container);
+  }
+  /**
+   * Auto-detect layers from the map and populate layerStates
+   */
+  autoDetectLayers() {
+    const style = this.map.getStyle();
+    if (!style || !style.layers) {
+      return;
+    }
+    const allLayerIds = style.layers.map((layer) => layer.id);
+    if (this.targetLayers.length === 0) {
+      allLayerIds.forEach((layerId) => {
+        const layer = this.map.getLayer(layerId);
+        if (!layer) return;
+        const visibility = this.map.getLayoutProperty(layerId, "visibility");
+        const isVisible = visibility !== "none";
+        const layerType = layer.type;
+        const opacity = getLayerOpacity(this.map, layerId, layerType);
+        const friendlyName = this.generateFriendlyName(layerId);
+        this.state.layerStates[layerId] = {
+          visible: isVisible,
+          opacity,
+          name: friendlyName
+        };
+      });
+    } else {
+      const userLayers = [];
+      const basemapLayers = [];
+      allLayerIds.forEach((layerId) => {
+        if (this.targetLayers.includes(layerId)) {
+          userLayers.push(layerId);
+        } else {
+          basemapLayers.push(layerId);
+        }
+      });
+      if (basemapLayers.length > 0) {
+        this.state.layerStates["Background"] = {
+          visible: true,
+          opacity: 1,
+          name: "Background"
+        };
+      }
+      userLayers.forEach((layerId) => {
+        const layer = this.map.getLayer(layerId);
+        if (!layer) return;
+        const visibility = this.map.getLayoutProperty(layerId, "visibility");
+        const isVisible = visibility !== "none";
+        const layerType = layer.type;
+        const opacity = getLayerOpacity(this.map, layerId, layerType);
+        const friendlyName = this.generateFriendlyName(layerId);
+        this.state.layerStates[layerId] = {
+          visible: isVisible,
+          opacity,
+          name: friendlyName
+        };
+      });
+    }
+    this.targetLayers = Object.keys(this.state.layerStates);
+  }
+  /**
+   * Generate a friendly display name from a layer ID
+   */
+  generateFriendlyName(layerId) {
+    let name = layerId.replace(/^(layer[-_]?|gl[-_]?)/, "");
+    name = name.replace(/[-_]/g, " ");
+    name = name.replace(/\b\w/g, (char) => char.toUpperCase());
+    return name || layerId;
+  }
+  /**
+   * Create the main container element
+   */
+  createContainer() {
+    const container = document.createElement("div");
+    container.className = "maplibregl-ctrl maplibregl-ctrl-group maplibregl-ctrl-layer-control";
+    return container;
+  }
+  /**
+   * Create the toggle button
+   */
+  createToggleButton() {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.title = "Layer Control";
+    button.setAttribute("aria-label", "Layer Control");
+    const icon = document.createElement("span");
+    icon.className = "layer-control-icon";
+    icon.innerHTML = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 3 3 8.25 12 13.5 21 8.25 12 3"></polygon><polyline points="3 12.75 12 18 21 12.75"></polyline><polyline points="3 17.25 12 22 21 17.25"></polyline></svg>';
+    button.appendChild(icon);
+    return button;
+  }
+  /**
+   * Create the panel element
+   */
+  createPanel() {
+    const panel = document.createElement("div");
+    panel.className = "layer-control-panel";
+    panel.style.width = `${this.state.panelWidth}px`;
+    if (!this.state.collapsed) {
+      panel.classList.add("expanded");
+    }
+    const header = this.createPanelHeader();
+    panel.appendChild(header);
+    return panel;
+  }
+  /**
+   * Create the panel header with title and width control
+   */
+  createPanelHeader() {
+    const header = document.createElement("div");
+    header.className = "layer-control-panel-header";
+    const title = document.createElement("span");
+    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)
+   */
+  applyPanelWidth(width, immediate = false) {
+    const clamped = Math.round(Math.min(this.maxPanelWidth, Math.max(this.minPanelWidth, width)));
+    const applyWidth = () => {
+      this.state.panelWidth = clamped;
+      const px = `${clamped}px`;
+      this.panel.style.width = px;
+      this.updateWidthDisplay();
+    };
+    if (immediate) {
+      applyWidth();
+      return;
+    }
+    if (this.widthFrame) {
+      cancelAnimationFrame(this.widthFrame);
+    }
+    this.widthFrame = requestAnimationFrame(() => {
+      applyWidth();
+      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 || 1;
+        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
+   */
+  setupEventListeners() {
+    this.button.addEventListener("click", () => this.toggle());
+    document.addEventListener("click", (e) => {
+      if (!this.container.contains(e.target)) {
+        this.collapse();
+      }
+    });
+    this.setupLayerChangeListeners();
+  }
+  /**
+   * Setup listeners for map layer changes
+   */
+  setupLayerChangeListeners() {
+    this.map.on("styledata", () => {
+      setTimeout(() => {
+        this.updateLayerStatesFromMap();
+        this.checkForNewLayers();
+      }, 100);
+    });
+    this.map.on("data", (e) => {
+      if (e.sourceDataType === "content") {
+        setTimeout(() => {
+          this.updateLayerStatesFromMap();
+          this.checkForNewLayers();
+        }, 100);
+      }
+    });
+    this.map.on("sourcedata", (e) => {
+      if (e.sourceDataType === "metadata") {
+        setTimeout(() => {
+          this.checkForNewLayers();
+        }, 150);
+      }
+    });
+  }
+  /**
+   * Toggle panel expanded/collapsed state
+   */
+  toggle() {
+    if (this.state.collapsed) {
+      this.expand();
+    } else {
+      this.collapse();
+    }
+  }
+  /**
+   * Expand the panel
+   */
+  expand() {
+    this.state.collapsed = false;
+    this.panel.classList.add("expanded");
+  }
+  /**
+   * Collapse the panel
+   */
+  collapse() {
+    this.state.collapsed = true;
+    this.panel.classList.remove("expanded");
+  }
+  /**
+   * Build layer items (called initially and when layers change)
+   */
+  buildLayerItems() {
+    const existingItems = this.panel.querySelectorAll(".layer-control-item");
+    existingItems.forEach((item) => item.remove());
+    this.styleEditors.clear();
+    Object.entries(this.state.layerStates).forEach(([layerId, state]) => {
+      if (this.targetLayers.length === 0 || this.targetLayers.includes(layerId)) {
+        this.addLayerItem(layerId, state);
+      }
+    });
+  }
+  /**
+   * Add a single layer item to the panel
+   */
+  addLayerItem(layerId, state) {
+    const item = document.createElement("div");
+    item.className = "layer-control-item";
+    item.setAttribute("data-layer-id", layerId);
+    const row = document.createElement("div");
+    row.className = "layer-control-row";
+    const checkbox = document.createElement("input");
+    checkbox.type = "checkbox";
+    checkbox.className = "layer-control-checkbox";
+    checkbox.checked = state.visible;
+    checkbox.addEventListener("change", () => {
+      this.toggleLayerVisibility(layerId, checkbox.checked);
+    });
+    const name = document.createElement("span");
+    name.className = "layer-control-name";
+    name.textContent = state.name || layerId;
+    name.title = state.name || layerId;
+    const opacity = document.createElement("input");
+    opacity.type = "range";
+    opacity.className = "layer-control-opacity";
+    opacity.min = "0";
+    opacity.max = "1";
+    opacity.step = "0.01";
+    opacity.value = String(state.opacity);
+    opacity.title = `Opacity: ${Math.round(state.opacity * 100)}%`;
+    opacity.addEventListener("mousedown", () => {
+      this.state.userInteractingWithSlider = true;
+    });
+    opacity.addEventListener("mouseup", () => {
+      this.state.userInteractingWithSlider = false;
+    });
+    opacity.addEventListener("input", () => {
+      this.changeLayerOpacity(layerId, parseFloat(opacity.value));
+      opacity.title = `Opacity: ${Math.round(parseFloat(opacity.value) * 100)}%`;
+    });
+    row.appendChild(checkbox);
+    row.appendChild(name);
+    row.appendChild(opacity);
+    if (layerId !== "Background") {
+      const styleButton = this.createStyleButton(layerId);
+      if (styleButton) {
+        row.appendChild(styleButton);
+      }
+    }
+    item.appendChild(row);
+    this.panel.appendChild(item);
+  }
+  /**
+   * Toggle layer visibility
+   */
+  toggleLayerVisibility(layerId, visible) {
+    if (layerId === "Background") {
+      this.toggleBackgroundVisibility(visible);
+      return;
+    }
+    if (this.state.layerStates[layerId]) {
+      this.state.layerStates[layerId].visible = visible;
+    }
+    this.map.setLayoutProperty(layerId, "visibility", visible ? "visible" : "none");
+  }
+  /**
+   * Change layer opacity
+   */
+  changeLayerOpacity(layerId, opacity) {
+    if (layerId === "Background") {
+      this.changeBackgroundOpacity(opacity);
+      return;
+    }
+    if (this.state.layerStates[layerId]) {
+      this.state.layerStates[layerId].opacity = opacity;
+    }
+    const layerType = getLayerType(this.map, layerId);
+    if (layerType) {
+      setLayerOpacity(this.map, layerId, layerType, opacity);
+    }
+  }
+  /**
+   * Check if a layer is a user-added layer (vs basemap layer)
+   */
+  isUserAddedLayer(layerId) {
+    return this.state.layerStates[layerId] !== void 0 && layerId !== "Background";
+  }
+  /**
+   * Toggle visibility for all background layers (basemap layers)
+   */
+  toggleBackgroundVisibility(visible) {
+    if (this.state.layerStates["Background"]) {
+      this.state.layerStates["Background"].visible = visible;
+    }
+    const styleLayers = this.map.getStyle().layers || [];
+    styleLayers.forEach((layer) => {
+      if (!this.isUserAddedLayer(layer.id)) {
+        this.map.setLayoutProperty(layer.id, "visibility", visible ? "visible" : "none");
+      }
+    });
+  }
+  /**
+   * Change opacity for all background layers (basemap layers)
+   */
+  changeBackgroundOpacity(opacity) {
+    if (this.state.layerStates["Background"]) {
+      this.state.layerStates["Background"].opacity = opacity;
+    }
+    const styleLayers = this.map.getStyle().layers || [];
+    styleLayers.forEach((styleLayer) => {
+      if (!this.isUserAddedLayer(styleLayer.id)) {
+        const layerType = getLayerType(this.map, styleLayer.id);
+        if (layerType) {
+          setLayerOpacity(this.map, styleLayer.id, layerType, opacity);
+        }
+      }
+    });
+  }
+  /**
+   * Create style button for a layer
+   */
+  createStyleButton(layerId) {
+    if (layerId === "Background") {
+      return null;
+    }
+    const button = document.createElement("button");
+    button.className = "layer-control-style-button";
+    button.innerHTML = "&#9881;";
+    button.title = "Edit layer style";
+    button.setAttribute("aria-label", `Edit style for ${layerId}`);
+    button.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.toggleStyleEditor(layerId);
+    });
+    return button;
+  }
+  /**
+   * Toggle style editor for a layer
+   */
+  toggleStyleEditor(layerId) {
+    if (this.state.activeStyleEditor === layerId) {
+      this.closeStyleEditor(layerId);
+      return;
+    }
+    if (this.state.activeStyleEditor) {
+      this.closeStyleEditor(this.state.activeStyleEditor);
+    }
+    this.openStyleEditor(layerId);
+  }
+  /**
+   * Open style editor for a layer
+   */
+  openStyleEditor(layerId) {
+    const itemEl = this.panel.querySelector(`[data-layer-id="${layerId}"]`);
+    if (!itemEl) return;
+    if (!this.state.originalStyles.has(layerId)) {
+      const layer = this.map.getLayer(layerId);
+      if (layer) {
+        cacheOriginalLayerStyle(this.map, layerId, this.state.originalStyles);
+      }
+    }
+    const editor = this.createStyleEditor(layerId);
+    if (!editor) return;
+    itemEl.appendChild(editor);
+    this.styleEditors.set(layerId, editor);
+    this.state.activeStyleEditor = layerId;
+    setTimeout(() => {
+      editor.scrollIntoView({ behavior: "smooth", block: "nearest" });
+    }, 50);
+  }
+  /**
+   * Close style editor for a layer
+   */
+  closeStyleEditor(layerId) {
+    const editor = this.styleEditors.get(layerId);
+    if (editor) {
+      editor.remove();
+      this.styleEditors.delete(layerId);
+    }
+    if (this.state.activeStyleEditor === layerId) {
+      this.state.activeStyleEditor = null;
+    }
+  }
+  /**
+   * Create style editor UI
+   */
+  createStyleEditor(layerId) {
+    const layer = this.map.getLayer(layerId);
+    if (!layer) return null;
+    const editor = document.createElement("div");
+    editor.className = "layer-control-style-editor";
+    const header = document.createElement("div");
+    header.className = "style-editor-header";
+    const title = document.createElement("span");
+    title.className = "style-editor-title";
+    title.textContent = "Edit Style";
+    const closeBtn = document.createElement("button");
+    closeBtn.className = "style-editor-close";
+    closeBtn.innerHTML = "&times;";
+    closeBtn.title = "Close";
+    closeBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.closeStyleEditor(layerId);
+    });
+    header.appendChild(title);
+    header.appendChild(closeBtn);
+    const controls = document.createElement("div");
+    controls.className = "style-editor-controls";
+    const layerType = layer.type;
+    this.addStyleControlsForLayerType(controls, layerId, layerType);
+    const actions = document.createElement("div");
+    actions.className = "style-editor-actions";
+    const resetBtn = document.createElement("button");
+    resetBtn.className = "style-editor-button style-editor-button-reset";
+    resetBtn.textContent = "Reset";
+    resetBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.resetLayerStyle(layerId);
+    });
+    const closeActionBtn = document.createElement("button");
+    closeActionBtn.className = "style-editor-button style-editor-button-close";
+    closeActionBtn.textContent = "Close";
+    closeActionBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.closeStyleEditor(layerId);
+    });
+    actions.appendChild(resetBtn);
+    actions.appendChild(closeActionBtn);
+    editor.appendChild(header);
+    editor.appendChild(controls);
+    editor.appendChild(actions);
+    return editor;
+  }
+  /**
+   * Add style controls based on layer type
+   */
+  addStyleControlsForLayerType(container, layerId, layerType) {
+    switch (layerType) {
+      case "fill":
+        this.addFillControls(container, layerId);
+        break;
+      case "line":
+        this.addLineControls(container, layerId);
+        break;
+      case "circle":
+        this.addCircleControls(container, layerId);
+        break;
+      case "raster":
+        this.addRasterControls(container, layerId);
+        break;
+      case "symbol":
+        this.addSymbolControls(container, layerId);
+        break;
+      default:
+        container.textContent = `Style controls for ${layerType} layers not yet implemented.`;
+    }
+  }
+  /**
+   * Add controls for fill layers
+   */
+  addFillControls(container, layerId) {
+    var _a;
+    const style = this.map.getStyle();
+    const layer = (_a = style.layers) == null ? void 0 : _a.find((l) => l.id === layerId);
+    let fillColor = void 0;
+    if (layer && "paint" in layer && layer.paint && "fill-color" in layer.paint) {
+      fillColor = layer.paint["fill-color"];
+    }
+    if (!fillColor) {
+      fillColor = this.map.getPaintProperty(layerId, "fill-color");
+    }
+    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");
+    if (outlineColor !== void 0) {
+      this.createColorControl(container, layerId, "fill-outline-color", "Outline Color", normalizeColor(outlineColor));
+    }
+  }
+  /**
+   * Add controls for line layers
+   */
+  addLineControls(container, layerId) {
+    var _a;
+    const style = this.map.getStyle();
+    const layer = (_a = style.layers) == null ? void 0 : _a.find((l) => l.id === layerId);
+    let lineColor = void 0;
+    if (layer && "paint" in layer && layer.paint && "line-color" in layer.paint) {
+      lineColor = layer.paint["line-color"];
+    }
+    if (!lineColor) {
+      lineColor = this.map.getPaintProperty(layerId, "line-color");
+    }
+    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);
+    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);
+    }
+    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);
+    }
+  }
+  /**
+   * Add controls for circle layers
+   */
+  addCircleControls(container, layerId) {
+    var _a;
+    const style = this.map.getStyle();
+    const layer = (_a = style.layers) == null ? void 0 : _a.find((l) => l.id === layerId);
+    let circleColor = void 0;
+    if (layer && "paint" in layer && layer.paint && "circle-color" in layer.paint) {
+      circleColor = layer.paint["circle-color"];
+    }
+    if (!circleColor) {
+      circleColor = this.map.getPaintProperty(layerId, "circle-color");
+    }
+    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);
+    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");
+    if (strokeColor !== void 0) {
+      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);
+    }
+  }
+  /**
+   * Add controls for raster layers
+   */
+  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);
+    const saturation = this.map.getPaintProperty(layerId, "raster-saturation");
+    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);
+    const hueRotate = this.map.getPaintProperty(layerId, "raster-hue-rotate");
+    this.createSliderControl(container, layerId, "raster-hue-rotate", "Hue Rotate", typeof hueRotate === "number" ? hueRotate : 0, 0, 360, 5);
+  }
+  /**
+   * Add controls for symbol layers
+   */
+  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));
+    }
+    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);
+    }
+    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);
+    }
+  }
+  /**
+   * Create a color control
+   */
+  createColorControl(container, layerId, property, label, initialValue) {
+    const controlGroup = document.createElement("div");
+    controlGroup.className = "style-control-group";
+    const labelEl = document.createElement("label");
+    labelEl.className = "style-control-label";
+    labelEl.textContent = label;
+    const inputWrapper = document.createElement("div");
+    inputWrapper.className = "style-control-color-group";
+    const colorInput = document.createElement("input");
+    colorInput.type = "color";
+    colorInput.className = "style-control-color-picker";
+    colorInput.value = initialValue;
+    colorInput.dataset.property = property;
+    const hexDisplay = document.createElement("input");
+    hexDisplay.type = "text";
+    hexDisplay.className = "style-control-color-value";
+    hexDisplay.value = initialValue;
+    hexDisplay.readOnly = true;
+    colorInput.addEventListener("input", () => {
+      const color = colorInput.value;
+      hexDisplay.value = color;
+      this.map.setPaintProperty(layerId, property, color);
+    });
+    inputWrapper.appendChild(colorInput);
+    inputWrapper.appendChild(hexDisplay);
+    controlGroup.appendChild(labelEl);
+    controlGroup.appendChild(inputWrapper);
+    container.appendChild(controlGroup);
+  }
+  /**
+   * Create a slider control
+   */
+  createSliderControl(container, layerId, property, label, initialValue, min, max, step) {
+    const controlGroup = document.createElement("div");
+    controlGroup.className = "style-control-group";
+    const labelEl = document.createElement("label");
+    labelEl.className = "style-control-label";
+    labelEl.textContent = label;
+    const inputWrapper = document.createElement("div");
+    inputWrapper.className = "style-control-input-wrapper";
+    const slider = document.createElement("input");
+    slider.type = "range";
+    slider.className = "style-control-slider";
+    slider.min = String(min);
+    slider.max = String(max);
+    slider.step = String(step);
+    slider.value = String(initialValue);
+    slider.dataset.property = property;
+    const valueDisplay = document.createElement("span");
+    valueDisplay.className = "style-control-value";
+    valueDisplay.textContent = formatNumericValue(initialValue, step);
+    slider.addEventListener("input", () => {
+      const value = parseFloat(slider.value);
+      valueDisplay.textContent = formatNumericValue(value, step);
+      this.map.setPaintProperty(layerId, property, value);
+    });
+    inputWrapper.appendChild(slider);
+    inputWrapper.appendChild(valueDisplay);
+    controlGroup.appendChild(labelEl);
+    controlGroup.appendChild(inputWrapper);
+    container.appendChild(controlGroup);
+  }
+  /**
+   * Reset layer style to original
+   */
+  resetLayerStyle(layerId) {
+    const originalStyle = this.state.originalStyles.get(layerId);
+    if (!originalStyle) return;
+    restoreOriginalStyle(this.map, layerId, this.state.originalStyles);
+    const editor = this.styleEditors.get(layerId);
+    if (editor) {
+      const sliders = editor.querySelectorAll(".style-control-slider");
+      sliders.forEach((slider) => {
+        var _a;
+        const property = slider.dataset.property;
+        if (property) {
+          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");
+            if (valueDisplay) {
+              const step = parseFloat(slider.step);
+              valueDisplay.textContent = formatNumericValue(value, step);
+            }
+          }
+        }
+      });
+      const colorPickers = editor.querySelectorAll(".style-control-color-picker");
+      colorPickers.forEach((picker) => {
+        var _a;
+        const property = picker.dataset.property;
+        if (property) {
+          const value = this.map.getPaintProperty(layerId, property);
+          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");
+            if (hexDisplay) {
+              hexDisplay.textContent = hexColor;
+            }
+          }
+        }
+      });
+    }
+  }
+  /**
+   * Update layer states from map (sync UI with map)
+   */
+  updateLayerStatesFromMap() {
+    if (this.state.userInteractingWithSlider) {
+      return;
+    }
+    Object.keys(this.state.layerStates).forEach((layerId) => {
+      try {
+        const layer = this.map.getLayer(layerId);
+        if (!layer) return;
+        const visibility = this.map.getLayoutProperty(layerId, "visibility");
+        const isVisible = visibility !== "none";
+        const layerType = layer.type;
+        const opacity = getLayerOpacity(this.map, layerId, layerType);
+        if (this.state.layerStates[layerId]) {
+          this.state.layerStates[layerId].visible = isVisible;
+          this.state.layerStates[layerId].opacity = opacity;
+        }
+        this.updateUIForLayer(layerId, isVisible, opacity);
+      } catch (error) {
+        console.warn(`Failed to update state for layer ${layerId}:`, error);
+      }
+    });
+  }
+  /**
+   * Update UI elements for a specific layer
+   */
+  updateUIForLayer(layerId, visible, opacity) {
+    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");
+        if (checkbox) {
+          checkbox.checked = visible;
+        }
+        if (opacitySlider) {
+          opacitySlider.value = String(opacity);
+          opacitySlider.title = `Opacity: ${Math.round(opacity * 100)}%`;
+        }
+      }
+    });
+  }
+  /**
+   * Check for new layers and add them to the control
+   */
+  checkForNewLayers() {
+    try {
+      const style = this.map.getStyle();
+      if (!style || !style.layers) {
+        return;
+      }
+      const currentMapLayers = style.layers.map((layer) => layer.id).filter((id) => {
+        if (this.targetLayers.length > 0) {
+          return this.targetLayers.includes(id);
+        }
+        return true;
+      });
+      const newLayers = [];
+      currentMapLayers.forEach((layerId) => {
+        if (layerId !== "Background" && !this.state.layerStates[layerId]) {
+          const layer = this.map.getLayer(layerId);
+          if (layer) {
+            newLayers.push(layerId);
+          }
+        }
+      });
+      if (newLayers.length > 0) {
+        newLayers.forEach((layerId) => {
+          const layer = this.map.getLayer(layerId);
+          if (!layer) return;
+          const layerType = layer.type;
+          const opacity = getLayerOpacity(this.map, layerId, layerType);
+          const visibility = this.map.getLayoutProperty(layerId, "visibility");
+          const isVisible = visibility !== "none";
+          this.state.layerStates[layerId] = {
+            visible: isVisible,
+            opacity,
+            name: layerId.replace(/-/g, " ").replace(/\b\w/g, (l) => l.toUpperCase())
+          };
+          this.addLayerItem(layerId, this.state.layerStates[layerId]);
+        });
+      }
+    } catch (error) {
+      console.warn("Failed to check for new layers:", error);
+    }
+  }
+}
+export {
+  LayerControl,
+  clamp,
+  formatNumericValue,
+  getLayerOpacity,
+  getLayerType,
+  isStyleableLayerType,
+  normalizeColor,
+  rgbToHex,
+  setLayerOpacity
+};
+//# sourceMappingURL=index.mjs.map