99 lines
2.8 KiB
JavaScript
99 lines
2.8 KiB
JavaScript
// ===============================
|
|
// MAPPA GLOBALE (marker personalizzati + bottom sheet)
|
|
// ===============================
|
|
|
|
document.getElementById("openMapBtn").addEventListener("click", openGlobalMap);
|
|
|
|
function openGlobalMap() {
|
|
const mapDiv = document.getElementById("globalMap");
|
|
const gallery = document.getElementById("gallery");
|
|
|
|
const isOpen = mapDiv.classList.contains("open");
|
|
|
|
// Toggle mappa
|
|
if (isOpen) {
|
|
mapDiv.classList.remove("open");
|
|
gallery.classList.remove("hidden");
|
|
closeBottomSheet();
|
|
return;
|
|
}
|
|
|
|
mapDiv.classList.add("open");
|
|
gallery.classList.add("hidden");
|
|
|
|
// Inizializza solo la prima volta
|
|
if (!globalMap) {
|
|
globalMap = L.map("globalMap").setView([42.5, 12.5], 6);
|
|
|
|
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
|
|
maxZoom: 19
|
|
}).addTo(globalMap);
|
|
|
|
// ===============================
|
|
// CLUSTER PERSONALIZZATI
|
|
// ===============================
|
|
globalMarkers = L.markerClusterGroup({
|
|
iconCreateFunction: function (cluster) {
|
|
const markers = cluster.getAllChildMarkers();
|
|
const representative = markers[0].photoData;
|
|
|
|
return L.divIcon({
|
|
html: `
|
|
<div class="photo-cluster">
|
|
<img class="cluster-back" src="https://prova.patachina.it/${representative.thub1}">
|
|
<img class="cluster-front" src="https://prova.patachina.it/${representative.thub1}">
|
|
</div>
|
|
`,
|
|
className: "",
|
|
iconSize: [56, 56]
|
|
});
|
|
}
|
|
});
|
|
|
|
globalMap.addLayer(globalMarkers);
|
|
|
|
// ===============================
|
|
// CLICK SUI CLUSTER → BOTTOM SHEET
|
|
// ===============================
|
|
globalMarkers.on("clusterclick", function (a) {
|
|
const markers = a.layer.getAllChildMarkers();
|
|
const photos = markers.map(m => m.photoData);
|
|
|
|
openBottomSheet(photos);
|
|
});
|
|
|
|
// ===============================
|
|
// MARKER SINGOLI PERSONALIZZATI
|
|
// ===============================
|
|
photosData.forEach(photo => {
|
|
if (!photo.gps || !photo.gps.lat || !photo.gps.lng) return;
|
|
|
|
const markerIcon = L.divIcon({
|
|
html: `
|
|
<div class="photo-marker">
|
|
<img src="https://prova.patachina.it/${photo.thub1}">
|
|
</div>
|
|
`,
|
|
className: "",
|
|
iconSize: [48, 48]
|
|
});
|
|
|
|
const marker = L.marker([photo.gps.lat, photo.gps.lng], {
|
|
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]);
|
|
});
|
|
|
|
globalMarkers.addLayer(marker);
|
|
});
|
|
}
|
|
|
|
// Fix dimensioni mappa
|
|
setTimeout(() => globalMap.invalidateSize(), 200);
|
|
}
|