From 830cdc923f9a07dc4533133c61b2729e3cb9f51c Mon Sep 17 00:00:00 2001
From: Fabio <fabio.micheluz@gmail.com>
Date: Sat, 21 Feb 2026 18:16:00 +0100
Subject: [PATCH] 9

---
 js/mapGlobal.js | 42 ++++++++++++++++++++++++++++++++---
 style.css       | 59 +++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 98 insertions(+), 3 deletions(-)

diff --git a/js/mapGlobal.js b/js/mapGlobal.js
index fd0e257..c8017f7 100644
--- a/js/mapGlobal.js
+++ b/js/mapGlobal.js
@@ -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
diff --git a/style.css b/style.css
index 9a1a6da..cdb229c 100644
--- a/style.css
+++ b/style.css
@@ -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);
+}