maplibre-gl-layer-control-tidop 0.0.11 → 0.0.13

package/dist/index.cjs

@@ -814,10 +814,6 @@ class LayerControl {
       }
       this.buildLayerItems();
     }
-    const actionButtons = this.createActionButtons();
-    this.panel.insertBefore(actionButtons, this.panel.firstChild);
-    const header = this.createPanelHeader();
-    this.panel.insertBefore(header, this.panel.firstChild);
     if (!this.state.collapsed) {
       requestAnimationFrame(() => {
         this.updatePanelPosition();
@@ -1172,6 +1168,10 @@ class LayerControl {
     if (!this.state.collapsed) {
       panel.classList.add("expanded");
     }
+    const header = this.createPanelHeader();
+    panel.appendChild(header);
+    const actionButtons = this.createActionButtons();
+    panel.appendChild(actionButtons);
     return panel;
   }
   /**
@@ -1626,6 +1626,10 @@ class LayerControl {
         }
       }
     }
+    const tidopButton = this.createTidopButton(layerId);
+    if (tidopButton) {
+      row.appendChild(tidopButton);
+    }
     item.appendChild(row);
     if (this.enableContextMenu && layerId !== "Background") {
       row.addEventListener("contextmenu", (e) => {
@@ -2098,6 +2102,27 @@ 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) => {
+      console.log(e);
+    });
+    return button;
+  }
   /**
    * Toggle style editor for a layer
    */