maplibre-gl-layer-control 0.2.0 → 0.4.0

package/README.md

@@ -1,5 +1,9 @@
 # maplibre-gl-layer-control
 
+[![npm version](https://img.shields.io/npm/v/maplibre-gl-layer-control.svg)](https://www.npmjs.com/package/maplibre-gl-layer-control)
+[![npm downloads](https://img.shields.io/npm/dm/maplibre-gl-layer-control.svg)](https://www.npmjs.com/package/maplibre-gl-layer-control)
+[![license](https://img.shields.io/npm/l/maplibre-gl-layer-control.svg)](https://github.com/opengeos/maplibre-gl-layer-control/blob/main/LICENSE)
+
 A comprehensive layer control for MapLibre GL with advanced styling capabilities. Built with TypeScript and React, providing both vanilla JavaScript and React integration options.
 
 ## Features
@@ -149,6 +153,8 @@ function MapComponent() {
 | `panelWidth` | `number` | `320` | Initial panel width in pixels |
 | `panelMinWidth` | `number` | `240` | Minimum panel width |
 | `panelMaxWidth` | `number` | `420` | Maximum panel width |
+| `showStyleEditor` | `boolean` | `true` | Show gear icon for style editor |
+| `showOpacitySlider` | `boolean` | `true` | Show opacity slider for layers |
 
 ### LayerState
 

package/dist/index.cjs

@@ -181,6 +181,8 @@ class LayerControl {
     // Panel width management
     __publicField(this, "minPanelWidth");
     __publicField(this, "maxPanelWidth");
+    __publicField(this, "showStyleEditor");
+    __publicField(this, "showOpacitySlider");
     __publicField(this, "widthSliderEl", null);
     __publicField(this, "widthThumbEl", null);
     __publicField(this, "widthValueEl", null);
@@ -191,6 +193,8 @@ class LayerControl {
     __publicField(this, "widthFrame", null);
     this.minPanelWidth = options.panelMinWidth || 240;
     this.maxPanelWidth = options.panelMaxWidth || 420;
+    this.showStyleEditor = options.showStyleEditor !== false;
+    this.showOpacitySlider = options.showOpacitySlider !== false;
     this.state = {
       collapsed: options.collapsed !== false,
       panelWidth: options.panelWidth || 320,
@@ -240,7 +244,27 @@ 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;
+        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");
@@ -288,6 +312,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
    */
@@ -331,8 +409,53 @@ class LayerControl {
     }
     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
    */
@@ -506,7 +629,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);
@@ -611,34 +738,38 @@ 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);
     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);
@@ -1380,7 +1511,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 {
@@ -1388,21 +1519,43 @@ 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) {
+              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);
@@ -1414,7 +1567,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]);
         });