diff --git a/js/mapGlobal.js b/js/mapGlobal.js index e233625..ccf46f7 100644 --- a/js/mapGlobal.js +++ b/js/mapGlobal.js @@ -1,5 +1,5 @@ // =============================== -// MAPPA GLOBALE (marker personalizzati + bottom sheet) +// MAPPA GLOBALE (marker personalizzati + bottom sheet + cluster intelligenti) // =============================== document.getElementById("openMapBtn").addEventListener("click", openGlobalMap); @@ -29,13 +29,88 @@ function openGlobalMap() { maxZoom: 19 }).addTo(globalMap); + // =============================== + // FUNZIONE: calcola luminosità miniatura + // =============================== + function getBrightness(photo) { + return new Promise(resolve => { + const img = new Image(); + img.crossOrigin = "anonymous"; + img.src = `https://prova.patachina.it/${photo.thub1}`; + + img.onload = () => { + const canvas = document.createElement("canvas"); + canvas.width = 20; + canvas.height = 20; + const ctx = canvas.getContext("2d"); + + ctx.drawImage(img, 0, 0, 20, 20); + const data = ctx.getImageData(0, 0, 20, 20).data; + + let total = 0; + for (let i = 0; i < data.length; i += 4) { + total += (data[i] + data[i + 1] + data[i + 2]) / 3; + } + + resolve(total / (20 * 20)); + }; + + img.onerror = () => resolve(0); + }); + } + + // =============================== + // FUNZIONE: sceglie la foto migliore (recenti + luminosa) + // =============================== + async function chooseBestRepresentative(photos) { + // Ordina per data + photos.sort((a, b) => new Date(b.taken_at) - new Date(a.taken_at)); + + // Prendi le 3 più recenti + const candidates = photos.slice(0, 3); + + // Calcola luminosità + const brightnessValues = await Promise.all( + candidates.map(p => getBrightness(p)) + ); + + // Trova la più luminosa + let bestIndex = 0; + let bestValue = brightnessValues[0]; + + for (let i = 1; i < brightnessValues.length; i++) { + if (brightnessValues[i] > bestValue) { + bestValue = brightnessValues[i]; + bestIndex = i; + } + } + + return candidates[bestIndex]; + } + // =============================== // CLUSTER PERSONALIZZATI // =============================== globalMarkers = L.markerClusterGroup({ iconCreateFunction: function (cluster) { const markers = cluster.getAllChildMarkers(); - const representative = markers[0].photoData; + const photos = markers.map(m => m.photoData); + + // Mostra SUBITO la più recente (velocissimo) + photos.sort((a, b) => new Date(b.taken_at) - new Date(a.taken_at)); + const representative = photos[0]; + + // Aggiorna in background con la più luminosa + chooseBestRepresentative(photos).then(best => { + const icon = cluster._icon; + if (!icon) return; + + const back = icon.querySelector(".cluster-back"); + const front = icon.querySelector(".cluster-front"); + + if (back) back.src = `https://prova.patachina.it/${best.thub1}`; + if (front) front.src = `https://prova.patachina.it/${best.thub1}`; + }); return L.divIcon({ html: ` @@ -82,10 +157,8 @@ function openGlobalMap() { icon: markerIcon }); - // Salviamo i dati della foto nel marker marker.photoData = photo; - // CLICK SU MARKER → BOTTOM SHEET CON 1 FOTO marker.on("click", () => { openBottomSheet([photo]); });