maplibre-gl-layer-control-tidop 0.0.21 → 0.0.22

package/dist/index.mjs

@@ -1085,7 +1085,7 @@ class LayerControl {
     let name = layerId.replace(/^(layer[-_]?|gl[-_]?)/, "");
     name = name.replace(/[-_]/g, " ");
     name = name.replace(/\b\w/g, (char) => char.toUpperCase());
-    return layerId;
+    return name || layerId;
   }
   /**
    * Check if a layer ID belongs to a drawing library (Geoman, Mapbox GL Draw, etc.)
@@ -1270,11 +1270,6 @@ class LayerControl {
     title.className = "layer-control-panel-title";
     title.textContent = "Layers";
     header.appendChild(title);
-    const input = document.createElement("input");
-    input.id = "layer-control-panel-layer-id";
-    input.className = "layer-control-panel-layer-id";
-    input.value = "";
-    header.appendChild(input);
     const widthControl = this.createWidthControl();
     header.appendChild(widthControl);
     return header;
@@ -1629,10 +1624,6 @@ class LayerControl {
         }
       }
     }
-    const tidopButton = this.createTidopButton(layerId);
-    if (tidopButton) {
-      row.appendChild(tidopButton);
-    }
     item.appendChild(row);
     if (this.enableContextMenu && layerId !== "Background") {
       row.addEventListener("contextmenu", (e) => {
@@ -1641,7 +1632,7 @@ class LayerControl {
         this.showContextMenu(layerId, e.clientX, e.clientY);
       });
     }
-    this.panel.insertBefore(item, this.panel.firstChild);
+    this.panel.appendChild(item);
   }
   /**
    * Create a symbol element for a layer
@@ -2105,46 +2096,17 @@ class LayerControl {
     });
     return button;
   }
-  createTidopButton(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 layer-control-tidop-button-" + layerId;
-    button.innerHTML = "⚙";
-    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) => {
-      this.toggleStyleEditor(layerId);
-      console.log(e);
-    });
-    return button;
-  }
   /**
    * Toggle style editor for a layer
    */
   toggleStyleEditor(layerId) {
     if (this.state.activeStyleEditor === layerId) {
-      var el = this.panel.querySelector("#layer-control-panel-layer-id");
-      console.log(el);
-      if (el)
-        el.value = "";
       this.closeStyleEditor(layerId);
       return;
     }
     if (this.state.activeStyleEditor) {
       this.closeStyleEditor(this.state.activeStyleEditor);
     }
-    var el = this.panel.querySelector("#layer-control-panel-layer-id");
-    if (el)
-      el.value = layerId;
     this.openStyleEditor(layerId);
   }
   /**
@@ -3491,9 +3453,7 @@ class LayerControl {
         uiLayerIds.push(layerId);
       }
     });
-    console.log(uiLayerIds);
-    const reversedIds = [...uiLayerIds];
-    console.log(reversedIds);
+    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++) {