viewof map = { const H = 550; // altura do contêiner const Y_ADJUST = -0; // <-- ajuste vertical em px (aumente para descer o conteúdo) // container principal em flex: mapa (esq) + sidebar (dir) const root = html`

`; // slot onde o Leaflet renderiza o mapa const mapSlot = html`

`; // sidebar (começa fechada) const sidebar = html``; root.append(mapSlot, sidebar); // utils da sidebar function openSidebar(htmlContent, panTargetLatLng){ sidebar.innerHTML = `

Detalhes

${htmlContent}

`; sidebar.style.width = '220px'; const onEnd = () => { sidebar.removeEventListener('transitionend', onEnd); const w = sidebar.getBoundingClientRect().width || 220; m.invalidateSize(); m.panBy([w / 2, 0], { animate: false }); m.panBy([0, Y_ADJUST], { animate: false }); if (panTargetLatLng) { const z = m.getZoom(); const pt = m.project(panTargetLatLng, z).add(L.point(w / 2, Y_ADJUST)); m.panTo(m.unproject(pt, z), { animate: true }); } }; sidebar.addEventListener('transitionend', onEnd); sidebar.querySelector('#closeSidebar').onclick = closeSidebar; } function closeSidebar(){ const w = sidebar.getBoundingClientRect().width || 320; sidebar.style.width = '0'; const onEnd = () => { sidebar.removeEventListener('transitionend', onEnd); sidebar.innerHTML = ''; m.invalidateSize(); m.panBy([-w / 2, 0], { animate: false }); m.panBy([0, -Y_ADJUST], { animate: false }); }; sidebar.addEventListener('transitionend', onEnd); } L.DomEvent.disableScrollPropagation(sidebar); L.DomEvent.disableClickPropagation(sidebar); root.tabIndex = 0; root.addEventListener('keydown', e => { if ((e.key||'').toLowerCase() === 'escape') closeSidebar(); }); /* ----------------- LEAFLET (mapa) ----------------- */ const m = L.map(mapSlot, { zoomControl: true, minZoom: 2, maxZoom: 10 }).setView([-6.6, -55], 4); requestAnimationFrame(() => { m.invalidateSize(); m.panBy([0, Y_ADJUST], { animate: false }); }); // bases const dataviz = L.tileLayer( `https://api.maptiler.com/maps/dataviz/{z}/{x}/{y}.png?key=${MAPTILER_KEY}`, { tileSize: 512, zoomOffset: -1, minZoom: 1, crossOrigin: true, attribution: '© MapTiler ' + '© OpenStreetMap contributors' } ); const osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }); const esriSat = L.tileLayer( 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { attribution: 'Tiles © Esri — Source: Esri, Earthstar Geographics' } ); const baseLayers = { '🗺️ Dataviz (MapTiler)': dataviz, '🗺️ OSM Padrão': osm, '🛰️ Satélite (Esri)': esriSat }; dataviz.addTo(m); const layersCtl = L.control.layers(baseLayers, null, { position:'topright' }).addTo(m); /* -------- CAMADAS -------- */ L.geoJSON(AMAZONIA, { style: { color: "#2E7D32", weight: 0.8, fillOpacity: 0.08, fillColor: "#2E7D32" } }).addTo(m); L.geoJSON(ESTADOS, { style: { color: "#D3C5BD", weight: 0.8, fillOpacity: 0.08, fillColor: "#D3C5BD" } }).addTo(m); L.geoJSON(SOBREVOO, { style: { color:'#752420', weight:2, fillColor:'#752420', fillOpacity:0.35 } }).addTo(m); m.createPane('glow'); m.getPane('glow').style.zIndex = 399; L.geoJSON(ZONAS1, { pane: 'glow', style: { color:'#ffffff', weight:2, opacity:0.4, fillOpacity:0 } }).addTo(m); function styleZonas(feature){ return { fillColor:'#752420', color:'#752420', weight:1, opacity:0.8, fillOpacity:0.30 }; } function styleArco(f){ const t = f.geometry && f.geometry.type; const isLine = t === 'LineString' || t === 'MultiLineString'; return isLine ? { color:'#BB7C38', weight:1, opacity:0.30, dashArray:'6 4' } : { color:'#BB7C38', weight:1, opacity:0.30, fillColor:'#BB7C38', fillOpacity:0.30 }; } function onEachArco(feature, layer){ layer.on('mouseover', () => { m.getContainer().style.cursor='pointer'; layer.setStyle({ weight: (layer.options.weight||2)+1 }); }); layer.on('mouseout', () => { m.getContainer().style.cursor=''; layer.setStyle(styleArco(feature)); }); const p = feature.properties || {}; if (p && (p.titulo || p.Titulo || p.resumo || p.descricao || p.descrição)) { layer.on('click', () => { const titulo = p.titulo || p.Titulo || 'Arco do Desmatamento'; const resumo = p.resumo || p.descricao || p.descrição || ''; const center = (layer.getBounds && layer.getBounds().getCenter()) || (layer.getLatLng && layer.getLatLng()) || m.getCenter(); openSidebar(`

${titulo}

${resumo ? `

${resumo}

` : ''}

`, center); sidebar.querySelector('#fecharInfo')?.addEventListener('click', closeSidebar); }); } } const layerARCO = L.geoJSON(ARCO, { style: styleArco, onEachFeature: onEachArco }).addTo(m); layersCtl.addOverlay(layerARCO, 'Arco do Desmatamento'); const IMAGENS = { "1": ACRE, "2": GUAPORE, "3": TERRADOMEIO, "4": TAPAJOS, "5": MARAJO }; let destaqueAnterior = null; function onEachFeature(feature, layer){ const p = feature.properties || {}; const titulo = p.Titulo ?? 'Região sem título'; const resumo = p.resumo ?? ''; const imagemID = p['num area']?.toString(); const imagemHTML = (imagemID && IMAGENS[imagemID]) ? `

` : ''; layer.on('mouseover', () => { m.getContainer().style.cursor='pointer'; layer.setStyle({ weight:3, fillOpacity:0.45 }); }); layer.on('mouseout', () => { m.getContainer().style.cursor=''; const sel = (destaqueAnterior === layer); layer.setStyle({ weight: sel?3:2, fillOpacity:0.30, dashArray: sel?'3':null }); }); layer.on('click', () => { if (destaqueAnterior) { destaqueAnterior.setStyle({ weight:2, color:'#752420', dashArray:null, fillOpacity:0.30 }); } layer.setStyle({ weight:3, color:'#752420', dashArray:'3' }); destaqueAnterior = layer; const html = `

${titulo}

${resumo ? `

${resumo}

` : ''} ${imagemHTML}

`; const center = (layer.getBounds && layer.getBounds().getCenter()) || (layer.getLatLng && layer.getLatLng()) || m.getCenter(); openSidebar(html, center); sidebar.querySelector('#fecharInfo')?.addEventListener('click', closeSidebar); }); } L.geoJSON(ZONAS1, { style: styleZonas, onEachFeature: onEachFeature }).addTo(m); const resetZoom = L.control({ position:'bottomright' }); resetZoom.onAdd = function(){ const btn = L.DomUtil.create('button',''); btn.innerHTML = '⟳ Reset'; Object.assign(btn.style, { padding:'6px 10px', background:'#fff', border:'1px solid #ccc', cursor:'pointer', borderRadius:'6px' }); btn.onclick = () => { m.setView([-6.6,-55], 4); closeSidebar(); if (destaqueAnterior){ destaqueAnterior.setStyle({ weight:2, color:'#752420', dashArray:null, fillOpacity:0.30 }); destaqueAnterior = null; } m.getContainer().style.cursor = ''; m.panBy([0, Y_ADJUST], { animate:false }); }; return btn; }; resetZoom.addTo(m); const legenda = L.control({ position:'bottomleft' }); legenda.onAdd = function(){ const c = L.DomUtil.create('div'); c.innerHTML = `

Área de Sobrevôos | LiDAR

Área de atuação do Projeto

Amazônia Legal

Arco do Desmatamento

Clique para ver mais detalhes.

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