maplibre-gl-layer-control 0.5.1 → 0.6.2

package/README.md

@@ -25,6 +25,7 @@ A comprehensive layer control for MapLibre GL with advanced styling capabilities
 - ✅ **Accessibility** - Full ARIA support and keyboard navigation
 - ✅ **TypeScript** - Full type safety and IntelliSense support
 - ✅ **React integration** - Optional React components and hooks
+- ✅ **Custom layer adapters** - Integrate non-MapLibre layers (deck.gl, Zarr, etc.)
 
 ## Installation
 
@@ -159,6 +160,7 @@ function MapComponent() {
 | `showOpacitySlider` | `boolean` | `true` | Show opacity slider for layers |
 | `showLayerSymbol` | `boolean` | `true` | Show layer type symbols (colored icons) next to layer names |
 | `excludeDrawnLayers` | `boolean` | `true` | Exclude layers from drawing libraries (Geoman, Mapbox GL Draw, etc.) |
+| `customLayerAdapters` | `CustomLayerAdapter[]` | `undefined` | Adapters for non-MapLibre layers (deck.gl, Zarr, etc.) |
 
 ### LayerState
 
@@ -218,6 +220,156 @@ When using the `layers` option to specify specific layers, all other layers are
 
 This allows fine-grained control over which basemap layers are visible while maintaining a simplified layer control interface.
 
+### Custom Layer Adapters
+
+The layer control supports non-MapLibre layers (such as deck.gl or Zarr layers) through the Custom Layer Adapter interface. This allows you to integrate any custom layer type with the layer control's visibility toggle, opacity slider, and layer list.
+
+#### CustomLayerAdapter Interface
+
+```typescript
+interface CustomLayerAdapter {
+  /** Unique type identifier for this adapter (e.g., 'cog', 'zarr', 'deck') */
+  type: string;
+
+  /** Get all layer IDs managed by this adapter */
+  getLayerIds(): string[];
+
+  /** Get the current state of a layer */
+  getLayerState(layerId: string): LayerState | null;
+
+  /** Set layer visibility */
+  setVisibility(layerId: string, visible: boolean): void;
+
+  /** Set layer opacity (0-1) */
+  setOpacity(layerId: string, opacity: number): void;
+
+  /** Get display name for a layer */
+  getName(layerId: string): string;
+
+  /** Get layer symbol type for UI display (optional) */
+  getSymbolType?(layerId: string): string;
+
+  /**
+   * Subscribe to layer changes (add/remove).
+   * Returns an unsubscribe function.
+   */
+  onLayerChange?(callback: (event: 'add' | 'remove', layerId: string) => void): () => void;
+}
+```
+
+#### Implementing a Custom Adapter
+
+Here's an example of implementing an adapter for deck.gl layers:
+
+```typescript
+import type { CustomLayerAdapter, LayerState } from 'maplibre-gl-layer-control';
+import type { MapboxOverlay } from '@deck.gl/mapbox';
+
+class DeckLayerAdapter implements CustomLayerAdapter {
+  readonly type = 'deck';
+
+  private deckOverlay: MapboxOverlay;
+  private deckLayers: Map<string, any>;
+  private changeCallbacks: Array<(event: 'add' | 'remove', layerId: string) => void> = [];
+
+  constructor(deckOverlay: MapboxOverlay, deckLayers: Map<string, any>) {
+    this.deckOverlay = deckOverlay;
+    this.deckLayers = deckLayers;
+  }
+
+  getLayerIds(): string[] {
+    return Array.from(this.deckLayers.keys());
+  }
+
+  getLayerState(layerId: string): LayerState | null {
+    const layer = this.deckLayers.get(layerId);
+    if (!layer?.props) return null;
+
+    return {
+      visible: layer.props.visible !== false,
+      opacity: layer.props.opacity ?? 1,
+      name: this.getName(layerId),
+    };
+  }
+
+  setVisibility(layerId: string, visible: boolean): void {
+    const layer = this.deckLayers.get(layerId);
+    if (!layer?.clone) return;
+
+    // deck.gl layers are immutable; clone with new props
+    const updatedLayer = layer.clone({ visible });
+    this.deckLayers.set(layerId, updatedLayer);
+    this.updateOverlay();
+  }
+
+  setOpacity(layerId: string, opacity: number): void {
+    const layer = this.deckLayers.get(layerId);
+    if (!layer?.clone) return;
+
+    const updatedLayer = layer.clone({ opacity });
+    this.deckLayers.set(layerId, updatedLayer);
+    this.updateOverlay();
+  }
+
+  getName(layerId: string): string {
+    return layerId.replace(/[-_]/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+  }
+
+  getSymbolType(): string {
+    return 'raster'; // Use raster symbol for deck.gl layers
+  }
+
+  onLayerChange(callback: (event: 'add' | 'remove', layerId: string) => void): () => void {
+    this.changeCallbacks.push(callback);
+    return () => {
+      const idx = this.changeCallbacks.indexOf(callback);
+      if (idx >= 0) this.changeCallbacks.splice(idx, 1);
+    };
+  }
+
+  // Call this when layers are added/removed
+  notifyLayerAdded(layerId: string): void {
+    this.changeCallbacks.forEach(cb => cb('add', layerId));
+  }
+
+  notifyLayerRemoved(layerId: string): void {
+    this.changeCallbacks.forEach(cb => cb('remove', layerId));
+  }
+
+  private updateOverlay(): void {
+    this.deckOverlay.setProps({ layers: Array.from(this.deckLayers.values()) });
+  }
+}
+```
+
+#### Using Custom Adapters
+
+Pass your custom adapters to the `customLayerAdapters` option:
+
+```typescript
+import { LayerControl } from 'maplibre-gl-layer-control';
+
+// Create your custom adapter
+const deckAdapter = new DeckLayerAdapter(deckOverlay, deckLayers);
+
+// Create the layer control with the adapter
+const layerControl = new LayerControl({
+  collapsed: false,
+  customLayerAdapters: [deckAdapter]
+});
+
+map.addControl(layerControl, 'top-right');
+
+// When you add a new deck.gl layer, notify the adapter
+deckLayers.set('my-deck-layer', myDeckLayer);
+deckAdapter.notifyLayerAdded('my-deck-layer');
+```
+
+#### Limitations
+
+- **Style Editor**: The style editor (gear icon) is not available for custom layers since they don't use MapLibre's paint properties. Clicking the gear icon will show an info panel explaining this.
+- **Opacity Support**: Some layer types (like deck.gl's COGLayer) may not support dynamic opacity changes due to underlying library limitations. In these cases, the opacity slider will have no effect.
+
 ## Development
 
 ```bash

package/dist/index.cjs

@@ -3,6 +3,145 @@ 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);
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+class CustomLayerRegistry {
+  constructor() {
+    __publicField(this, "adapters", /* @__PURE__ */ new Map());
+    __publicField(this, "changeListeners", []);
+    __publicField(this, "unsubscribers", []);
+  }
+  /**
+   * 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.push(unsubscribe);
+    }
+  }
+  /**
+   * Unregister an adapter by type.
+   * @param type The adapter type to unregister
+   */
+  unregister(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;
+  }
+  /**
+   * 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 = [];
+    this.adapters.clear();
+    this.changeListeners = [];
+  }
+}
 function getOpacityProperty(layerType) {
   switch (layerType) {
     case "fill":
@@ -379,6 +518,46 @@ function createDefaultSymbol(size, color) {
           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";
@@ -413,6 +592,12 @@ function createLayerSymbolSVG(layerType, color, options = {}) {
       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);
   }
@@ -438,6 +623,8 @@ class LayerControl {
     __publicField(this, "showOpacitySlider");
     __publicField(this, "showLayerSymbol");
     __publicField(this, "excludeDrawnLayers");
+    __publicField(this, "customLayerRegistry", null);
+    __publicField(this, "customLayerUnsubscribe", null);
     __publicField(this, "widthSliderEl", null);
     __publicField(this, "widthThumbEl", null);
     __publicField(this, "widthValueEl", null);
@@ -455,7 +642,7 @@ class LayerControl {
     this.excludeDrawnLayers = options.excludeDrawnLayers !== false;
     this.state = {
       collapsed: options.collapsed !== false,
-      panelWidth: options.panelWidth || 320,
+      panelWidth: options.panelWidth || 348,
       activeStyleEditor: null,
       layerStates: options.layerStates || {},
       originalStyles: /* @__PURE__ */ new Map(),
@@ -466,6 +653,12 @@ class LayerControl {
     };
     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);
+      });
+    }
   }
   /**
    * Called when the control is added to the map
@@ -490,6 +683,14 @@ class LayerControl {
    */
   onRemove() {
     var _a;
+    if (this.customLayerUnsubscribe) {
+      this.customLayerUnsubscribe();
+      this.customLayerUnsubscribe = null;
+    }
+    if (this.customLayerRegistry) {
+      this.customLayerRegistry.destroy();
+      this.customLayerRegistry = null;
+    }
     (_a = this.container.parentNode) == null ? void 0 : _a.removeChild(this.container);
   }
   /**
@@ -572,6 +773,22 @@ class LayerControl {
         };
       });
     }
+    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);
   }
   /**
@@ -725,12 +942,7 @@ class LayerControl {
    */
   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");
-      }
+      this.toggleLayerVisibility(layerId, visible);
       const itemEl = this.panel.querySelector(`[data-layer-id="${layerId}"]`);
       if (itemEl) {
         const checkbox = itemEl.querySelector(".layer-control-checkbox");
@@ -965,6 +1177,11 @@ class LayerControl {
         }, 150);
       }
     });
+    if (this.customLayerRegistry) {
+      this.customLayerUnsubscribe = this.customLayerRegistry.onChange(() => {
+        setTimeout(() => this.checkForNewLayers(), 100);
+      });
+    }
   }
   /**
    * Toggle panel expanded/collapsed state
@@ -1077,6 +1294,17 @@ class LayerControl {
    * @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;
@@ -1119,6 +1347,7 @@ class LayerControl {
    * Toggle layer visibility
    */
   toggleLayerVisibility(layerId, visible) {
+    var _a;
     if (layerId === "Background") {
       this.toggleBackgroundVisibility(visible);
       return;
@@ -1126,12 +1355,16 @@ class LayerControl {
     if (this.state.layerStates[layerId]) {
       this.state.layerStates[layerId].visible = visible;
     }
+    if ((_a = this.customLayerRegistry) == null ? void 0 : _a.setVisibility(layerId, visible)) {
+      return;
+    }
     this.map.setLayoutProperty(layerId, "visibility", visible ? "visible" : "none");
   }
   /**
    * Change layer opacity
    */
   changeLayerOpacity(layerId, opacity) {
+    var _a;
     if (layerId === "Background") {
       this.changeBackgroundOpacity(opacity);
       return;
@@ -1139,6 +1372,9 @@ class LayerControl {
     if (this.state.layerStates[layerId]) {
       this.state.layerStates[layerId].opacity = opacity;
     }
+    if ((_a = this.customLayerRegistry) == null ? void 0 : _a.setOpacity(layerId, opacity)) {
+      return;
+    }
     const layerType = getLayerType(this.map, layerId);
     if (layerType) {
       setLayerOpacity(this.map, layerId, layerType, opacity);
@@ -1461,11 +1697,18 @@ class LayerControl {
     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;";
-    button.title = "Edit layer style";
-    button.setAttribute("aria-label", `Edit style for ${layerId}`);
+    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);
@@ -1491,6 +1734,17 @@ class LayerControl {
   openStyleEditor(layerId) {
     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 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) {
@@ -1506,6 +1760,48 @@ class LayerControl {
       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 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(closeActionBtn);
+    editor.appendChild(header);
+    editor.appendChild(content);
+    editor.appendChild(actions);
+    return editor;
+  }
   /**
    * Close style editor for a layer
    */
@@ -1823,7 +2119,14 @@ class LayerControl {
       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");
@@ -1891,7 +2194,8 @@ class LayerControl {
       });
       const removedLayers = [];
       Object.keys(this.state.layerStates).forEach((layerId) => {
-        if (layerId !== "Background" && !currentMapLayerIds.has(layerId)) {
+        const state = this.state.layerStates[layerId];
+        if (layerId !== "Background" && !state.isCustomLayer && !currentMapLayerIds.has(layerId)) {
           removedLayers.push(layerId);
         }
       });
@@ -1924,11 +2228,44 @@ class LayerControl {
           this.addLayerItem(layerId, this.state.layerStates[layerId]);
         });
       }
+      if (this.customLayerRegistry) {
+        const customLayerIds = this.customLayerRegistry.getAllLayerIds();
+        customLayerIds.forEach((layerId) => {
+          if (!this.state.layerStates[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);
     }
   }
 }
+exports.CustomLayerRegistry = CustomLayerRegistry;
 exports.LayerControl = LayerControl;
 exports.clamp = clamp;
 exports.createBackgroundGroupSymbolSVG = createBackgroundGroupSymbolSVG;