7
This commit is contained in:
parent
4d11fee0cd
commit
9cfdef19df
3 changed files with 107 additions and 3 deletions
65
app.js
65
app.js
|
|
@ -6,6 +6,10 @@ const API_URL = 'https://prova.patachina.it/photos';
|
|||
let photosData = [];
|
||||
let currentPhoto = null;
|
||||
|
||||
// Mappa globale
|
||||
let globalMap = null;
|
||||
let globalMarkers = null;
|
||||
|
||||
// ===============================
|
||||
// DEBUG INIZIALE
|
||||
// ===============================
|
||||
|
|
@ -93,7 +97,6 @@ function renderGallery(photos) {
|
|||
// MODALE (FOTO + VIDEO)
|
||||
// ===============================
|
||||
const modal = document.getElementById('modal');
|
||||
const modalImg = document.getElementById('modalImage'); // NON USATO PIÙ
|
||||
const modalClose = document.getElementById('modalClose');
|
||||
|
||||
function openModal(srcOriginal, srcPreview, photo) {
|
||||
|
|
@ -103,7 +106,6 @@ function openModal(srcOriginal, srcPreview, photo) {
|
|||
container.innerHTML = ""; // pulizia
|
||||
|
||||
if (photo.mime_type.startsWith("video/")) {
|
||||
// VIDEO
|
||||
const video = document.createElement("video");
|
||||
video.src = srcOriginal;
|
||||
video.controls = true;
|
||||
|
|
@ -112,7 +114,6 @@ function openModal(srcOriginal, srcPreview, photo) {
|
|||
video.style.maxHeight = "100%";
|
||||
container.appendChild(video);
|
||||
} else {
|
||||
// FOTO
|
||||
const img = document.createElement("img");
|
||||
img.src = srcPreview;
|
||||
img.style.maxWidth = "100%";
|
||||
|
|
@ -202,6 +203,64 @@ document.addEventListener('click', (e) => {
|
|||
});
|
||||
|
||||
|
||||
// ===============================
|
||||
// MAPPA GLOBALE
|
||||
// ===============================
|
||||
document.getElementById("openMapBtn").addEventListener("click", openGlobalMap);
|
||||
|
||||
function openGlobalMap() {
|
||||
const mapDiv = document.getElementById("globalMap");
|
||||
const gallery = document.getElementById("gallery");
|
||||
|
||||
// TOGGLE
|
||||
const isOpen = mapDiv.classList.contains("open");
|
||||
|
||||
if (isOpen) {
|
||||
// Chiudi mappa → mostra gallery
|
||||
mapDiv.classList.remove("open");
|
||||
gallery.classList.remove("hidden");
|
||||
return;
|
||||
}
|
||||
|
||||
// Apri mappa → nascondi gallery
|
||||
mapDiv.classList.add("open");
|
||||
gallery.classList.add("hidden");
|
||||
|
||||
// Inizializza mappa solo la prima volta
|
||||
if (!globalMap) {
|
||||
globalMap = L.map("globalMap").setView([42.5, 12.5], 6);
|
||||
|
||||
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
|
||||
maxZoom: 19
|
||||
}).addTo(globalMap);
|
||||
|
||||
globalMarkers = L.markerClusterGroup();
|
||||
globalMap.addLayer(globalMarkers);
|
||||
|
||||
photosData.forEach(photo => {
|
||||
if (!photo.gps || !photo.gps.lat || !photo.gps.lng) return;
|
||||
|
||||
const marker = L.marker([photo.gps.lat, photo.gps.lng]);
|
||||
|
||||
marker.on("click", () => {
|
||||
openModal(
|
||||
`https://prova.patachina.it/${photo.path}`,
|
||||
photo.thub2
|
||||
? `https://prova.patachina.it/${photo.thub2}`
|
||||
: `https://prova.patachina.it/${photo.thub1}`,
|
||||
photo
|
||||
);
|
||||
});
|
||||
|
||||
globalMarkers.addLayer(marker);
|
||||
});
|
||||
}
|
||||
|
||||
// Fix dimensioni mappa quando appare
|
||||
setTimeout(() => globalMap.invalidateSize(), 200);
|
||||
}
|
||||
|
||||
|
||||
// ===============================
|
||||
// AVVIO
|
||||
// ===============================
|
||||
|
|
|
|||
11
index.html
11
index.html
|
|
@ -9,16 +9,24 @@
|
|||
|
||||
<!-- Leaflet CSS -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
|
||||
|
||||
<!-- MarkerCluster CSS -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.css" />
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.Default.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1>Galleria Foto</h1>
|
||||
<button id="openMapBtn" class="map-btn">🗺️ Mappa</button>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div id="gallery" class="gallery"></div>
|
||||
|
||||
<!-- Mappa globale -->
|
||||
<div id="globalMap" class="global-map"></div>
|
||||
</main>
|
||||
|
||||
<!-- Modal Media (foto + video) -->
|
||||
|
|
@ -39,6 +47,9 @@
|
|||
<!-- Leaflet JS -->
|
||||
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
||||
|
||||
<!-- MarkerCluster JS -->
|
||||
<script src="https://unpkg.com/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
|
||||
|
||||
<!-- Eruda Debug Console -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
|
||||
<script>
|
||||
|
|
|
|||
34
style.css
34
style.css
|
|
@ -178,3 +178,37 @@ header {
|
|||
background: #ddd;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.map-btn {
|
||||
margin-left: 10px;
|
||||
padding: 6px 12px;
|
||||
background: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.global-map {
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: calc(100vh - 60px);
|
||||
z-index: 900;
|
||||
}
|
||||
|
||||
.global-map.open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.gallery.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.global-map {
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: calc(100vh - 60px);
|
||||
}
|
||||
|
||||
.global-map.open {
|
||||
display: block;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue