Fabio/my_gallery
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

9

Browse source
This commit is contained in:
Fabio 2026-02-21 18:16:00 +01:00
parent da0e3aa992
commit 830cdc923f
2 changed files with 98 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
js/mapGlobal.js
View file

@ -1,6 +1,7 @@
// ===============================
// MAPPA GLOBALE
// MAPPA GLOBALE (marker personalizzati)
// ===============================
document.getElementById("openMapBtn").addEventListener("click", openGlobalMap);
function openGlobalMap() {
@ -25,15 +26,50 @@ function openGlobalMap() {
maxZoom: 19
}).addTo(globalMap);
globalMarkers = L.markerClusterGroup();
// 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 marker = L.marker([photo.gps.lat, photo.gps.lng]);
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

59
style.css
View file

@ -212,3 +212,62 @@ header {
.global-map.open {
display: block;
}
/* ===============================
MARKER FOTO (singolo)
=============================== */
.photo-marker {
width: 48px;
height: 48px;
border-radius: 10px;
overflow: hidden;
position: relative;
box-shadow: 0 2px 6px rgba(0,0,0,0.25);
background: #fff;
}
.photo-marker img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ===============================
CLUSTER FOTO (sovrapposizione)
=============================== */
.photo-cluster {
width: 56px;
height: 56px;
position: relative;
border-radius: 12px;
overflow: visible; /* serve per far uscire la miniatura dietro */
}
/* Miniatura dietro (sfocata + opacità) */
.cluster-back {
position: absolute;
top: 6px;
left: 6px;
width: 48px;
height: 48px;
border-radius: 10px;
object-fit: cover;
opacity: 0.5;
filter: blur(1px);
transform: scale(0.95);
}
/* Miniatura davanti (principale) */
.cluster-front {
position: absolute;
top: 0;
left: 0;
width: 48px;
height: 48px;
border-radius: 10px;
object-fit: cover;
box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}