viewof map = { const div = html`

`; const infoBox = html` `; div.appendChild(infoBox); const m = L.map(div, { zoomControl: true, minZoom: 4, maxZoom: 9 }).setView([-7.5, -58], 4); requestAnimationFrame(() => m.invalidateSize()); const baseLayers = { "🗺️ Mapa Padrão": L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: '© OpenStreetMap contributors' }), "🛠️ Satélite (Esri)": L.tileLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", { attribution: 'Tiles © Esri — Source: Esri, Earthstar Geographics' }) }; baseLayers["🗺️ Mapa Padrão"].addTo(m); L.control.layers(baseLayers).addTo(m); L.geoJSON(AMAZONIA, { style: { color: "#D0B47F", weight: 1.5, fillOpacity: 0.3, fillColor: "#D0B47F" } }).addTo(m); L.geoJSON(SOBREVOO, { style: { color: "#752420", weight: 2, fillOpacity: 0.3, fillColor: "#752420" } }).addTo(m); function style(feature) { return { fillColor: '#752420', color: '#752420', weight: 2, opacity: 1, fillOpacity: 0.3 }; } const IMAGENS = { "1": ACRE, "2": GUAPORE, "3": TERRADOMEIO, "4": TAPAJOS, "5": MARAJO }; let destaqueAnterior = null; function onEachFeature(feature, layer) { const props = feature.properties; const titulo = props.Titulo ?? "Região sem título"; const descricao = props.Descricao ?? ""; const imagemID = props["num area"]?.toString(); const imagemHTML = imagemID && IMAGENS[imagemID] ? ` Imagem da área ${imagemID}

` : ""; layer.on('click', function () { if (destaqueAnterior) { destaqueAnterior.setStyle({ weight: 2, color: '#752420' }); } layer.setStyle({ weight: 3, color: '#752420', dashArray: '3' }); destaqueAnterior = layer; if (infoBox.style.display === 'block' && infoBox.innerHTML.includes(titulo)) { infoBox.style.display = 'none'; return; } const htmlContent = ` ${titulo}
${descricao ? `

${descricao}

` : ""} ${imagemHTML}
`; infoBox.innerHTML = htmlContent; infoBox.style.display = 'block'; setTimeout(() => { document.getElementById("fecharInfo").onclick = () => { infoBox.style.display = 'none'; }; }, 30); }); } L.geoJSON(ZONAS, { style, onEachFeature }).addTo(m); const resetZoom = L.control({position: 'bottomright'}); resetZoom.onAdd = function() { const btn = L.DomUtil.create('button', ''); btn.innerHTML = '⟳ Reset'; btn.style.padding = '6px 10px'; btn.style.background = '#fff'; btn.style.border = '1px solid #ccc'; btn.style.cursor = 'pointer'; btn.style.borderRadius = '6px'; btn.onclick = () => { m.setView([-7.5, -58], 4); infoBox.style.display = 'none'; }; return btn; }; resetZoom.addTo(m); const legenda = L.control({ position: 'bottomleft' }); legenda.onAdd = function() { const container = L.DomUtil.create('div'); container.innerHTML = `

🔍 Legenda do Mapa

Área de Sobrevôos | LiDAR

Área de atuação do Projeto

Amazônia Legal

Clique nas áreas para visualizar detalhes.

`; return container; }; legenda.addTo(m); return Object.assign(div, { map: m }); }