maplibre-gl-layer-control-tidop 0.0.1

package/dist/index.mjs

@@ -0,0 +1,3499 @@
+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);
+class CustomLayerRegistry {
+  constructor() {
+    __publicField(this, "adapters", /* @__PURE__ */ new Map());
+    __publicField(this, "changeListeners", []);
+    __publicField(this, "unsubscribers", /* @__PURE__ */ new Map());
+  }
+  /**
+   * Register a custom layer adapter.
+   * @param adapter The adapter to register
+   */
+  register(adapter) {
+    this.adapters.set(adapter.type, adapter);
+    if (adapter.onLayerChange) {
+      const unsubscribe = adapter.onLayerChange((event, layerId) => {
+        this.notifyChange(event, layerId);
+      });
+      this.unsubscribers.set(adapter.type, unsubscribe);
+    }
+  }
+  /**
+   * Unregister an adapter by type.
+   * @param type The adapter type to unregister
+   */
+  unregister(type) {
+    const unsubscribe = this.unsubscribers.get(type);
+    if (unsubscribe) {
+      unsubscribe();
+      this.unsubscribers.delete(type);
+    }
+    this.adapters.delete(type);
+  }
+  /**
+   * Get all custom layer IDs across all adapters.
+   * @returns Array of layer IDs
+   */
+  getAllLayerIds() {
+    const ids = [];
+    this.adapters.forEach((adapter) => {
+      ids.push(...adapter.getLayerIds());
+    });
+    return ids;
+  }
+  /**
+   * Check if a layer ID is managed by any adapter.
+   * @param layerId The layer ID to check
+   * @returns true if the layer is managed by an adapter
+   */
+  hasLayer(layerId) {
+    for (const adapter of this.adapters.values()) {
+      if (adapter.getLayerIds().includes(layerId)) {
+        return true;
+      }
+    }
+    return false;
+  }
+  /**
+   * Get the adapter responsible for a specific layer.
+   * @param layerId The layer ID
+   * @returns The adapter or null if not found
+   */
+  getAdapterForLayer(layerId) {
+    for (const adapter of this.adapters.values()) {
+      if (adapter.getLayerIds().includes(layerId)) {
+        return adapter;
+      }
+    }
+    return null;
+  }
+  /**
+   * Get the state of a custom layer.
+   * @param layerId The layer ID
+   * @returns The layer state or null if not found
+   */
+  getLayerState(layerId) {
+    const adapter = this.getAdapterForLayer(layerId);
+    return adapter ? adapter.getLayerState(layerId) : null;
+  }
+  /**
+   * Set visibility of a custom layer.
+   * @param layerId The layer ID
+   * @param visible Whether the layer should be visible
+   * @returns true if the operation was handled by an adapter
+   */
+  setVisibility(layerId, visible) {
+    const adapter = this.getAdapterForLayer(layerId);
+    if (adapter) {
+      adapter.setVisibility(layerId, visible);
+      return true;
+    }
+    return false;
+  }
+  /**
+   * Set opacity of a custom layer.
+   * @param layerId The layer ID
+   * @param opacity The opacity value (0-1)
+   * @returns true if the operation was handled by an adapter
+   */
+  setOpacity(layerId, opacity) {
+    const adapter = this.getAdapterForLayer(layerId);
+    if (adapter) {
+      adapter.setOpacity(layerId, opacity);
+      return true;
+    }
+    return false;
+  }
+  /**
+   * Get the symbol type for a custom layer (for UI display).
+   * @param layerId The layer ID
+   * @returns The symbol type or null if not available
+   */
+  getSymbolType(layerId) {
+    const adapter = this.getAdapterForLayer(layerId);
+    if (adapter && adapter.getSymbolType) {
+      return adapter.getSymbolType(layerId);
+    }
+    return null;
+  }
+  /**
+   * Get the bounds of a custom layer (for zoom-to-layer).
+   * @param layerId The layer ID
+   * @returns The bounds [west, south, east, north] or null if not available
+   */
+  getBounds(layerId) {
+    const adapter = this.getAdapterForLayer(layerId);
+    if (adapter && adapter.getBounds) {
+      return adapter.getBounds(layerId);
+    }
+    return null;
+  }
+  /**
+   * Get native MapLibre layer IDs for a custom layer.
+   * @param layerId The custom layer ID
+   * @returns Array of native layer IDs, or null if not available
+   */
+  getNativeLayerIds(layerId) {
+    const adapter = this.getAdapterForLayer(layerId);
+    if (adapter && adapter.getNativeLayerIds) {
+      return adapter.getNativeLayerIds(layerId);
+    }
+    return null;
+  }
+  /**
+   * Remove a custom layer through its adapter.
+   * @param layerId The layer ID to remove
+   * @returns true if the operation was handled by an adapter
+   */
+  removeLayer(layerId) {
+    const adapter = this.getAdapterForLayer(layerId);
+    if (adapter && adapter.removeLayer) {
+      adapter.removeLayer(layerId);
+      return true;
+    }
+    return false;
+  }
+  /**
+   * Subscribe to layer changes across all adapters.
+   * @param callback Function called when layers are added or removed
+   * @returns Unsubscribe function
+   */
+  onChange(callback) {
+    this.changeListeners.push(callback);
+    return () => {
+      const idx = this.changeListeners.indexOf(callback);
+      if (idx >= 0) {
+        this.changeListeners.splice(idx, 1);
+      }
+    };
+  }
+  notifyChange(event, layerId) {
+    this.changeListeners.forEach((cb) => cb(event, layerId));
+  }
+  /**
+   * Clean up all subscriptions and adapters.
+   */
+  destroy() {
+    this.unsubscribers.forEach((unsub) => unsub());
+    this.unsubscribers.clear();
+    this.adapters.clear();
+    this.changeListeners = [];
+  }
+}
+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";
+    case "heatmap":
+      return "heatmap-opacity";
+    case "fill-extrusion":
+      return "fill-extrusion-opacity";
+    case "hillshade":
+      return "hillshade-exaggeration";
+    case "color-relief":
+      return null;
+    default:
+      return `${layerType}-opacity`;
+  }
+}
+function getLayerOpacity(map, layerId, layerType) {
+  const opacityProp = getOpacityProperty(layerType);
+  if (opacityProp === null) {
+    return 1;
+  }
+  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 (opacityProp === null) {
+    return;
+  }
+  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",
+    "heatmap",
+    "fill-extrusion",
+    "hillshade"
+  ].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));
+}
+const COLOR_PROPERTY_MAP = {
+  fill: ["fill-color", "fill-outline-color"],
+  line: ["line-color"],
+  circle: ["circle-color", "circle-stroke-color"],
+  symbol: ["icon-color", "text-color"],
+  background: ["background-color"],
+  heatmap: ["heatmap-color"],
+  "fill-extrusion": ["fill-extrusion-color"]
+};
+function extractColorFromExpression(expression) {
+  if (!Array.isArray(expression) || expression.length === 0) return null;
+  for (const item of expression) {
+    if (typeof item === "string") {
+      if (item.startsWith("#") || item.startsWith("rgb") || item.startsWith("hsl")) {
+        return normalizeColor(item);
+      }
+    } else if (Array.isArray(item)) {
+      const result = extractColorFromExpression(item);
+      if (result) return result;
+    }
+  }
+  return null;
+}
+function getLayerColor(map, layerId, layerType) {
+  var _a;
+  const propertyNames = COLOR_PROPERTY_MAP[layerType];
+  if (!propertyNames) return null;
+  for (const propertyName of propertyNames) {
+    try {
+      const runtimeColor = map.getPaintProperty(layerId, propertyName);
+      if (runtimeColor) {
+        if (typeof runtimeColor === "string") {
+          return normalizeColor(runtimeColor);
+        }
+        if (Array.isArray(runtimeColor)) {
+          const extracted = extractColorFromExpression(runtimeColor);
+          if (extracted) return extracted;
+        }
+      }
+    } catch {
+    }
+    const style = map.getStyle();
+    const layer = (_a = style == null ? void 0 : style.layers) == null ? void 0 : _a.find(
+      (l) => l.id === layerId
+    );
+    if (layer && "paint" in layer && layer.paint) {
+      const paintColor = layer.paint[propertyName];
+      if (paintColor) {
+        if (typeof paintColor === "string") {
+          return normalizeColor(paintColor);
+        }
+        if (Array.isArray(paintColor)) {
+          const extracted = extractColorFromExpression(paintColor);
+          if (extracted) return extracted;
+        }
+      }
+    }
+  }
+  return null;
+}
+function getLayerColorFromSpec(layer) {
+  const propertyNames = COLOR_PROPERTY_MAP[layer.type];
+  if (!propertyNames) return null;
+  for (const propertyName of propertyNames) {
+    if ("paint" in layer && layer.paint) {
+      const paintColor = layer.paint[propertyName];
+      if (paintColor) {
+        if (typeof paintColor === "string") {
+          return normalizeColor(paintColor);
+        }
+        if (Array.isArray(paintColor)) {
+          const extracted = extractColorFromExpression(paintColor);
+          if (extracted) return extracted;
+        }
+      }
+    }
+  }
+  return null;
+}
+function darkenColor(hexColor, amount) {
+  let hex = hexColor.replace("#", "");
+  if (hex.length === 3) {
+    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+  }
+  const r = Math.max(
+    0,
+    parseInt(hex.slice(0, 2), 16) - Math.round(255 * amount)
+  );
+  const g = Math.max(
+    0,
+    parseInt(hex.slice(2, 4), 16) - Math.round(255 * amount)
+  );
+  const b = Math.max(
+    0,
+    parseInt(hex.slice(4, 6), 16) - Math.round(255 * amount)
+  );
+  return rgbToHex(r, g, b);
+}
+function createFillSymbol(size, color) {
+  const padding = 2;
+  const borderColor = darkenColor(color, 0.3);
+  return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
+    <rect x="${padding}" y="${padding}" width="${size - padding * 2}" height="${size - padding * 2}"
+          fill="${color}" stroke="${borderColor}" stroke-width="1" rx="1"/>
+  </svg>`;
+}
+function createLineSymbol(size, color, strokeWidth = 2) {
+  const y = size / 2;
+  const padding = 2;
+  return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
+    <line x1="${padding}" y1="${y}" x2="${size - padding}" y2="${y}"
+          stroke="${color}" stroke-width="${strokeWidth}" stroke-linecap="round"/>
+  </svg>`;
+}
+function createCircleSymbol(size, color) {
+  const cx = size / 2;
+  const cy = size / 2;
+  const r = size / 2 - 3;
+  const borderColor = darkenColor(color, 0.3);
+  return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="${cx}" cy="${cy}" r="${r}" fill="${color}"
+            stroke="${borderColor}" stroke-width="1"/>
+  </svg>`;
+}
+function createMarkerSymbol(size, color) {
+  const borderColor = darkenColor(color, 0.3);
+  const cx = size / 2;
+  const pinWidth = size * 0.5;
+  const pinHeight = size * 0.7;
+  return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
+    <path d="M${cx} ${size - 2}
+             L${cx - pinWidth / 2} ${size - pinHeight}
+             A${pinWidth / 2} ${pinWidth / 2} 0 1 1 ${cx + pinWidth / 2} ${size - pinHeight}
+             Z"
+          fill="${color}" stroke="${borderColor}" stroke-width="1"/>
+    <circle cx="${cx}" cy="${size - pinHeight - pinWidth / 4}" r="${pinWidth / 5}" fill="white"/>
+  </svg>`;
+}
+function createRasterSymbol(size) {
+  const padding = 2;
+  const id = `rasterGrad_${Math.random().toString(36).slice(2, 9)}`;
+  return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <linearGradient id="${id}" x1="0%" y1="0%" x2="100%" y2="100%">
+        <stop offset="0%" stop-color="#e0e0e0"/>
+        <stop offset="50%" stop-color="#808080"/>
+        <stop offset="100%" stop-color="#404040"/>
+      </linearGradient>
+    </defs>
+    <rect x="${padding}" y="${padding}" width="${size - padding * 2}" height="${size - padding * 2}"
+          fill="url(#${id})" rx="1"/>
+  </svg>`;
+}
+function createBackgroundSymbol(size, color) {
+  return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
+    <rect x="1" y="1" width="${size - 2}" height="${size - 2}" fill="${color}" rx="2"/>
+    <rect x="3" y="3" width="${size - 6}" height="${size - 6}" fill="none"
+          stroke="white" stroke-width="1" stroke-opacity="0.5" rx="1"/>
+  </svg>`;
+}
+function createHeatmapSymbol(size) {
+  const padding = 2;
+  const id = `heatmapGrad_${Math.random().toString(36).slice(2, 9)}`;
+  return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <radialGradient id="${id}" cx="50%" cy="50%" r="50%">
+        <stop offset="0%" stop-color="#ffff00"/>
+        <stop offset="50%" stop-color="#ff8800"/>
+        <stop offset="100%" stop-color="#ff0000"/>
+      </radialGradient>
+    </defs>
+    <rect x="${padding}" y="${padding}" width="${size - padding * 2}" height="${size - padding * 2}"
+          fill="url(#${id})" rx="1"/>
+  </svg>`;
+}
+function createHillshadeSymbol(size) {
+  const padding = 2;
+  const id = `hillshadeGrad_${Math.random().toString(36).slice(2, 9)}`;
+  return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <linearGradient id="${id}" x1="0%" y1="0%" x2="100%" y2="100%">
+        <stop offset="0%" stop-color="#ffffff"/>
+        <stop offset="100%" stop-color="#666666"/>
+      </linearGradient>
+    </defs>
+    <rect x="${padding}" y="${padding}" width="${size - padding * 2}" height="${size - padding * 2}"
+          fill="url(#${id})" rx="1"/>
+  </svg>`;
+}
+function createFillExtrusionSymbol(size, color) {
+  const borderColor = darkenColor(color, 0.3);
+  const topColor = color;
+  const sideColor = darkenColor(color, 0.2);
+  const depth = 3;
+  return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
+    <polygon points="${2 + depth},2 ${size - 2},2 ${size - 2},${size - 2 - depth} ${size - 2 - depth},${size - 2} 2,${size - 2} 2,${2 + depth}"
+             fill="${topColor}" stroke="${borderColor}" stroke-width="1"/>
+    <polygon points="2,${2 + depth} ${2 + depth},2 ${2 + depth},${size - 2 - depth} 2,${size - 2}"
+             fill="${sideColor}" stroke="${borderColor}" stroke-width="0.5"/>
+    <polygon points="${2 + depth},${size - 2 - depth} ${size - 2},${size - 2 - depth} ${size - 2 - depth},${size - 2} 2,${size - 2}"
+             fill="${sideColor}" stroke="${borderColor}" stroke-width="0.5"/>
+  </svg>`;
+}
+function createDefaultSymbol(size, color) {
+  const padding = 2;
+  const borderColor = darkenColor(color, 0.3);
+  return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
+    <rect x="${padding}" y="${padding}" width="${size - padding * 2}" height="${size - padding * 2}"
+          fill="${color}" stroke="${borderColor}" stroke-width="1"/>
+  </svg>`;
+}
+function createCOGSymbol(size, color) {
+  const padding = 2;
+  const borderColor = darkenColor(color, 0.3);
+  const cellSize = (size - padding * 2) / 2;
+  return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
+    <rect x="${padding}" y="${padding}" width="${cellSize}" height="${cellSize}" fill="${color}" stroke="${borderColor}" stroke-width="0.5"/>
+    <rect x="${padding + cellSize}" y="${padding}" width="${cellSize}" height="${cellSize}" fill="${color}" stroke="${borderColor}" stroke-width="0.5" opacity="0.8"/>
+    <rect x="${padding}" y="${padding + cellSize}" width="${cellSize}" height="${cellSize}" fill="${color}" stroke="${borderColor}" stroke-width="0.5" opacity="0.6"/>
+    <rect x="${padding + cellSize}" y="${padding + cellSize}" width="${cellSize}" height="${cellSize}" fill="${color}" stroke="${borderColor}" stroke-width="0.5" opacity="0.4"/>
+  </svg>`;
+}
+function createZarrSymbol(size, color) {
+  const padding = 2;
+  const borderColor = darkenColor(color, 0.3);
+  const innerSize = size - padding * 2;
+  return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
+    <rect x="${padding + 2}" y="${padding}" width="${innerSize - 2}" height="${innerSize - 2}" fill="${darkenColor(color, 0.2)}" stroke="${borderColor}" stroke-width="0.5" rx="1"/>
+    <rect x="${padding + 1}" y="${padding + 1}" width="${innerSize - 2}" height="${innerSize - 2}" fill="${darkenColor(color, 0.1)}" stroke="${borderColor}" stroke-width="0.5" rx="1"/>
+    <rect x="${padding}" y="${padding + 2}" width="${innerSize - 2}" height="${innerSize - 2}" fill="${color}" stroke="${borderColor}" stroke-width="0.5" rx="1"/>
+    <line x1="${padding + 3}" y1="${padding + 5}" x2="${padding + innerSize - 5}" y2="${padding + 5}" stroke="${borderColor}" stroke-width="0.5" opacity="0.5"/>
+    <line x1="${padding + 3}" y1="${padding + 8}" x2="${padding + innerSize - 5}" y2="${padding + 8}" stroke="${borderColor}" stroke-width="0.5" opacity="0.5"/>
+  </svg>`;
+}
+function createCustomRasterSymbol(size, color) {
+  const padding = 2;
+  const borderColor = darkenColor(color, 0.3);
+  const id = `customRasterGrad_${Math.random().toString(36).slice(2, 9)}`;
+  return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <linearGradient id="${id}" x1="0%" y1="0%" x2="100%" y2="100%">
+        <stop offset="0%" stop-color="${color}"/>
+        <stop offset="100%" stop-color="${darkenColor(color, 0.4)}"/>
+      </linearGradient>
+    </defs>
+    <rect x="${padding}" y="${padding}" width="${size - padding * 2}" height="${size - padding * 2}"
+          fill="url(#${id})" stroke="${borderColor}" stroke-width="1" rx="1"/>
+    <line x1="${size / 2}" y1="${padding}" x2="${size / 2}" y2="${size - padding}" stroke="${borderColor}" stroke-width="0.5" opacity="0.3"/>
+    <line x1="${padding}" y1="${size / 2}" x2="${size - padding}" y2="${size / 2}" stroke="${borderColor}" stroke-width="0.5" opacity="0.3"/>
+  </svg>`;
+}
+function createStackedLayersSymbol(size) {
+  const colors = ["#a8d4a8", "#8ec4e8", "#d4c4a8"];
+  const borderColor = "#666666";
+  return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
+    <rect x="4" y="1" width="${size - 6}" height="${size - 6}" fill="${colors[2]}" stroke="${borderColor}" stroke-width="0.75" rx="1"/>
+    <rect x="2" y="3" width="${size - 6}" height="${size - 6}" fill="${colors[1]}" stroke="${borderColor}" stroke-width="0.75" rx="1"/>
+    <rect x="0" y="5" width="${size - 6}" height="${size - 6}" fill="${colors[0]}" stroke="${borderColor}" stroke-width="0.75" rx="1"/>
+  </svg>`;
+}
+function createLayerSymbolSVG(layerType, color, options = {}) {
+  const size = options.size || 16;
+  const strokeWidth = options.strokeWidth || 2;
+  const fillColor = color || "#888888";
+  switch (layerType) {
+    case "fill":
+      return createFillSymbol(size, fillColor);
+    case "line":
+      return createLineSymbol(size, fillColor, strokeWidth);
+    case "circle":
+      return createCircleSymbol(size, fillColor);
+    case "symbol":
+      return createMarkerSymbol(size, fillColor);
+    case "raster":
+      return createRasterSymbol(size);
+    case "background":
+      return createBackgroundSymbol(size, fillColor);
+    case "heatmap":
+      return createHeatmapSymbol(size);
+    case "hillshade":
+      return createHillshadeSymbol(size);
+    case "fill-extrusion":
+      return createFillExtrusionSymbol(size, fillColor);
+    case "background-group":
+      return createStackedLayersSymbol(size);
+    case "cog":
+      return createCOGSymbol(size, fillColor);
+    case "zarr":
+      return createZarrSymbol(size, fillColor);
+    case "custom-raster":
+      return createCustomRasterSymbol(size, fillColor);
+    default:
+      return createDefaultSymbol(size, fillColor);
+  }
+}
+function createBackgroundGroupSymbolSVG(size = 16) {
+  return createStackedLayersSymbol(size);
+}
+class LayerControl {
+  constructor(options = {}) {
+    __publicField(this, "map");
+    __publicField(this, "mapContainer");
+    __publicField(this, "container");
+    __publicField(this, "button");
+    __publicField(this, "panel");
+    // Panel positioning
+    __publicField(this, "resizeHandler", null);
+    __publicField(this, "mapResizeHandler", null);
+    // State management
+    __publicField(this, "state");
+    __publicField(this, "targetLayers");
+    __publicField(this, "styleEditors");
+    __publicField(this, "initialSourceIds", null);
+    __publicField(this, "initialLayerIds", null);
+    // Panel width management
+    __publicField(this, "minPanelWidth");
+    __publicField(this, "maxPanelWidth");
+    __publicField(this, "maxPanelHeight");
+    __publicField(this, "showStyleEditor");
+    __publicField(this, "showOpacitySlider");
+    __publicField(this, "showLayerSymbol");
+    __publicField(this, "excludeDrawnLayers");
+    __publicField(this, "excludeLayerPatterns");
+    __publicField(this, "customLayerRegistry", null);
+    __publicField(this, "customLayerUnsubscribe", null);
+    __publicField(this, "removedCustomLayerIds", /* @__PURE__ */ new Set());
+    __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);
+    // Context menu and drag-drop
+    __publicField(this, "contextMenuEl", null);
+    __publicField(this, "enableContextMenu");
+    __publicField(this, "enableDragAndDrop");
+    __publicField(this, "onLayerRename");
+    __publicField(this, "onLayerReorder");
+    __publicField(this, "onLayerRemove");
+    this.minPanelWidth = options.panelMinWidth || 240;
+    this.maxPanelWidth = options.panelMaxWidth || 420;
+    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.enableContextMenu = options.enableContextMenu !== false;
+    this.enableDragAndDrop = options.enableDragAndDrop !== false;
+    this.onLayerRename = options.onLayerRename;
+    this.onLayerReorder = options.onLayerReorder;
+    this.onLayerRemove = options.onLayerRemove;
+    this.state = {
+      collapsed: options.collapsed !== false,
+      panelWidth: options.panelWidth || 350,
+      activeStyleEditor: null,
+      layerStates: options.layerStates || {},
+      originalStyles: /* @__PURE__ */ new Map(),
+      userInteractingWithSlider: false,
+      backgroundLegendOpen: false,
+      backgroundLayerVisibility: /* @__PURE__ */ new Map(),
+      onlyRenderedFilter: false,
+      contextMenu: {
+        visible: false,
+        targetLayerId: null,
+        x: 0,
+        y: 0
+      },
+      renamingLayerId: null,
+      customLayerNames: /* @__PURE__ */ new Map(),
+      drag: {
+        active: false,
+        layerId: null,
+        startY: 0,
+        currentY: 0,
+        placeholder: null,
+        draggedElement: null
+      },
+      isStyleOperationInProgress: false
+    };
+    this.targetLayers = options.layers || Object.keys(this.state.layerStates);
+    this.styleEditors = /* @__PURE__ */ new Map();
+    if (options.customLayerAdapters && options.customLayerAdapters.length > 0) {
+      this.customLayerRegistry = new CustomLayerRegistry();
+      options.customLayerAdapters.forEach((adapter) => {
+        this.customLayerRegistry.register(adapter);
+      });
+    }
+    this.basemapStyleUrl = options.basemapStyleUrl || null;
+  }
+  /**
+   * Called when the control is added to the map
+   */
+  onAdd(map) {
+    this.map = map;
+    this.mapContainer = map.getContainer();
+    const style = this.map.getStyle();
+    if (style && style.sources) {
+      this.initialSourceIds = new Set(Object.keys(style.sources));
+    } else {
+      this.initialSourceIds = /* @__PURE__ */ new Set();
+    }
+    if (style && style.layers) {
+      this.initialLayerIds = new Set(style.layers.map((layer) => layer.id));
+    } else {
+      this.initialLayerIds = /* @__PURE__ */ new Set();
+    }
+    this.container = this.createContainer();
+    this.button = this.createToggleButton();
+    this.panel = this.createPanel();
+    this.container.appendChild(this.button);
+    this.mapContainer.appendChild(this.panel);
+    if (this.enableContextMenu) {
+      this.contextMenuEl = this.createContextMenu();
+      this.mapContainer.appendChild(this.contextMenuEl);
+    }
+    this.updateWidthDisplay();
+    this.setupEventListeners();
+    if (this.basemapStyleUrl && !this.basemapLayerIds) {
+      this.fetchBasemapStyle().then(() => {
+        if (Object.keys(this.state.layerStates).length === 0) {
+          this.autoDetectLayers();
+        }
+        this.buildLayerItems();
+      }).catch((error) => {
+        console.warn("Failed to fetch basemap style, falling back to heuristic detection:", error);
+        if (Object.keys(this.state.layerStates).length === 0) {
+          this.autoDetectLayers();
+        }
+        this.buildLayerItems();
+      });
+    } else {
+      if (Object.keys(this.state.layerStates).length === 0) {
+        this.autoDetectLayers();
+      }
+      this.buildLayerItems();
+    }
+    if (!this.state.collapsed) {
+      requestAnimationFrame(() => {
+        this.updatePanelPosition();
+      });
+    }
+    return this.container;
+  }
+  /**
+   * Fetch the basemap style JSON and extract layer IDs.
+   * This provides reliable distinction between basemap and user-added layers.
+   */
+  async fetchBasemapStyle() {
+    if (!this.basemapStyleUrl) return;
+    try {
+      const response = await fetch(this.basemapStyleUrl);
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const styleJson = await response.json();
+      if (styleJson && Array.isArray(styleJson.layers)) {
+        this.basemapLayerIds = new Set(
+          styleJson.layers.map((layer) => layer.id)
+        );
+      } else {
+        this.basemapLayerIds = /* @__PURE__ */ new Set();
+      }
+    } catch (error) {
+      console.warn("Failed to fetch basemap style from URL:", this.basemapStyleUrl, error);
+      throw error;
+    }
+  }
+  /**
+   * Called when the control is removed from the map
+   */
+  onRemove() {
+    var _a, _b, _c;
+    if (this.customLayerUnsubscribe) {
+      this.customLayerUnsubscribe();
+      this.customLayerUnsubscribe = null;
+    }
+    if (this.customLayerRegistry) {
+      this.customLayerRegistry.destroy();
+      this.customLayerRegistry = null;
+    }
+    if (this.resizeHandler) {
+      window.removeEventListener("resize", this.resizeHandler);
+      this.resizeHandler = null;
+    }
+    if (this.mapResizeHandler) {
+      this.map.off("resize", this.mapResizeHandler);
+      this.mapResizeHandler = null;
+    }
+    if (this.contextMenuEl) {
+      (_a = this.contextMenuEl.parentNode) == null ? void 0 : _a.removeChild(this.contextMenuEl);
+      this.contextMenuEl = null;
+    }
+    this.cleanupDragState();
+    (_b = this.panel.parentNode) == null ? void 0 : _b.removeChild(this.panel);
+    (_c = this.container.parentNode) == null ? void 0 : _c.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) {
+      const userAddedLayers = [];
+      const backgroundLayerIds = [];
+      const useBasemapStyleDetection = this.basemapLayerIds !== null && this.basemapLayerIds.size > 0;
+      const userAddedSourceIds = useBasemapStyleDetection ? /* @__PURE__ */ new Set() : this.detectUserAddedSources();
+      allLayerIds.forEach((layerId) => {
+        const layer = this.map.getLayer(layerId);
+        if (!layer) return;
+        if (this.excludeDrawnLayers && this.isDrawnLayer(layerId)) {
+          backgroundLayerIds.push(layerId);
+          return;
+        }
+        if (this.isExcludedByPattern(layerId)) {
+          backgroundLayerIds.push(layerId);
+          return;
+        }
+        if (useBasemapStyleDetection) {
+          if (this.basemapLayerIds.has(layerId)) {
+            backgroundLayerIds.push(layerId);
+          } else {
+            userAddedLayers.push(layerId);
+          }
+        } else {
+          const sourceId = layer.source;
+          if (sourceId && userAddedSourceIds.has(sourceId)) {
+            userAddedLayers.push(layerId);
+          } else {
+            backgroundLayerIds.push(layerId);
+          }
+        }
+      });
+      if (backgroundLayerIds.length > 0) {
+        this.state.layerStates["Background"] = {
+          visible: true,
+          opacity: 1,
+          name: "Background"
+        };
+      }
+      userAddedLayers.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.isExcludedByPattern(layerId)) {
+          basemapLayers.push(layerId);
+          return;
+        }
+        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
+        };
+      });
+    }
+    if (this.customLayerRegistry) {
+      const customLayerIds = this.customLayerRegistry.getAllLayerIds();
+      customLayerIds.forEach((layerId) => {
+        if (this.state.layerStates[layerId]) return;
+        const customState = this.customLayerRegistry.getLayerState(layerId);
+        if (customState) {
+          this.state.layerStates[layerId] = {
+            visible: customState.visible,
+            opacity: customState.opacity,
+            name: customState.name,
+            isCustomLayer: true,
+            customLayerType: this.customLayerRegistry.getSymbolType(layerId) || void 0
+          };
+        }
+      });
+    }
+    this.targetLayers = Object.keys(this.state.layerStates);
+  }
+  /**
+   * Detect which sources are user-added (not from the basemap style)
+   * User-added sources are identified by:
+   * - Sources that were NOT present when the control was first added
+   * - Additionally for sources added later:
+   *   - GeoJSON sources with inline data objects (not URL strings)
+   *   - Image, video, canvas sources
+   *   - Raster, raster-dem, vector sources from non-basemap tile providers
+   */
+  detectUserAddedSources() {
+    const userAddedSources = /* @__PURE__ */ new Set();
+    const style = this.map.getStyle();
+    if (!style || !style.sources) return userAddedSources;
+    const basemapDomains = /* @__PURE__ */ new Set();
+    const knownBasemapProviders = [
+      "demotiles.maplibre.org",
+      "api.maptiler.com",
+      "tiles.stadiamaps.com",
+      "api.mapbox.com",
+      "basemaps.cartocdn.com",
+      "tiles.mapbox.com",
+      "a.basemaps.cartocdn.com",
+      "b.basemaps.cartocdn.com",
+      "c.basemaps.cartocdn.com",
+      "d.basemaps.cartocdn.com",
+      "tiles.arcgis.com",
+      "server.arcgisonline.com",
+      "services.arcgisonline.com"
+    ];
+    const spriteUrl = style.sprite;
+    if (spriteUrl && typeof spriteUrl === "string") {
+      try {
+        const url = new URL(spriteUrl);
+        basemapDomains.add(url.hostname);
+      } catch {
+      }
+    }
+    if (style.glyphs) {
+      try {
+        const url = new URL(style.glyphs.replace("{fontstack}", "x").replace("{range}", "x"));
+        basemapDomains.add(url.hostname);
+      } catch {
+      }
+    }
+    for (const [sourceId, source] of Object.entries(style.sources)) {
+      if (this.initialSourceIds && this.initialSourceIds.has(sourceId)) {
+        continue;
+      }
+      const src = source;
+      const sourceType = src.type;
+      if (sourceType === "image" || sourceType === "video" || sourceType === "canvas") {
+        userAddedSources.add(sourceId);
+        continue;
+      }
+      if (sourceType === "geojson") {
+        if (src.data && typeof src.data === "object") {
+          userAddedSources.add(sourceId);
+        } else if (src.data && typeof src.data === "string") {
+          try {
+            const url = new URL(src.data);
+            const isBasemap = knownBasemapProviders.some((p) => url.hostname.includes(p)) || basemapDomains.has(url.hostname);
+            if (!isBasemap) {
+              userAddedSources.add(sourceId);
+            }
+          } catch {
+            userAddedSources.add(sourceId);
+          }
+        }
+        continue;
+      }
+      if (sourceType === "raster" || sourceType === "raster-dem" || sourceType === "vector") {
+        const tileUrl = src.url || src.tiles && src.tiles[0] || "";
+        if (tileUrl) {
+          try {
+            const url = new URL(tileUrl.replace(/{[^}]+}/g, "0"));
+            const hostname = url.hostname;
+            const isKnownBasemap = knownBasemapProviders.some(
+              (provider) => hostname === provider || hostname.endsWith("." + provider)
+            );
+            const matchesBasemapDomain = basemapDomains.has(hostname);
+            if (!isKnownBasemap && !matchesBasemapDomain) {
+              userAddedSources.add(sourceId);
+            }
+          } catch {
+            userAddedSources.add(sourceId);
+          }
+        }
+      }
+    }
+    return userAddedSources;
+  }
+  /**
+   * 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;
+  }
+  /**
+   * Check if a layer ID belongs to a drawing library (Geoman, Mapbox GL Draw, etc.)
+   * @param layerId The layer ID to check
+   * @returns true if the layer is from a drawing library
+   */
+  isDrawnLayer(layerId) {
+    const drawnLayerPatterns = [
+      // Drawing libraries
+      /^gm[-_\s]/i,
+      // Geoman (gm-main-*, gm_*, Gm Temporary...)
+      /^gl-draw[-_]/i,
+      // Mapbox GL Draw
+      /^mapbox-gl-draw[-_]/i,
+      // Mapbox GL Draw alternative
+      /^terra-draw[-_]/i,
+      // Terra Draw
+      /^maplibre-gl-draw[-_]/i,
+      // MapLibre GL Draw
+      /^draw[-_]layer/i,
+      // Generic draw layers
+      // maplibre-gl-components internal layers
+      /^measure-/i,
+      // MeasureControl (measure-{id}-fill, measure-{id}-line)
+      /^pmtiles-source-/i,
+      // PMTilesLayerControl (managed via adapter)
+      /^stac-search-footprints/i
+      // StacSearchControl footprint layers
+    ];
+    return drawnLayerPatterns.some((pattern) => pattern.test(layerId));
+  }
+  /**
+   * Convert wildcard patterns (e.g., '*-temp-*', 'debug-*') to RegExp objects
+   */
+  wildcardPatternsToRegex(patterns) {
+    return patterns.map((pattern) => {
+      const escaped = pattern.replace(/[.+?^${}()|[\]\\]/g, "\\$&");
+      const regexStr = escaped.replace(/\*/g, ".*");
+      return new RegExp(`^${regexStr}$`, "i");
+    });
+  }
+  /**
+   * Check if a layer matches any of the user-defined exclusion patterns
+   */
+  isExcludedByPattern(layerId) {
+    return this.excludeLayerPatterns.some((pattern) => pattern.test(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`;
+    panel.style.maxHeight = `${this.maxPanelHeight}px`;
+    if (!this.state.collapsed) {
+      panel.classList.add("expanded");
+    }
+    const header = this.createPanelHeader();
+    panel.appendChild(header);
+    const actionButtons = this.createActionButtons();
+    panel.appendChild(actionButtons);
+    return panel;
+  }
+  /**
+   * Detect which corner the control is positioned in
+   * @returns The position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+   */
+  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";
+    return "top-right";
+  }
+  /**
+   * Update the panel position based on button location and control corner
+   * Positions the panel next to the button, expanding in the appropriate direction
+   */
+  updatePanelPosition() {
+    if (!this.button || !this.panel || !this.mapContainer) return;
+    const buttonRect = this.button.getBoundingClientRect();
+    const mapRect = this.mapContainer.getBoundingClientRect();
+    const position = this.getControlPosition();
+    const buttonTop = buttonRect.top - mapRect.top;
+    const buttonBottom = mapRect.bottom - buttonRect.bottom;
+    const buttonLeft = buttonRect.left - mapRect.left;
+    const buttonRight = mapRect.right - buttonRect.right;
+    const panelGap = 5;
+    this.panel.style.top = "";
+    this.panel.style.bottom = "";
+    this.panel.style.left = "";
+    this.panel.style.right = "";
+    switch (position) {
+      case "top-left":
+        this.panel.style.top = `${buttonTop + buttonRect.height + panelGap}px`;
+        this.panel.style.left = `${buttonLeft}px`;
+        break;
+      case "top-right":
+        this.panel.style.top = `${buttonTop + buttonRect.height + panelGap}px`;
+        this.panel.style.right = `${buttonRight}px`;
+        break;
+      case "bottom-left":
+        this.panel.style.bottom = `${buttonBottom + buttonRect.height + panelGap}px`;
+        this.panel.style.left = `${buttonLeft}px`;
+        break;
+      case "bottom-right":
+        this.panel.style.bottom = `${buttonBottom + buttonRect.height + panelGap}px`;
+        this.panel.style.right = `${buttonRight}px`;
+        break;
+    }
+  }
+  /**
+   * Create action buttons for Show All / Hide All
+   */
+  createActionButtons() {
+    const container = document.createElement("div");
+    container.className = "layer-control-actions";
+    const showAllBtn = document.createElement("button");
+    showAllBtn.type = "button";
+    showAllBtn.className = "layer-control-action-btn";
+    showAllBtn.textContent = "Show All";
+    showAllBtn.title = "Show all layers";
+    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));
+    container.appendChild(showAllBtn);
+    container.appendChild(hideAllBtn);
+    return container;
+  }
+  /**
+   * Set visibility of all layers
+   */
+  setAllLayersVisibility(visible) {
+    Object.keys(this.state.layerStates).forEach((layerId) => {
+      this.toggleLayerVisibility(layerId, visible);
+      const itemEl = this.panel.querySelector(`[data-layer-id="${layerId}"]`);
+      if (itemEl) {
+        const checkbox = itemEl.querySelector(".layer-control-checkbox");
+        if (checkbox) {
+          checkbox.checked = visible;
+          checkbox.indeterminate = false;
+        }
+      }
+    });
+  }
+  /**
+   * 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;
+        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
+   */
+  setupEventListeners() {
+    this.button.addEventListener("click", () => this.toggle());
+    document.addEventListener("click", (e) => {
+      const target = e.target;
+      if (this.contextMenuEl && this.state.contextMenu.visible) {
+        if (!this.contextMenuEl.contains(target)) {
+          this.hideContextMenu();
+        }
+      }
+      if (!this.container.contains(target) && !this.panel.contains(target)) {
+        this.collapse();
+      }
+    });
+    this.resizeHandler = () => {
+      if (!this.state.collapsed) {
+        this.updatePanelPosition();
+      }
+    };
+    window.addEventListener("resize", this.resizeHandler);
+    this.mapResizeHandler = () => {
+      if (!this.state.collapsed) {
+        this.updatePanelPosition();
+      }
+    };
+    this.map.on("resize", this.mapResizeHandler);
+    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);
+      }
+    });
+    if (this.customLayerRegistry) {
+      this.customLayerUnsubscribe = this.customLayerRegistry.onChange((event, layerId) => {
+        if (event === "add" && layerId) {
+          this.removedCustomLayerIds.delete(layerId);
+        }
+        setTimeout(() => this.checkForNewLayers(), 100);
+      });
+    }
+  }
+  /**
+   * 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");
+    this.updatePanelPosition();
+  }
+  /**
+   * 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";
+    if (this.enableDragAndDrop) {
+      if (layerId === "Background") {
+        const disabledHandle = this.createDisabledDragHandle();
+        row.appendChild(disabledHandle);
+      } else {
+        const dragHandle = this.createDragHandle(layerId);
+        row.appendChild(dragHandle);
+      }
+    }
+    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 displayName = this.state.customLayerNames.get(layerId) || state.name || layerId;
+    const name = document.createElement("span");
+    name.className = "layer-control-name";
+    name.textContent = displayName;
+    name.title = displayName;
+    row.appendChild(checkbox);
+    if (this.showLayerSymbol) {
+      if (layerId === "Background") {
+        const symbol = this.createBackgroundGroupSymbol();
+        row.appendChild(symbol);
+      } else {
+        const symbol = this.createLayerSymbol(layerId);
+        if (symbol) {
+          row.appendChild(symbol);
+        }
+      }
+    }
+    row.appendChild(name);
+    if (this.showOpacitySlider) {
+      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(opacity);
+    }
+    if (this.showStyleEditor) {
+      if (layerId === "Background") {
+        const legendButton = this.createBackgroundLegendButton();
+        row.appendChild(legendButton);
+      } else {
+        const styleButton = this.createStyleButton(layerId);
+        if (styleButton) {
+          row.appendChild(styleButton);
+        }
+      }
+    }
+    item.appendChild(row);
+    if (this.enableContextMenu && layerId !== "Background") {
+      row.addEventListener("contextmenu", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.showContextMenu(layerId, e.clientX, e.clientY);
+      });
+    }
+    this.panel.appendChild(item);
+  }
+  /**
+   * Create a symbol element for a layer
+   * @param layerId The layer ID
+   * @returns The symbol HTML element, or null if layer not found
+   */
+  createLayerSymbol(layerId) {
+    const layerState = this.state.layerStates[layerId];
+    if (layerState == null ? void 0 : layerState.isCustomLayer) {
+      const symbolType = layerState.customLayerType || "custom-raster";
+      const color2 = "#4a90d9";
+      const svgMarkup2 = createLayerSymbolSVG(symbolType, color2);
+      const symbolContainer2 = document.createElement("span");
+      symbolContainer2.className = "layer-control-symbol";
+      symbolContainer2.innerHTML = svgMarkup2;
+      symbolContainer2.title = `Layer type: ${symbolType}`;
+      return symbolContainer2;
+    }
+    const layer = this.map.getLayer(layerId);
+    if (!layer) return null;
+    const layerType = layer.type;
+    const color = getLayerColor(this.map, layerId, layerType);
+    const svgMarkup = createLayerSymbolSVG(layerType, color);
+    const symbolContainer = document.createElement("span");
+    symbolContainer.className = "layer-control-symbol";
+    symbolContainer.innerHTML = svgMarkup;
+    symbolContainer.title = `Layer type: ${layerType}`;
+    return symbolContainer;
+  }
+  /**
+   * Create a symbol element for a background layer
+   * @param layer The layer specification
+   * @returns The symbol HTML element
+   */
+  createBackgroundLayerSymbol(layer) {
+    const color = getLayerColorFromSpec(layer);
+    const svgMarkup = createLayerSymbolSVG(layer.type, color, { size: 14 });
+    const symbolContainer = document.createElement("span");
+    symbolContainer.className = "background-legend-layer-symbol";
+    symbolContainer.innerHTML = svgMarkup;
+    symbolContainer.title = `Layer type: ${layer.type}`;
+    return symbolContainer;
+  }
+  /**
+   * Create a symbol element for the Background layer group
+   * Shows a stacked layers icon to represent multiple background layers
+   * @returns The symbol HTML element
+   */
+  createBackgroundGroupSymbol() {
+    const svgMarkup = createBackgroundGroupSymbolSVG(16);
+    const symbolContainer = document.createElement("span");
+    symbolContainer.className = "layer-control-symbol";
+    symbolContainer.innerHTML = svgMarkup;
+    symbolContainer.title = "Background layers";
+    return symbolContainer;
+  }
+  /**
+   * Toggle layer visibility
+   */
+  toggleLayerVisibility(layerId, visible) {
+    var _a;
+    if (layerId === "Background") {
+      this.toggleBackgroundVisibility(visible);
+      return;
+    }
+    this.state.isStyleOperationInProgress = true;
+    if (this.state.layerStates[layerId]) {
+      this.state.layerStates[layerId].visible = visible;
+    }
+    if ((_a = this.customLayerRegistry) == null ? void 0 : _a.setVisibility(layerId, visible)) {
+      setTimeout(() => {
+        this.state.isStyleOperationInProgress = false;
+      }, 200);
+      return;
+    }
+    this.map.setLayoutProperty(layerId, "visibility", visible ? "visible" : "none");
+    setTimeout(() => {
+      this.state.isStyleOperationInProgress = false;
+    }, 200);
+  }
+  /**
+   * Change layer opacity
+   */
+  changeLayerOpacity(layerId, opacity) {
+    var _a;
+    if (layerId === "Background") {
+      this.changeBackgroundOpacity(opacity);
+      return;
+    }
+    this.state.isStyleOperationInProgress = true;
+    if (this.state.layerStates[layerId]) {
+      this.state.layerStates[layerId].opacity = opacity;
+    }
+    if ((_a = this.customLayerRegistry) == null ? void 0 : _a.setOpacity(layerId, opacity)) {
+      setTimeout(() => {
+        this.state.isStyleOperationInProgress = false;
+      }, 200);
+      return;
+    }
+    const layerType = getLayerType(this.map, layerId);
+    if (layerType) {
+      setLayerOpacity(this.map, layerId, layerType, opacity);
+    }
+    setTimeout(() => {
+      this.state.isStyleOperationInProgress = false;
+    }, 200);
+  }
+  /**
+   * Check if a layer is a user-added layer (vs basemap layer)
+   * Used primarily for the background legend to determine which layers are background
+   */
+  isUserAddedLayer(layerId) {
+    if (this.state.layerStates[layerId] !== void 0 && layerId !== "Background") {
+      return true;
+    }
+    if (this.basemapLayerIds !== null && this.basemapLayerIds.size > 0) {
+      return !this.basemapLayerIds.has(layerId);
+    }
+    if (this.initialLayerIds !== null && !this.initialLayerIds.has(layerId)) {
+      return true;
+    }
+    const layer = this.map.getLayer(layerId);
+    if (layer) {
+      const sourceId = layer.source;
+      if (sourceId) {
+        const userAddedSourceIds = this.detectUserAddedSources();
+        return userAddedSourceIds.has(sourceId);
+      }
+    }
+    return false;
+  }
+  /**
+   * 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.state.backgroundLayerVisibility.set(layer.id, visible);
+        this.map.setLayoutProperty(layer.id, "visibility", visible ? "visible" : "none");
+      }
+    });
+    if (this.state.backgroundLegendOpen) {
+      const legendPanel = this.panel.querySelector(".layer-control-background-legend");
+      if (legendPanel) {
+        const checkboxes = legendPanel.querySelectorAll(".background-legend-checkbox");
+        checkboxes.forEach((checkbox) => {
+          checkbox.checked = visible;
+        });
+      }
+    }
+  }
+  /**
+   * 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);
+        }
+      }
+    });
+  }
+  // ===== Background Legend Methods =====
+  /**
+   * Create legend button for Background layer
+   */
+  createBackgroundLegendButton() {
+    const button = document.createElement("button");
+    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.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.toggleBackgroundLegend();
+    });
+    return button;
+  }
+  /**
+   * Toggle background legend panel visibility
+   */
+  toggleBackgroundLegend() {
+    if (this.state.backgroundLegendOpen) {
+      this.closeBackgroundLegend();
+    } else {
+      this.openBackgroundLegend();
+    }
+  }
+  /**
+   * Open background legend panel
+   */
+  openBackgroundLegend() {
+    if (this.state.activeStyleEditor) {
+      this.closeStyleEditor(this.state.activeStyleEditor);
+    }
+    const itemEl = this.panel.querySelector('[data-layer-id="Background"]');
+    if (!itemEl) return;
+    let legendPanel = itemEl.querySelector(".layer-control-background-legend");
+    if (legendPanel) {
+      const layerList = legendPanel.querySelector(".background-legend-layer-list");
+      if (layerList) {
+        this.populateBackgroundLayerList(layerList);
+      }
+    } else {
+      legendPanel = this.createBackgroundLegendPanel();
+      itemEl.appendChild(legendPanel);
+    }
+    this.state.backgroundLegendOpen = true;
+    const button = itemEl.querySelector(".layer-control-background-legend-button");
+    if (button) {
+      button.setAttribute("aria-expanded", "true");
+      button.classList.add("active");
+    }
+    setTimeout(() => {
+      legendPanel == null ? void 0 : legendPanel.scrollIntoView({ behavior: "smooth", block: "nearest" });
+    }, 50);
+  }
+  /**
+   * Close background legend panel
+   */
+  closeBackgroundLegend() {
+    const itemEl = this.panel.querySelector('[data-layer-id="Background"]');
+    if (!itemEl) return;
+    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");
+    if (button) {
+      button.setAttribute("aria-expanded", "false");
+      button.classList.remove("active");
+    }
+  }
+  /**
+   * Create the background legend panel with individual layer controls
+   */
+  createBackgroundLegendPanel() {
+    const panel = document.createElement("div");
+    panel.className = "layer-control-background-legend";
+    const header = document.createElement("div");
+    header.className = "background-legend-header";
+    const title = document.createElement("span");
+    title.className = "background-legend-title";
+    title.textContent = "Background Layers";
+    const closeBtn = document.createElement("button");
+    closeBtn.className = "background-legend-close";
+    closeBtn.innerHTML = "&times;";
+    closeBtn.title = "Close";
+    closeBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.closeBackgroundLegend();
+    });
+    header.appendChild(title);
+    header.appendChild(closeBtn);
+    const actionsRow = document.createElement("div");
+    actionsRow.className = "background-legend-actions";
+    const showAllBtn = document.createElement("button");
+    showAllBtn.className = "background-legend-action-btn";
+    showAllBtn.textContent = "Show All";
+    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));
+    actionsRow.appendChild(showAllBtn);
+    actionsRow.appendChild(hideAllBtn);
+    const filterRow = document.createElement("div");
+    filterRow.className = "background-legend-filter";
+    const filterCheckbox = document.createElement("input");
+    filterCheckbox.type = "checkbox";
+    filterCheckbox.className = "background-legend-filter-checkbox";
+    filterCheckbox.id = "background-legend-only-rendered";
+    filterCheckbox.checked = this.state.onlyRenderedFilter;
+    filterCheckbox.addEventListener("change", () => {
+      this.state.onlyRenderedFilter = filterCheckbox.checked;
+      const layerList2 = panel.querySelector(".background-legend-layer-list");
+      if (layerList2) {
+        this.populateBackgroundLayerList(layerList2);
+      }
+    });
+    const filterLabel = document.createElement("label");
+    filterLabel.className = "background-legend-filter-label";
+    filterLabel.htmlFor = "background-legend-only-rendered";
+    filterLabel.textContent = "Only rendered";
+    filterRow.appendChild(filterCheckbox);
+    filterRow.appendChild(filterLabel);
+    const layerList = document.createElement("div");
+    layerList.className = "background-legend-layer-list";
+    this.populateBackgroundLayerList(layerList);
+    panel.appendChild(header);
+    panel.appendChild(actionsRow);
+    panel.appendChild(filterRow);
+    panel.appendChild(layerList);
+    return panel;
+  }
+  /**
+   * Check if a layer is currently rendered in the map viewport
+   */
+  isLayerRendered(layerId) {
+    try {
+      const layer = this.map.getLayer(layerId);
+      if (!layer) return false;
+      const visibility = this.map.getLayoutProperty(layerId, "visibility");
+      if (visibility === "none") return false;
+      if (layer.type === "raster" || layer.type === "hillshade") {
+        return true;
+      }
+      if (layer.type === "background") {
+        return true;
+      }
+      const features = this.map.queryRenderedFeatures({ layers: [layerId] });
+      return features.length > 0;
+    } catch (error) {
+      return true;
+    }
+  }
+  /**
+   * Populate the background layer list with individual layers
+   */
+  populateBackgroundLayerList(container) {
+    container.innerHTML = "";
+    const styleLayers = this.map.getStyle().layers || [];
+    styleLayers.forEach((layer) => {
+      if (!this.isUserAddedLayer(layer.id)) {
+        if (this.excludeDrawnLayers && this.isDrawnLayer(layer.id)) {
+          return;
+        }
+        if (this.isExcludedByPattern(layer.id)) {
+          return;
+        }
+        if (this.state.onlyRenderedFilter && !this.isLayerRendered(layer.id)) {
+          return;
+        }
+        const layerRow = document.createElement("div");
+        layerRow.className = "background-legend-layer-row";
+        layerRow.setAttribute("data-background-layer-id", layer.id);
+        const checkbox = document.createElement("input");
+        checkbox.type = "checkbox";
+        checkbox.className = "background-legend-checkbox";
+        const visibility = this.map.getLayoutProperty(layer.id, "visibility");
+        const isVisible = visibility !== "none";
+        checkbox.checked = isVisible;
+        this.state.backgroundLayerVisibility.set(layer.id, isVisible);
+        checkbox.addEventListener("change", () => {
+          this.toggleIndividualBackgroundLayer(layer.id, checkbox.checked);
+        });
+        const name = document.createElement("span");
+        name.className = "background-legend-layer-name";
+        name.textContent = this.generateFriendlyName(layer.id);
+        name.title = layer.id;
+        const typeIndicator = document.createElement("span");
+        typeIndicator.className = "background-legend-layer-type";
+        typeIndicator.textContent = layer.type;
+        layerRow.appendChild(checkbox);
+        if (this.showLayerSymbol) {
+          const symbol = this.createBackgroundLayerSymbol(layer);
+          if (symbol) {
+            layerRow.appendChild(symbol);
+          }
+        }
+        layerRow.appendChild(name);
+        layerRow.appendChild(typeIndicator);
+        container.appendChild(layerRow);
+      }
+    });
+    if (container.children.length === 0) {
+      const emptyMsg = document.createElement("p");
+      emptyMsg.className = "background-legend-empty";
+      emptyMsg.textContent = this.state.onlyRenderedFilter ? "No rendered layers in current view." : "No background layers found.";
+      container.appendChild(emptyMsg);
+    }
+  }
+  /**
+   * Toggle visibility of an individual background layer
+   */
+  toggleIndividualBackgroundLayer(layerId, visible) {
+    this.state.backgroundLayerVisibility.set(layerId, visible);
+    this.map.setLayoutProperty(layerId, "visibility", visible ? "visible" : "none");
+    this.updateBackgroundCheckboxState();
+  }
+  /**
+   * Set visibility for all background layers
+   */
+  setAllBackgroundLayersVisibility(visible) {
+    const styleLayers = this.map.getStyle().layers || [];
+    styleLayers.forEach((layer) => {
+      if (!this.isUserAddedLayer(layer.id)) {
+        this.state.backgroundLayerVisibility.set(layer.id, visible);
+        this.map.setLayoutProperty(layer.id, "visibility", visible ? "visible" : "none");
+      }
+    });
+    const legendPanel = this.panel.querySelector(".layer-control-background-legend");
+    if (legendPanel) {
+      const checkboxes = legendPanel.querySelectorAll(".background-legend-checkbox");
+      checkboxes.forEach((checkbox) => {
+        checkbox.checked = visible;
+      });
+    }
+    this.updateBackgroundCheckboxState();
+  }
+  /**
+   * Update the main Background checkbox based on individual layer states
+   */
+  updateBackgroundCheckboxState() {
+    const styleLayers = this.map.getStyle().layers || [];
+    let anyVisible = false;
+    let allVisible = true;
+    styleLayers.forEach((layer) => {
+      if (!this.isUserAddedLayer(layer.id)) {
+        const visible = this.state.backgroundLayerVisibility.get(layer.id);
+        if (visible === true) anyVisible = true;
+        if (visible === false) allVisible = false;
+      }
+    });
+    const backgroundItem = this.panel.querySelector('[data-layer-id="Background"]');
+    if (backgroundItem) {
+      const checkbox = backgroundItem.querySelector(".layer-control-checkbox");
+      if (checkbox) {
+        checkbox.checked = anyVisible;
+        checkbox.indeterminate = anyVisible && !allVisible;
+      }
+    }
+    if (this.state.layerStates["Background"]) {
+      this.state.layerStates["Background"].visible = anyVisible;
+    }
+  }
+  /**
+   * Create style button for a layer
+   */
+  createStyleButton(layerId) {
+    if (layerId === "Background") {
+      return null;
+    }
+    const layerState = this.state.layerStates[layerId];
+    const isCustomLayer = (layerState == null ? void 0 : layerState.isCustomLayer) === true;
+    const button = document.createElement("button");
+    button.className = "layer-control-style-button";
+    button.innerHTML = "&#9881;";
+    if (isCustomLayer) {
+      button.title = "Layer info (style editing not available)";
+      button.setAttribute("aria-label", `Layer info for ${layerId}`);
+    } else {
+      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) {
+    var _a;
+    const itemEl = this.panel.querySelector(`[data-layer-id="${layerId}"]`);
+    if (!itemEl) return;
+    const layerState = this.state.layerStates[layerId];
+    if (layerState == null ? void 0 : layerState.isCustomLayer) {
+      const nativeLayerIds = (_a = this.customLayerRegistry) == null ? void 0 : _a.getNativeLayerIds(layerId);
+      if (nativeLayerIds && nativeLayerIds.length > 0) {
+        for (const nativeId of nativeLayerIds) {
+          if (!this.state.originalStyles.has(nativeId)) {
+            const nativeLayer = this.map.getLayer(nativeId);
+            if (nativeLayer) {
+              cacheOriginalLayerStyle(this.map, nativeId, this.state.originalStyles);
+            }
+          }
+        }
+        const editor3 = this.createNativeSubLayerStyleEditor(layerId, nativeLayerIds);
+        if (editor3) {
+          itemEl.appendChild(editor3);
+          this.styleEditors.set(layerId, editor3);
+          this.state.activeStyleEditor = layerId;
+          setTimeout(() => {
+            editor3.scrollIntoView({ behavior: "smooth", block: "nearest" });
+          }, 50);
+          return;
+        }
+      }
+      const editor2 = this.createCustomLayerInfoPanel(layerId);
+      itemEl.appendChild(editor2);
+      this.styleEditors.set(layerId, editor2);
+      this.state.activeStyleEditor = layerId;
+      setTimeout(() => {
+        editor2.scrollIntoView({ behavior: "smooth", block: "nearest" });
+      }, 50);
+      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);
+  }
+  /**
+   * Create info panel for custom layers (style editing not supported)
+   */
+  createCustomLayerInfoPanel(layerId) {
+    const editor = document.createElement("div");
+    editor.className = "layer-control-style-editor layer-control-custom-info";
+    const header = document.createElement("div");
+    header.className = "style-editor-header";
+    const title = document.createElement("span");
+    title.className = "style-editor-title";
+    title.textContent = "Layer Info";
+    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 content = document.createElement("div");
+    content.className = "style-editor-controls";
+    const infoText = document.createElement("p");
+    infoText.className = "layer-control-custom-info-text";
+    infoText.textContent = `This is a custom layer. Style editing is not available for this layer type. Use the visibility toggle and opacity slider to control the layer.`;
+    content.appendChild(infoText);
+    const actions = document.createElement("div");
+    actions.className = "style-editor-actions";
+    const removeBtn = document.createElement("button");
+    removeBtn.className = "style-editor-button style-editor-button-remove";
+    removeBtn.textContent = "Remove";
+    removeBtn.title = "Remove layer from map";
+    removeBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      if (confirm("Are you sure you want to remove this layer?")) {
+        this.closeStyleEditor(layerId);
+        this.removeLayer(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(removeBtn);
+    actions.appendChild(closeActionBtn);
+    editor.appendChild(header);
+    editor.appendChild(content);
+    editor.appendChild(actions);
+    return editor;
+  }
+  /**
+   * Create a combined style editor for custom layers with native MapLibre sublayers.
+   * Groups controls by sublayer type (fill, line, circle, etc.).
+   */
+  createNativeSubLayerStyleEditor(layerId, nativeLayerIds) {
+    const layersByType = /* @__PURE__ */ new Map();
+    for (const nativeId of nativeLayerIds) {
+      const layer = this.map.getLayer(nativeId);
+      if (layer) {
+        const type = layer.type;
+        if (!layersByType.has(type)) {
+          layersByType.set(type, []);
+        }
+        layersByType.get(type).push(nativeId);
+      }
+    }
+    if (layersByType.size === 0) 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);
+    editor.appendChild(header);
+    const controls = document.createElement("div");
+    controls.className = "style-editor-controls";
+    const typeLabels = {
+      fill: "Fill",
+      line: "Line",
+      circle: "Circle",
+      symbol: "Symbol",
+      raster: "Raster"
+    };
+    for (const [type, ids] of layersByType) {
+      if (layersByType.size > 1) {
+        const sectionHeader = document.createElement("div");
+        sectionHeader.className = "style-editor-section-header";
+        sectionHeader.textContent = typeLabels[type] || type;
+        controls.appendChild(sectionHeader);
+      }
+      const primaryId = ids[0];
+      this.addStyleControlsForNativeGroup(controls, ids, primaryId, type);
+    }
+    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();
+      for (const nativeId of nativeLayerIds) {
+        restoreOriginalStyle(this.map, nativeId, this.state.originalStyles);
+      }
+      this.closeStyleEditor(layerId);
+      this.openStyleEditor(layerId);
+    });
+    const removeBtn = document.createElement("button");
+    removeBtn.className = "style-editor-button style-editor-button-remove";
+    removeBtn.textContent = "Remove";
+    removeBtn.title = "Remove layer from map";
+    removeBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      if (confirm("Are you sure you want to remove this layer?")) {
+        this.closeStyleEditor(layerId);
+        this.removeLayer(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(removeBtn);
+    actions.appendChild(closeActionBtn);
+    editor.appendChild(controls);
+    editor.appendChild(actions);
+    return editor;
+  }
+  /**
+   * Add style controls for a group of native layers of the same type.
+   * Changes to any control are applied to all layers in the group.
+   */
+  addStyleControlsForNativeGroup(container, layerIds, primaryLayerId, layerType) {
+    this.nativeLayerGroups.set(primaryLayerId, layerIds);
+    this.addStyleControlsForLayerType(container, primaryLayerId, layerType);
+  }
+  /**
+   * Close style editor for a layer
+   */
+  closeStyleEditor(layerId) {
+    const editor = this.styleEditors.get(layerId);
+    if (editor) {
+      editor.remove();
+      this.styleEditors.delete(layerId);
+    }
+    this.nativeLayerGroups.clear();
+    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 removeBtn = document.createElement("button");
+    removeBtn.className = "style-editor-button style-editor-button-remove";
+    removeBtn.textContent = "Remove";
+    removeBtn.title = "Remove layer from map";
+    removeBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      if (confirm("Are you sure you want to remove this layer?")) {
+        this.closeStyleEditor(layerId);
+        this.removeLayer(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(removeBtn);
+    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, 350, 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;
+      const targetIds = this.nativeLayerGroups.get(layerId) || [layerId];
+      for (const id of targetIds) {
+        this.map.setPaintProperty(id, 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);
+      const targetIds = this.nativeLayerGroups.get(layerId) || [layerId];
+      for (const id of targetIds) {
+        this.map.setPaintProperty(id, 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) => {
+      var _a;
+      try {
+        if ((_a = this.state.layerStates[layerId]) == null ? void 0 : _a.isCustomLayer) {
+          return;
+        }
+        if (layerId === "Background") {
+          return;
+        }
+        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, remove deleted layers
+   */
+  checkForNewLayers() {
+    if (this.state.isStyleOperationInProgress) {
+      return;
+    }
+    try {
+      const style = this.map.getStyle();
+      if (!style || !style.layers) {
+        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 newLayers = [];
+      const useBasemapStyleDetection = this.basemapLayerIds !== null && this.basemapLayerIds.size > 0;
+      const useInitialLayerDetection = !useBasemapStyleDetection && this.initialLayerIds !== null && this.initialLayerIds.size > 0;
+      currentMapLayerIds.forEach((layerId) => {
+        if (layerId !== "Background" && !this.state.layerStates[layerId]) {
+          const layer = this.map.getLayer(layerId);
+          if (layer) {
+            if (this.initialLayerIds !== null && this.initialLayerIds.has(layerId)) {
+              return;
+            }
+            if (isAutoDetectMode) {
+              if (this.excludeDrawnLayers && this.isDrawnLayer(layerId)) {
+                return;
+              }
+              if (this.isExcludedByPattern(layerId)) {
+                return;
+              }
+              if (!this.isUserAddedLayer(layerId)) {
+                return;
+              }
+              if (useBasemapStyleDetection) {
+                if (this.basemapLayerIds.has(layerId)) {
+                  return;
+                }
+              } else if (useInitialLayerDetection) {
+                if (this.initialLayerIds.has(layerId)) {
+                  const userAddedSourceIds = this.detectUserAddedSources();
+                  const sourceId = layer.source;
+                  if (!sourceId || !userAddedSourceIds.has(sourceId)) {
+                    return;
+                  }
+                }
+              } else {
+                const userAddedSourceIds = this.detectUserAddedSources();
+                const sourceId = layer.source;
+                if (!sourceId || !userAddedSourceIds.has(sourceId)) {
+                  return;
+                }
+              }
+            }
+            newLayers.push(layerId);
+          }
+        }
+      });
+      const removedLayers = [];
+      Object.keys(this.state.layerStates).forEach((layerId) => {
+        const state = this.state.layerStates[layerId];
+        if (layerId !== "Background" && !state.isCustomLayer && !currentMapLayerIds.has(layerId)) {
+          removedLayers.push(layerId);
+        }
+      });
+      if (removedLayers.length > 0) {
+        removedLayers.forEach((layerId) => {
+          delete this.state.layerStates[layerId];
+          const itemEl = this.panel.querySelector(`[data-layer-id="${layerId}"]`);
+          if (itemEl) {
+            itemEl.remove();
+          }
+          if (this.state.activeStyleEditor === layerId) {
+            this.state.activeStyleEditor = null;
+          }
+          this.styleEditors.delete(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: this.generateFriendlyName(layerId)
+          };
+          this.addLayerItem(layerId, this.state.layerStates[layerId]);
+        });
+      }
+      if (this.customLayerRegistry) {
+        const customLayerIds = this.customLayerRegistry.getAllLayerIds();
+        customLayerIds.forEach((layerId) => {
+          if (!this.state.layerStates[layerId] && !this.removedCustomLayerIds.has(layerId)) {
+            const customState = this.customLayerRegistry.getLayerState(layerId);
+            if (customState) {
+              this.state.layerStates[layerId] = {
+                visible: customState.visible,
+                opacity: customState.opacity,
+                name: customState.name,
+                isCustomLayer: true,
+                customLayerType: this.customLayerRegistry.getSymbolType(layerId) || void 0
+              };
+              this.addLayerItem(layerId, this.state.layerStates[layerId]);
+            }
+          }
+        });
+        Object.keys(this.state.layerStates).forEach((layerId) => {
+          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}"]`);
+            if (itemEl) {
+              itemEl.remove();
+            }
+            if (this.state.activeStyleEditor === layerId) {
+              this.state.activeStyleEditor = null;
+            }
+            this.styleEditors.delete(layerId);
+          }
+        });
+      }
+    } catch (error) {
+      console.warn("Failed to check for new layers:", error);
+    }
+  }
+  /**
+   * Register a custom layer adapter dynamically.
+   * This allows adding adapters after the LayerControl has been initialized.
+   * @param adapter The custom layer adapter to register
+   */
+  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.checkForNewLayers();
+      });
+    }
+    this.customLayerRegistry.register(adapter);
+    if (this.panel) {
+      this.checkForNewLayers();
+    }
+  }
+  // ===== Context Menu Methods =====
+  /**
+   * Create context menu element
+   */
+  createContextMenu() {
+    const menu = document.createElement("div");
+    menu.className = "layer-control-context-menu";
+    menu.style.display = "none";
+    const renameItem = this.createContextMenuItem("Rename", "✏️", () => {
+      if (this.state.contextMenu.targetLayerId) {
+        this.startRenaming(this.state.contextMenu.targetLayerId);
+      }
+      this.hideContextMenu();
+    });
+    const zoomItem = this.createContextMenuItem("Zoom to Layer", "🔍", () => {
+      if (this.state.contextMenu.targetLayerId) {
+        this.zoomToLayer(this.state.contextMenu.targetLayerId);
+      }
+      this.hideContextMenu();
+    });
+    const sep1 = document.createElement("div");
+    sep1.className = "context-menu-separator";
+    const moveUpItem = this.createContextMenuItem("Move Up", "↑", () => {
+      if (this.state.contextMenu.targetLayerId) {
+        this.moveLayerUp(this.state.contextMenu.targetLayerId);
+      }
+      this.hideContextMenu();
+    });
+    const moveTopItem = this.createContextMenuItem("Move to Top", "⤒", () => {
+      if (this.state.contextMenu.targetLayerId) {
+        this.moveLayerToTop(this.state.contextMenu.targetLayerId);
+      }
+      this.hideContextMenu();
+    });
+    const moveDownItem = this.createContextMenuItem("Move Down", "↓", () => {
+      if (this.state.contextMenu.targetLayerId) {
+        this.moveLayerDown(this.state.contextMenu.targetLayerId);
+      }
+      this.hideContextMenu();
+    });
+    const moveBottomItem = this.createContextMenuItem("Move to Bottom", "⤓", () => {
+      if (this.state.contextMenu.targetLayerId) {
+        this.moveLayerToBottom(this.state.contextMenu.targetLayerId);
+      }
+      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);
+    menu.appendChild(renameItem);
+    menu.appendChild(zoomItem);
+    menu.appendChild(sep1);
+    menu.appendChild(moveUpItem);
+    menu.appendChild(moveTopItem);
+    menu.appendChild(moveDownItem);
+    menu.appendChild(moveBottomItem);
+    menu.appendChild(sep2);
+    menu.appendChild(removeItem);
+    return menu;
+  }
+  /**
+   * Create a context menu item
+   */
+  createContextMenuItem(label, icon, onClick, isDanger = false) {
+    const item = document.createElement("div");
+    item.className = "context-menu-item" + (isDanger ? " context-menu-item-danger" : "");
+    const iconEl = document.createElement("span");
+    iconEl.className = "context-menu-item-icon";
+    iconEl.textContent = icon;
+    const labelEl = document.createElement("span");
+    labelEl.className = "context-menu-item-label";
+    labelEl.textContent = label;
+    item.appendChild(iconEl);
+    item.appendChild(labelEl);
+    item.addEventListener("click", (e) => {
+      e.stopPropagation();
+      onClick();
+    });
+    return item;
+  }
+  /**
+   * Show context menu at position
+   */
+  showContextMenu(layerId, x, y) {
+    if (!this.contextMenuEl) return;
+    this.state.contextMenu = {
+      visible: true,
+      targetLayerId: layerId,
+      x,
+      y
+    };
+    const mapRect = this.mapContainer.getBoundingClientRect();
+    let menuX = x - mapRect.left;
+    let menuY = y - mapRect.top;
+    this.contextMenuEl.style.display = "block";
+    const menuRect = this.contextMenuEl.getBoundingClientRect();
+    if (menuX + menuRect.width > mapRect.width) {
+      menuX = mapRect.width - menuRect.width - 5;
+    }
+    if (menuY + menuRect.height > mapRect.height) {
+      menuY = mapRect.height - menuRect.height - 5;
+    }
+    this.contextMenuEl.style.left = `${menuX}px`;
+    this.contextMenuEl.style.top = `${menuY}px`;
+  }
+  /**
+   * Hide context menu
+   */
+  hideContextMenu() {
+    if (!this.contextMenuEl) return;
+    this.state.contextMenu = {
+      visible: false,
+      targetLayerId: null,
+      x: 0,
+      y: 0
+    };
+    this.contextMenuEl.style.display = "none";
+  }
+  /**
+   * Start renaming a layer
+   */
+  startRenaming(layerId) {
+    var _a;
+    const itemEl = this.panel.querySelector(`[data-layer-id="${layerId}"]`);
+    if (!itemEl) return;
+    const nameEl = itemEl.querySelector(".layer-control-name");
+    if (!nameEl) return;
+    this.state.renamingLayerId = layerId;
+    const currentName = this.state.customLayerNames.get(layerId) || ((_a = this.state.layerStates[layerId]) == null ? void 0 : _a.name) || layerId;
+    const input = document.createElement("input");
+    input.type = "text";
+    input.className = "layer-control-name-input";
+    input.value = currentName;
+    const finishRename = () => {
+      var _a2;
+      const newName = input.value.trim() || currentName;
+      const oldName = currentName;
+      if (newName !== oldName) {
+        this.state.customLayerNames.set(layerId, newName);
+        if (this.state.layerStates[layerId]) {
+          this.state.layerStates[layerId].name = newName;
+        }
+        (_a2 = this.onLayerRename) == null ? void 0 : _a2.call(this, layerId, oldName, newName);
+      }
+      const newNameEl = document.createElement("span");
+      newNameEl.className = "layer-control-name";
+      newNameEl.textContent = newName;
+      newNameEl.title = newName;
+      input.replaceWith(newNameEl);
+      this.state.renamingLayerId = null;
+    };
+    input.addEventListener("blur", finishRename);
+    input.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        finishRename();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        const newNameEl = document.createElement("span");
+        newNameEl.className = "layer-control-name";
+        newNameEl.textContent = currentName;
+        newNameEl.title = currentName;
+        input.replaceWith(newNameEl);
+        this.state.renamingLayerId = null;
+      }
+    });
+    nameEl.replaceWith(input);
+    input.focus();
+    input.select();
+  }
+  /**
+   * Zoom to a layer's bounds
+   */
+  zoomToLayer(layerId) {
+    const layerState = this.state.layerStates[layerId];
+    if ((layerState == null ? void 0 : layerState.isCustomLayer) && this.customLayerRegistry) {
+      const bounds = this.customLayerRegistry.getBounds(layerId);
+      if (bounds) {
+        this.map.fitBounds(bounds, { padding: 50 });
+        return;
+      }
+    }
+    const layer = this.map.getLayer(layerId);
+    if (!layer) return;
+    try {
+      const sourceId = layer.source;
+      let features = sourceId ? this.map.querySourceFeatures(sourceId) : [];
+      if (features.length === 0) {
+        features = this.map.queryRenderedFeatures({ layers: [layerId] });
+      }
+      if (features.length === 0) return;
+      let minLng = Infinity, minLat = Infinity, maxLng = -Infinity, maxLat = -Infinity;
+      features.forEach((feature) => {
+        if (!feature.geometry) return;
+        const processCoords = (coords) => {
+          if (typeof coords[0] === "number") {
+            const [lng, lat] = coords;
+            minLng = Math.min(minLng, lng);
+            minLat = Math.min(minLat, lat);
+            maxLng = Math.max(maxLng, lng);
+            maxLat = Math.max(maxLat, lat);
+          } else {
+            coords.forEach(processCoords);
+          }
+        };
+        if (feature.geometry.type === "Point") {
+          processCoords(feature.geometry.coordinates);
+        } 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));
+        } else if (feature.geometry.type === "MultiPolygon") {
+          feature.geometry.coordinates.forEach(
+            (polygon) => polygon.forEach((ring) => ring.forEach(processCoords))
+          );
+        }
+      });
+      if (minLng !== Infinity && minLat !== Infinity && maxLng !== -Infinity && maxLat !== -Infinity) {
+        this.map.fitBounds([[minLng, minLat], [maxLng, maxLat]], { padding: 50 });
+      }
+    } catch (error) {
+      console.warn(`Failed to zoom to layer ${layerId}:`, error);
+    }
+  }
+  /**
+   * Get user layer IDs in current map order (top to bottom in UI = high z-index to low)
+   * Includes both MapLibre layers and custom layers managed by adapters.
+   */
+  getUserLayerIdsInMapOrder() {
+    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 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));
+    return [...customLayers, ...sortedMapLibreLayers];
+  }
+  /**
+   * Check if a layer is a MapLibre layer (not a custom layer)
+   */
+  isMapLibreLayer(layerId) {
+    return this.map.getLayer(layerId) !== void 0;
+  }
+  /**
+   * Find the next MapLibre layer ID in a direction from a given index
+   * @param layerIds Array of layer IDs
+   * @param startIndex Index to start searching from
+   * @param direction 1 for forward (toward bottom), -1 for backward (toward top)
+   * @returns MapLibre layer ID or undefined if not found
+   */
+  findNextMapLibreLayer(layerIds, startIndex, direction) {
+    for (let i = startIndex; direction === 1 ? i < layerIds.length : i >= 0; i += direction) {
+      if (this.isMapLibreLayer(layerIds[i])) {
+        return layerIds[i];
+      }
+    }
+    return void 0;
+  }
+  /**
+   * Move a layer up in UI (higher rendering order = move to higher z-index)
+   */
+  moveLayerUp(layerId) {
+    var _a, _b;
+    const layerIds = this.getUserLayerIdsInMapOrder();
+    const index = layerIds.indexOf(layerId);
+    if (index <= 0) return;
+    const isCustom = (_a = this.state.layerStates[layerId]) == null ? void 0 : _a.isCustomLayer;
+    if (!isCustom && this.isMapLibreLayer(layerId)) {
+      try {
+        const targetBeforeId = index >= 2 ? this.findNextMapLibreLayer(layerIds, index - 2, -1) : void 0;
+        this.map.moveLayer(layerId, targetBeforeId);
+      } catch (e) {
+      }
+    }
+    const newLayerStates = {};
+    const orderedIds = [...layerIds];
+    [orderedIds[index], orderedIds[index - 1]] = [orderedIds[index - 1], orderedIds[index]];
+    if (this.state.layerStates["Background"]) {
+      newLayerStates["Background"] = this.state.layerStates["Background"];
+    }
+    orderedIds.forEach((id) => {
+      if (this.state.layerStates[id]) {
+        newLayerStates[id] = this.state.layerStates[id];
+      }
+    });
+    this.state.layerStates = newLayerStates;
+    this.buildLayerItems();
+    (_b = this.onLayerReorder) == null ? void 0 : _b.call(this, this.getUserLayerIdsInMapOrder());
+  }
+  /**
+   * Move a layer to the top (highest rendering order)
+   */
+  moveLayerToTop(layerId) {
+    var _a, _b;
+    const layerIds = this.getUserLayerIdsInMapOrder();
+    const index = layerIds.indexOf(layerId);
+    if (index <= 0) return;
+    const isCustom = (_a = this.state.layerStates[layerId]) == null ? void 0 : _a.isCustomLayer;
+    if (!isCustom && this.isMapLibreLayer(layerId)) {
+      try {
+        this.map.moveLayer(layerId);
+      } catch (e) {
+      }
+    }
+    const newLayerStates = {};
+    const orderedIds = [...layerIds];
+    orderedIds.splice(index, 1);
+    orderedIds.unshift(layerId);
+    if (this.state.layerStates["Background"]) {
+      newLayerStates["Background"] = this.state.layerStates["Background"];
+    }
+    orderedIds.forEach((id) => {
+      if (this.state.layerStates[id]) {
+        newLayerStates[id] = this.state.layerStates[id];
+      }
+    });
+    this.state.layerStates = newLayerStates;
+    this.buildLayerItems();
+    (_b = this.onLayerReorder) == null ? void 0 : _b.call(this, this.getUserLayerIdsInMapOrder());
+  }
+  /**
+   * Move a layer down in UI (lower rendering order = move to lower z-index)
+   */
+  moveLayerDown(layerId) {
+    var _a, _b;
+    const layerIds = this.getUserLayerIdsInMapOrder();
+    const index = layerIds.indexOf(layerId);
+    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 belowLayerId = this.findNextMapLibreLayer(layerIds, index + 1, 1);
+      if (belowLayerId) {
+        try {
+          this.map.moveLayer(layerId, belowLayerId);
+        } catch (e) {
+        }
+      }
+    }
+    const newLayerStates = {};
+    const orderedIds = [...layerIds];
+    [orderedIds[index], orderedIds[index + 1]] = [orderedIds[index + 1], orderedIds[index]];
+    if (this.state.layerStates["Background"]) {
+      newLayerStates["Background"] = this.state.layerStates["Background"];
+    }
+    orderedIds.forEach((id) => {
+      if (this.state.layerStates[id]) {
+        newLayerStates[id] = this.state.layerStates[id];
+      }
+    });
+    this.state.layerStates = newLayerStates;
+    this.buildLayerItems();
+    (_b = this.onLayerReorder) == null ? void 0 : _b.call(this, this.getUserLayerIdsInMapOrder());
+  }
+  /**
+   * Move a layer to the bottom (lowest rendering order among user layers)
+   */
+  moveLayerToBottom(layerId) {
+    var _a, _b;
+    const layerIds = this.getUserLayerIdsInMapOrder();
+    if (layerIds.length <= 1) return;
+    const index = layerIds.indexOf(layerId);
+    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);
+      if (bottomLayerId && bottomLayerId !== layerId) {
+        try {
+          this.map.moveLayer(layerId, bottomLayerId);
+        } catch (e) {
+        }
+      }
+    }
+    const newLayerStates = {};
+    const orderedIds = [...layerIds];
+    orderedIds.splice(index, 1);
+    orderedIds.push(layerId);
+    if (this.state.layerStates["Background"]) {
+      newLayerStates["Background"] = this.state.layerStates["Background"];
+    }
+    orderedIds.forEach((id) => {
+      if (this.state.layerStates[id]) {
+        newLayerStates[id] = this.state.layerStates[id];
+      }
+    });
+    this.state.layerStates = newLayerStates;
+    this.buildLayerItems();
+    (_b = this.onLayerReorder) == null ? void 0 : _b.call(this, this.getUserLayerIdsInMapOrder());
+  }
+  /**
+   * Remove a layer from the map
+   */
+  removeLayer(layerId) {
+    var _a, _b;
+    this.state.isStyleOperationInProgress = true;
+    const layerState = this.state.layerStates[layerId];
+    if ((layerState == null ? void 0 : layerState.isCustomLayer) && this.customLayerRegistry) {
+      this.removedCustomLayerIds.add(layerId);
+      this.customLayerRegistry.setVisibility(layerId, false);
+      this.customLayerRegistry.removeLayer(layerId);
+    }
+    try {
+      const layer = this.map.getLayer(layerId);
+      if (layer) {
+        const sourceId = layer.source;
+        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);
+          if (!sourceStillUsed) {
+            try {
+              this.map.removeSource(sourceId);
+            } catch (e) {
+            }
+          }
+        }
+      }
+    } catch (error) {
+      console.warn(`Failed to remove layer ${layerId}:`, error);
+    }
+    delete this.state.layerStates[layerId];
+    this.state.customLayerNames.delete(layerId);
+    const itemEl = this.panel.querySelector(`[data-layer-id="${layerId}"]`);
+    if (itemEl) {
+      itemEl.remove();
+    }
+    (_b = this.onLayerRemove) == null ? void 0 : _b.call(this, layerId);
+    setTimeout(() => {
+      this.state.isStyleOperationInProgress = false;
+    }, 200);
+  }
+  // ===== Drag and Drop Methods =====
+  /**
+   * Create drag handle element
+   */
+  createDragHandle(layerId) {
+    const handle = document.createElement("div");
+    handle.className = "layer-control-drag-handle";
+    handle.innerHTML = `<svg viewBox="0 0 16 16" fill="currentColor">
+      <circle cx="5" cy="3" r="1.5"/>
+      <circle cx="11" cy="3" r="1.5"/>
+      <circle cx="5" cy="8" r="1.5"/>
+      <circle cx="11" cy="8" r="1.5"/>
+      <circle cx="5" cy="13" r="1.5"/>
+      <circle cx="11" cy="13" r="1.5"/>
+    </svg>`;
+    handle.title = "Drag to reorder";
+    handle.addEventListener("pointerdown", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      this.startDrag(layerId, e);
+    });
+    return handle;
+  }
+  /**
+   * Create a disabled drag handle for alignment (used for Background layer)
+   */
+  createDisabledDragHandle() {
+    const handle = document.createElement("div");
+    handle.className = "layer-control-drag-handle layer-control-drag-handle-disabled";
+    handle.innerHTML = `<svg viewBox="0 0 16 16" fill="currentColor">
+      <circle cx="5" cy="3" r="1.5"/>
+      <circle cx="11" cy="3" r="1.5"/>
+      <circle cx="5" cy="8" r="1.5"/>
+      <circle cx="11" cy="8" r="1.5"/>
+      <circle cx="5" cy="13" r="1.5"/>
+      <circle cx="11" cy="13" r="1.5"/>
+    </svg>`;
+    return handle;
+  }
+  /**
+   * Start dragging a layer
+   */
+  startDrag(layerId, e) {
+    var _a;
+    const itemEl = this.panel.querySelector(`[data-layer-id="${layerId}"]`);
+    if (!itemEl) return;
+    const rect = itemEl.getBoundingClientRect();
+    this.state.drag = {
+      active: true,
+      layerId,
+      startY: e.clientY,
+      currentY: e.clientY,
+      placeholder: null,
+      draggedElement: null
+    };
+    this.panel.classList.add("dragging-active");
+    itemEl.classList.add("dragging");
+    const placeholder = document.createElement("div");
+    placeholder.className = "layer-control-drop-placeholder";
+    placeholder.style.height = `${rect.height}px`;
+    (_a = itemEl.parentNode) == null ? void 0 : _a.insertBefore(placeholder, itemEl);
+    this.state.drag.placeholder = placeholder;
+    const clone = itemEl.cloneNode(true);
+    clone.classList.remove("dragging");
+    clone.className = "layer-control-item layer-control-item-dragging";
+    clone.style.width = `${rect.width}px`;
+    clone.style.left = `${rect.left}px`;
+    clone.style.top = `${rect.top}px`;
+    document.body.appendChild(clone);
+    this.state.drag.draggedElement = clone;
+    const onMove = (moveE) => this.onDragMove(moveE);
+    const onEnd = (endE) => {
+      document.removeEventListener("pointermove", onMove);
+      document.removeEventListener("pointerup", onEnd);
+      document.removeEventListener("pointercancel", onEnd);
+      this.endDrag(endE);
+    };
+    document.addEventListener("pointermove", onMove);
+    document.addEventListener("pointerup", onEnd);
+    document.addEventListener("pointercancel", onEnd);
+  }
+  /**
+   * Handle drag move
+   */
+  onDragMove(e) {
+    var _a, _b;
+    if (!this.state.drag.active || !this.state.drag.draggedElement) return;
+    const placeholder = this.state.drag.placeholder;
+    if (!placeholder) return;
+    const deltaY = e.clientY - this.state.drag.startY;
+    const clone = this.state.drag.draggedElement;
+    const currentTop = parseFloat(clone.style.top) || 0;
+    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");
+    for (const item of items) {
+      const itemRect = item.getBoundingClientRect();
+      if (e.clientY >= itemRect.top && e.clientY <= itemRect.bottom) {
+        const itemMiddle = itemRect.top + itemRect.height / 2;
+        if (e.clientY < itemMiddle) {
+          if (placeholder.nextSibling !== item) {
+            (_a = item.parentNode) == null ? void 0 : _a.insertBefore(placeholder, item);
+          }
+        } else {
+          if (placeholder.previousSibling !== item) {
+            (_b = item.parentNode) == null ? void 0 : _b.insertBefore(placeholder, item.nextSibling);
+          }
+        }
+        break;
+      }
+    }
+  }
+  /**
+   * End dragging
+   */
+  endDrag(_e) {
+    var _a;
+    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}"]`);
+    if (itemEl && placeholder) {
+      (_a = placeholder.parentNode) == null ? void 0 : _a.insertBefore(itemEl, placeholder);
+      itemEl.classList.remove("dragging");
+    }
+    this.cleanupDragState();
+    this.applyUIOrderToMap();
+  }
+  /**
+   * Clean up drag state
+   */
+  cleanupDragState() {
+    if (this.state.drag.draggedElement) {
+      this.state.drag.draggedElement.remove();
+    }
+    if (this.state.drag.placeholder) {
+      this.state.drag.placeholder.remove();
+    }
+    this.panel.classList.remove("dragging-active");
+    this.panel.querySelectorAll(".layer-control-item.dragging").forEach((el) => {
+      el.classList.remove("dragging");
+    });
+    this.state.drag = {
+      active: false,
+      layerId: null,
+      startY: 0,
+      currentY: 0,
+      placeholder: null,
+      draggedElement: null
+    };
+  }
+  /**
+   * Apply UI order to map layers
+   */
+  applyUIOrderToMap() {
+    var _a, _b;
+    this.state.isStyleOperationInProgress = true;
+    const items = this.panel.querySelectorAll(".layer-control-item");
+    const uiLayerIds = [];
+    items.forEach((item) => {
+      const layerId = item.dataset.layerId;
+      if (layerId && layerId !== "Background") {
+        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];
+      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];
+          break;
+        }
+      }
+      try {
+        this.map.moveLayer(layerId, beforeId);
+      } catch (e) {
+      }
+    }
+    (_b = this.onLayerReorder) == null ? void 0 : _b.call(this, uiLayerIds);
+    setTimeout(() => {
+      this.state.isStyleOperationInProgress = false;
+    }, 200);
+  }
+}
+export {
+  CustomLayerRegistry,
+  LayerControl,
+  clamp,
+  createBackgroundGroupSymbolSVG,
+  createLayerSymbolSVG,
+  darkenColor,
+  formatNumericValue,
+  getLayerColor,
+  getLayerColorFromSpec,
+  getLayerOpacity,
+  getLayerType,
+  isStyleableLayerType,
+  normalizeColor,
+  rgbToHex,
+  setLayerOpacity
+};
+//# sourceMappingURL=index.mjs.map