This commit is contained in:
Fabio 2026-02-21 09:49:54 +01:00
parent b842692346
commit f6e1102508
3 changed files with 37 additions and 2 deletions

21
app.js
View file

@ -113,7 +113,7 @@ modal.addEventListener('click', (e) => {
// =============================== // ===============================
// PANNELLO INFO // PANNELLO INFO + MAPPA
// =============================== // ===============================
const infoPanel = document.getElementById('infoPanel'); const infoPanel = document.getElementById('infoPanel');
const infoBtn = document.getElementById('modalInfoBtn'); const infoBtn = document.getElementById('modalInfoBtn');
@ -127,6 +127,7 @@ infoBtn.addEventListener('click', () => {
// Cartella estratta dal path // Cartella estratta dal path
const folder = currentPhoto.path.split('/').slice(2, -1).join('/'); const folder = currentPhoto.path.split('/').slice(2, -1).join('/');
// HTML del pannello
infoPanel.innerHTML = ` infoPanel.innerHTML = `
<h3>Informazioni</h3> <h3>Informazioni</h3>
@ -142,9 +143,27 @@ infoBtn.addEventListener('click', () => {
<div class="info-row"><b>Tipo:</b> ${currentPhoto.mime_type}</div> <div class="info-row"><b>Tipo:</b> ${currentPhoto.mime_type}</div>
<div class="info-row"><b>Cartella:</b> ${folder}</div> <div class="info-row"><b>Cartella:</b> ${folder}</div>
${gps.lat !== '-' ? '<div id="infoMap" class="info-map"></div>' : ''}
`; `;
infoPanel.classList.add('open'); 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 // Chiudi pannello cliccando fuori

View file

@ -4,6 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>Galleria Foto</title> <title>Galleria Foto</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
</head> </head>
<body> <body>
@ -39,7 +40,7 @@
<script> <script>
console.log("Caricamento pagina OK"); console.log("Caricamento pagina OK");
</script> </script>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="app.js"></script> <script src="app.js"></script>
</body> </body>

View file

@ -125,3 +125,18 @@ header {
display: inline-block; display: inline-block;
width: 110px; 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;
}