Widget:Teste

 <button class="layer-button active" data-layer="camada1">Camada 1</button>
 <button class="layer-button" data-layer="camada2">Camada 2</button>

<script>

 const MAP_DATA = {
   camada1: {
     background: "https://i.imgur.com/9z4WZL1.png",
     skulls: [
       { x: 410, y: 220, title: "White Skull", desc: "Boss: White Skull
Área sombria, cuidado com os ataques surpresa!" },
       { x: 650, y: 125, title: "Red Fang", desc: "Boss: Red Fang
Possui resistência a fogo. Traga ataques de gelo!" },
       { x: 250, y: 410, title: "Void Wraith", desc: "Boss: Void Wraith
Evite ataques diretos. Usa magia de sombras." },
       { x: 248, y: 320, title: "Night Howler", desc: "Boss: Night Howler
Ataca com velocidade e confusão. Use proteção contra atordoamento!" }
     ],
     hearts: [
       { x: 280, y: 210, desc: "Cura escondida: Quebre a caixa para obter uma cura." },
       { x: 312, y: 196 },
       { x: 245, y: 358, desc: "Após o chefe, o jogador com menos vida receberá uma cura automática." }
     ]
   },
   camada2: {
     background: "https://i.imgur.com/IoBLbik.png",
     skulls: [
       { x: 330, y: 150, title: "Phantom", desc: "Boss: Phantom
Usa invisibilidade e veneno." }
     ],
     hearts: [
       { x: 290, y: 190 }
     ]
   }
 };

 const map = document.getElementById("map");

 function createIcon(x, y, className, src, popupHTML) {
   const icon = document.createElement("img");
   icon.src = src;
   icon.className = className;
   icon.style.left = x + "px";
   icon.style.top = y + "px";

   const popup = document.createElement("div");
   popup.className = "popup";
   popup.innerHTML = popupHTML;
   map.appendChild(icon);
   map.appendChild(popup);

   function positionPopup() {
     const mapRect = map.getBoundingClientRect();
     const iconRect = icon.getBoundingClientRect();
     const popupRect = popup.getBoundingClientRect();
     const spaceRight = mapRect.right - iconRect.right;
     const spaceLeft = iconRect.left - mapRect.left;

     if (spaceRight < popupRect.width && spaceLeft > popupRect.width) {
       popup.style.left = (x - popupRect.width - 10) + "px";
     } else {
       popup.style.left = (x + 30) + "px";
     }
     popup.style.top = (y - 10) + "px";
   }

   icon.addEventListener("click", () => {
     const visible = popup.style.display === "block";
     document.querySelectorAll(".popup").forEach(p => p.style.display = "none");
     if (!visible) {
       popup.style.display = "block";
       positionPopup();
     }
   });

   document.addEventListener("click", (e) => {
     if (!icon.contains(e.target) && !popup.contains(e.target)) {
       popup.style.display = "none";
     }
   });
 }

 function renderLayer(layerKey) {
   const config = MAP_DATA[layerKey];
   if (!config) return;

   map.innerHTML = "";
   map.style.backgroundImage = `url('${config.background}')`;

   config.skulls?.forEach(skull => {
     createIcon(skull.x, skull.y, "skull-icon", "/images/d/dc/Whiteskull.png",
       `${skull.title}
${skull.desc}`);
   });

   config.hearts?.forEach(heart => {
     const desc = heart.desc || "Pegue o coração para se curar";
     createIcon(heart.x, heart.y, "heart-icon", "/images/d/d9/Heart.png",
       `Cura
${desc}`);
   });
 }

 document.querySelectorAll(".layer-button").forEach(btn => {
   btn.addEventListener("click", e => {
     document.querySelectorAll(".layer-button").forEach(b => b.classList.remove("active"));
     e.target.classList.add("active");
     renderLayer(e.target.dataset.layer);
   });
 });

 renderLayer("camada1");

 document.head.insertAdjacentHTML('beforeend', `
   <style>
     .map-controls {
       margin-bottom: 10px;
       display: flex;
       gap: 8px;
     }
     .layer-button {
       padding: 6px 14px;
       background-color: #222;
       color: #eee;
       border: 1px solid #444;
       border-radius: 6px;
       cursor: pointer;
       font-weight: bold;
       transition: background 0.3s, border 0.3s;
     }
     .layer-button.active {
       background-color: #3b82f6;
       border-color: #3b82f6;
       color: white;
     }
     .map-container {
       position: relative;
       width: 811px;
       height: 554px;
       background-size: cover;
       background-repeat: no-repeat;
       background-position: center center;
     }
     .skull-icon, .heart-icon {
       position: absolute;
       cursor: pointer;
       transition: transform 0.2s, filter 0.2s;
     }
     .skull-icon { width: 24px; height: 24px; }
     .heart-icon { width: 26px; height: 26px; padding: 1px; }
     .skull-icon:hover, .heart-icon:hover {
       transform: scale(1.3);
       filter: brightness(1.5);
     }
     .popup {
       position: absolute;
       background: #1e1e1e;
       color: #fff;
       padding: 10px 14px;
       border-radius: 8px;
       border: 1px solid #444;
       box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
       display: none;
       z-index: 10;
       max-width: 500px;
       font-size: 14px;
       animation: fadeIn 0.3s ease-out;
     }
     @keyframes fadeIn {
       from { opacity: 0; transform: translateY(-5px); }
       to   { opacity: 1; transform: translateY(0); }
     }
   </style>
 `);

</script>