Correção do Mapa com otimização por demanda das fotos nos cards

This commit is contained in:
2026-06-29 21:44:53 -03:00
parent acd3d20caf
commit 3fb2b69399

View File

@@ -404,28 +404,33 @@
{}, { position: 'topright', collapsed: true } {}, { position: 'topright', collapsed: true }
).addTo(mapa); ).addTo(mapa);
// Camada de calor // Camada de calor (leve — entra por padrão)
const heatLayer = (heat.length && L.heatLayer) const heatLayer = (heat.length && L.heatLayer)
? L.heatLayer(heat, { radius: 18, blur: 22, maxZoom: 14 }) : null; ? L.heatLayer(heat, { radius: 18, blur: 22, maxZoom: 14 }) : null;
// Camada de pontos (marcadores em balão com popup) // Camada de pontos: criada SOB DEMANDA (só na 1ª vez que abrir "Pontos").
const marcadores = L.layerGroup(); // O popup é uma FUNÇÃO, então o HTML da foto só é montado/baixado quando
pontos.forEach(function (p) { // o balão é clicado — nada de imagem é requisitado ao carregar o mapa.
L.marker([p.lat, p.lng], { icon: ICONE }) let marcadores = null;
.bindPopup(popupHtml(p)) function construirMarcadores() {
.addTo(marcadores); if (marcadores) return marcadores;
}); marcadores = L.layerGroup();
pontos.forEach(function (p) {
L.marker([p.lat, p.lng], { icon: ICONE })
.bindPopup(function () { return popupHtml(p); }, { maxWidth: 260 })
.addTo(marcadores);
});
return marcadores;
}
// Começa no Calor (cai para Pontos se não houver calor) // Começa no Calor (cai para Pontos se não houver calor)
let atual = heatLayer || marcadores; (heatLayer || construirMarcadores()).addTo(mapa);
atual.addTo(mapa);
function mostrar(view) { function mostrar(view) {
mapa.removeLayer(heatLayer || marcadores); if (heatLayer) mapa.removeLayer(heatLayer);
if (marcadores) mapa.removeLayer(marcadores); if (marcadores) mapa.removeLayer(marcadores);
if (heatLayer) mapa.removeLayer(heatLayer); if (view === 'pontos') { construirMarcadores().addTo(mapa); }
if (view === 'pontos') { marcadores.addTo(mapa); } else { (heatLayer || construirMarcadores()).addTo(mapa); }
else { (heatLayer || marcadores).addTo(mapa); }
box.querySelectorAll('.map-toggle button').forEach(function (b) { box.querySelectorAll('.map-toggle button').forEach(function (b) {
const on = b.dataset.view === view; const on = b.dataset.view === view;
b.classList.toggle('bg-orange-500', on); b.classList.toggle('bg-orange-500', on);