3
This commit is contained in:
parent
b842692346
commit
f6e1102508
3 changed files with 37 additions and 2 deletions
21
app.js
21
app.js
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
15
style.css
15
style.css
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue