diff --git a/app.js b/app.js
index 8f8399c..b27a15f 100644
--- a/app.js
+++ b/app.js
@@ -113,7 +113,7 @@ modal.addEventListener('click', (e) => {
// ===============================
-// PANNELLO INFO
+// PANNELLO INFO + MAPPA
// ===============================
const infoPanel = document.getElementById('infoPanel');
const infoBtn = document.getElementById('modalInfoBtn');
@@ -127,6 +127,7 @@ infoBtn.addEventListener('click', () => {
// Cartella estratta dal path
const folder = currentPhoto.path.split('/').slice(2, -1).join('/');
+ // HTML del pannello
infoPanel.innerHTML = `
Informazioni
@@ -142,9 +143,27 @@ infoBtn.addEventListener('click', () => {
Tipo: ${currentPhoto.mime_type}
Cartella: ${folder}
+
+ ${gps.lat !== '-' ? '' : ''}
`;
infoPanel.classList.add('open');
+
+ // Se la foto ha coordinate GPS, crea la mappa
+ if (gps.lat !== '-' && gps.lng !== '-') {
+ setTimeout(() => {
+ const map = L.map('infoMap', {
+ zoomControl: false,
+ attributionControl: false
+ }).setView([gps.lat, gps.lng], 13);
+
+ L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+ maxZoom: 19
+ }).addTo(map);
+
+ L.marker([gps.lat, gps.lng]).addTo(map);
+ }, 50);
+ }
});
// Chiudi pannello cliccando fuori
diff --git a/index.html b/index.html
index 7409425..43137c3 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,7 @@
Galleria Foto
+
@@ -39,7 +40,7 @@
-
+
diff --git a/style.css b/style.css
index 049e3e9..febe5d3 100644
--- a/style.css
+++ b/style.css
@@ -125,3 +125,18 @@ header {
display: inline-block;
width: 110px;
}
+
+.info-map {
+ width: 100%;
+ height: 250px;
+ margin-top: 15px;
+ border-radius: 6px;
+ overflow: hidden;
+ border: 1px solid #ccc;
+}
+
+/* Leaflet */
+.leaflet-container {
+ background: #ddd;
+ outline: none;
+}