maplibre-gl-layer-control 0.3.0 → 0.5.0

package/dist/index.mjs

@@ -166,6 +166,258 @@ function formatNumericValue(value, step) {
 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 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);
+    default:
+      return createDefaultSymbol(size, fillColor);
+  }
+}
+function createBackgroundGroupSymbolSVG(size = 16) {
+  return createStackedLayersSymbol(size);
+}
 class LayerControl {
   constructor(options = {}) {
     __publicField(this, "map");
@@ -179,6 +431,11 @@ class LayerControl {
     // 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, "widthSliderEl", null);
     __publicField(this, "widthThumbEl", null);
     __publicField(this, "widthValueEl", null);
@@ -189,6 +446,11 @@ class LayerControl {
     __publicField(this, "widthFrame", null);
     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.state = {
       collapsed: options.collapsed !== false,
       panelWidth: options.panelWidth || 320,
@@ -238,7 +500,31 @@ class LayerControl {
     }
     const allLayerIds = style.layers.map((layer) => layer.id);
     if (this.targetLayers.length === 0) {
+      const originalSourceIds = this.getOriginalStyleSourceIds();
+      const userAddedLayers = [];
+      const backgroundLayerIds = [];
       allLayerIds.forEach((layerId) => {
+        const layer = this.map.getLayer(layerId);
+        if (!layer) return;
+        if (this.excludeDrawnLayers && this.isDrawnLayer(layerId)) {
+          backgroundLayerIds.push(layerId);
+          return;
+        }
+        const sourceId = layer.source;
+        if (!sourceId || originalSourceIds.has(sourceId)) {
+          backgroundLayerIds.push(layerId);
+        } else {
+          userAddedLayers.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");
@@ -286,6 +572,60 @@ class LayerControl {
     }
     this.targetLayers = Object.keys(this.state.layerStates);
   }
+  /**
+   * Get the source IDs that were part of the original style (from the style URL)
+   * Sources added via map.addSource() are considered user-added
+   */
+  getOriginalStyleSourceIds() {
+    const originalSourceIds = /* @__PURE__ */ new Set();
+    const style = this.map.getStyle();
+    if (!style || !style.sources) return originalSourceIds;
+    const spriteUrl = style.sprite;
+    const glyphsUrl = style.glyphs;
+    let styleBaseDomain = "";
+    if (spriteUrl) {
+      try {
+        const url = new URL(typeof spriteUrl === "string" ? spriteUrl : "");
+        styleBaseDomain = url.hostname;
+      } catch {
+      }
+    } else if (glyphsUrl) {
+      try {
+        const url = new URL(glyphsUrl.replace("{fontstack}", "test").replace("{range}", "test"));
+        styleBaseDomain = url.hostname;
+      } catch {
+      }
+    }
+    Object.entries(style.sources).forEach(([sourceId, source]) => {
+      const src = source;
+      let sourceUrl = src.url || src.tiles && src.tiles[0] || "";
+      if (sourceUrl) {
+        try {
+          const url = new URL(sourceUrl);
+          if (styleBaseDomain && url.hostname === styleBaseDomain) {
+            originalSourceIds.add(sourceId);
+            return;
+          }
+          const basemapDomains = [
+            "demotiles.maplibre.org",
+            "api.maptiler.com",
+            "tiles.stadiamaps.com",
+            "api.mapbox.com",
+            "basemaps.cartocdn.com"
+          ];
+          if (basemapDomains.some((domain) => url.hostname.includes(domain))) {
+            originalSourceIds.add(sourceId);
+            return;
+          }
+        } catch {
+        }
+      }
+      if (!src.data && !sourceUrl && src.type !== "geojson") {
+        originalSourceIds.add(sourceId);
+      }
+    });
+    return originalSourceIds;
+  }
   /**
    * Generate a friendly display name from a layer ID
    */
@@ -295,6 +635,28 @@ class LayerControl {
     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 = [
+      /^gm[-_]/i,
+      // Geoman (gm-main-*, gm_*)
+      /^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
+    ];
+    return drawnLayerPatterns.some((pattern) => pattern.test(layerId));
+  }
   /**
    * Create the main container element
    */
@@ -324,13 +686,59 @@ class LayerControl {
     const panel = document.createElement("div");
     panel.className = "layer-control-panel";
     panel.style.width = `${this.state.panelWidth}px`;
+    panel.style.maxHeight = `${this.maxPanelHeight}px`;
     if (!this.state.collapsed) {
       panel.classList.add("expanded");
     }
     const header = this.createPanelHeader();
     panel.appendChild(header);
+    const actionButtons = this.createActionButtons();
+    panel.appendChild(actionButtons);
     return panel;
   }
+  /**
+   * 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) => {
+      if (layerId === "Background") {
+        this.toggleBackgroundVisibility(visible);
+      } else {
+        this.state.layerStates[layerId].visible = visible;
+        this.map.setLayoutProperty(layerId, "visibility", visible ? "visible" : "none");
+      }
+      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
    */
@@ -504,7 +912,11 @@ class LayerControl {
       this.widthSliderEl.setAttribute("aria-valuenow", String(this.state.panelWidth));
       const ratio = (this.state.panelWidth - this.minPanelWidth) / (this.maxPanelWidth - this.minPanelWidth || 1);
       if (this.widthThumbEl) {
-        const sliderWidth = this.widthSliderEl.clientWidth || 1;
+        const 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);
@@ -609,39 +1021,98 @@ class LayerControl {
     name.className = "layer-control-name";
     name.textContent = state.name || layerId;
     name.title = state.name || layerId;
-    const opacity = document.createElement("input");
-    opacity.type = "range";
-    opacity.className = "layer-control-opacity";
-    opacity.min = "0";
-    opacity.max = "1";
-    opacity.step = "0.01";
-    opacity.value = String(state.opacity);
-    opacity.title = `Opacity: ${Math.round(state.opacity * 100)}%`;
-    opacity.addEventListener("mousedown", () => {
-      this.state.userInteractingWithSlider = true;
-    });
-    opacity.addEventListener("mouseup", () => {
-      this.state.userInteractingWithSlider = false;
-    });
-    opacity.addEventListener("input", () => {
-      this.changeLayerOpacity(layerId, parseFloat(opacity.value));
-      opacity.title = `Opacity: ${Math.round(parseFloat(opacity.value) * 100)}%`;
-    });
     row.appendChild(checkbox);
+    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);
-    row.appendChild(opacity);
-    if (layerId === "Background") {
-      const legendButton = this.createBackgroundLegendButton();
-      row.appendChild(legendButton);
-    } else {
-      const styleButton = this.createStyleButton(layerId);
-      if (styleButton) {
-        row.appendChild(styleButton);
+    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);
     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 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
    */
@@ -906,6 +1377,12 @@ class LayerControl {
         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);
@@ -1378,7 +1855,7 @@ class LayerControl {
     });
   }
   /**
-   * Check for new layers and add them to the control
+   * Check for new layers and add them to the control, remove deleted layers
    */
   checkForNewLayers() {
     try {
@@ -1386,21 +1863,46 @@ class LayerControl {
       if (!style || !style.layers) {
         return;
       }
-      const currentMapLayers = style.layers.map((layer) => layer.id).filter((id) => {
-        if (this.targetLayers.length > 0) {
-          return this.targetLayers.includes(id);
-        }
-        return true;
-      });
+      const currentMapLayerIds = new Set(style.layers.map((layer) => layer.id));
+      const originalSourceIds = this.getOriginalStyleSourceIds();
+      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 = [];
-      currentMapLayers.forEach((layerId) => {
+      currentMapLayerIds.forEach((layerId) => {
         if (layerId !== "Background" && !this.state.layerStates[layerId]) {
           const layer = this.map.getLayer(layerId);
           if (layer) {
+            if (isAutoDetectMode) {
+              if (this.excludeDrawnLayers && this.isDrawnLayer(layerId)) {
+                return;
+              }
+              const sourceId = layer.source;
+              if (!sourceId || originalSourceIds.has(sourceId)) {
+                return;
+              }
+            }
             newLayers.push(layerId);
           }
         }
       });
+      const removedLayers = [];
+      Object.keys(this.state.layerStates).forEach((layerId) => {
+        if (layerId !== "Background" && !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);
@@ -1412,7 +1914,7 @@ class LayerControl {
           this.state.layerStates[layerId] = {
             visible: isVisible,
             opacity,
-            name: layerId.replace(/-/g, " ").replace(/\b\w/g, (l) => l.toUpperCase())
+            name: this.generateFriendlyName(layerId)
           };
           this.addLayerItem(layerId, this.state.layerStates[layerId]);
         });
@@ -1425,7 +1927,12 @@ class LayerControl {
 export {
   LayerControl,
   clamp,
+  createBackgroundGroupSymbolSVG,
+  createLayerSymbolSVG,
+  darkenColor,
   formatNumericValue,
+  getLayerColor,
+  getLayerColorFromSpec,
   getLayerOpacity,
   getLayerType,
   isStyleableLayerType,