maplibre-gl-layer-control 0.5.1 → 0.6.2

package/dist/index.mjs

@@ -1,6 +1,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);
+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":
@@ -377,6 +516,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";
@@ -411,6 +590,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);
   }
@@ -436,6 +621,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);
@@ -453,7 +640,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(),
@@ -464,6 +651,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
@@ -488,6 +681,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);
   }
   /**
@@ -570,6 +771,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);
   }
   /**
@@ -723,12 +940,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");
@@ -963,6 +1175,11 @@ class LayerControl {
         }, 150);
       }
     });
+    if (this.customLayerRegistry) {
+      this.customLayerUnsubscribe = this.customLayerRegistry.onChange(() => {
+        setTimeout(() => this.checkForNewLayers(), 100);
+      });
+    }
   }
   /**
    * Toggle panel expanded/collapsed state
@@ -1075,6 +1292,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;
@@ -1117,6 +1345,7 @@ class LayerControl {
    * Toggle layer visibility
    */
   toggleLayerVisibility(layerId, visible) {
+    var _a;
     if (layerId === "Background") {
       this.toggleBackgroundVisibility(visible);
       return;
@@ -1124,12 +1353,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;
@@ -1137,6 +1370,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);
@@ -1459,11 +1695,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);
@@ -1489,6 +1732,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) {
@@ -1504,6 +1758,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
    */
@@ -1821,7 +2117,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");
@@ -1889,7 +2192,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);
         }
       });
@@ -1922,12 +2226,45 @@ 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);
     }
   }
 }
 export {
+  CustomLayerRegistry,
   LayerControl,
   clamp,
   createBackgroundGroupSymbolSVG,