87 lines
2.4 KiB
JavaScript
87 lines
2.4 KiB
JavaScript
// ===============================
|
|
// MAPPA GLOBALE (marker personalizzati)
|
|
// ===============================
|
|
|
|
document.getElementById("openMapBtn").addEventListener("click", openGlobalMap);
|
|
|
|
function openGlobalMap() {
|
|
const mapDiv = document.getElementById("globalMap");
|
|
const gallery = document.getElementById("gallery");
|
|
|
|
const isOpen = mapDiv.classList.contains("open");
|
|
|
|
if (isOpen) {
|
|
mapDiv.classList.remove("open");
|
|
gallery.classList.remove("hidden");
|
|
return;
|
|
}
|
|
|
|
mapDiv.classList.add("open");
|
|
gallery.classList.add("hidden");
|
|
|
|
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; // la prima foto del gruppo
|
|
|
|
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);
|
|
|
|
// 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 (serve per il cluster)
|
|
marker.photoData = photo;
|
|
|
|
marker.on("click", () => {
|
|
// QUI poi apriremo il pannello inferiore
|
|
openModal(
|
|
`https://prova.patachina.it/${photo.path}`,
|
|
photo.thub2
|
|
? `https://prova.patachina.it/${photo.thub2}`
|
|
: `https://prova.patachina.it/${photo.thub1}`,
|
|
photo
|
|
);
|
|
});
|
|
|
|
globalMarkers.addLayer(marker);
|
|
});
|
|
}
|
|
|
|
setTimeout(() => globalMap.invalidateSize(), 200);
|
|
}
|