maps.php

Nouveautés: - AJAX pour récupérer les données depuis la base - Leaflet pour l’API - Openstreetmap pour les cartes
2025-02-18 15:38:23 +01:00
parent cab19ef683
commit e627a8e3ff
26 changed files with 1409 additions and 157 deletions
--- a/maps/js/scripts.js
+++ b/maps/js/scripts.js
@@ -0,0 +1,99 @@
+// On déclare les coordonnées de Paris
+//let lat = 48.852969;
+//let long = 2.349903;
+// On déclare les coordonnées de Dijon
+let lat = 47.316669;
+let long = 5.01667;
+let limites = [];
+let markers = L.markerClusterGroup();
+
+let map = L.map("map", {
+    zoom: 13,
+    center: [lat, long]
+});
+
+
+L.tileLayer("https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png", {
+    minZoom: 1,
+    maxZoom: 20,
+    attribution: 'données © <a href="//osm.org/copyright">OpenStreetMap</a>/ODbL - rendu <a href="//openstreetmap.fr">OSM France</a>'
+}).addTo(map); 
+
+
+// On charge sites.json
+fetch("/maps/api/liste.php")
+    .then(data => data.json())
+    .then(sites => {
+        // On boucle sur les sites
+        for(let site of sites){
+            let coords = [site.lat, site.long];
+            
+            // On charge l'icône du marqueur
+            let icone = L.icon({
+                iconUrl: "/maps/images/poi.png",
+                iconSize: [41,41],
+                iconAnchor: [12.5, 41],
+                popupAnchor: [0, -41]
+/*
+                iconUrl: "/maps/images/pin.png",
+                iconSize: [25,41],
+*/
+            });
+            
+            // On crée le marqueur pour chaque site
+            let marker = L.marker(coords, {
+                icon: icone
+            });
+
+/*
+	$lightbox['title_thumb'] = $title_thumb;
+	$lightbox['exif'] = $exif;
+	$lightbox['title'] = $x;
+	$lightbox['legende'] = $y;
+	$lightbox['thumb'] = $thumb;
+	$lightbox['big'] = $big;
+	$lightbox['keywords'] = $keywords;
+	$lightbox['creator'] = $creator;
+	$lightbox['gps'] = $gps;
+	$lightbox['lat'] = $latitude;
+	$lightbox['long'] = $longitude;
+	$lightbox['description'] = $description;
+	$lightbox['width'] = $width;
+	$lightbox['height'] = $height;
+	<img src="${site.thumb}" alt="${site.filename}"  width="300" height="300">
+	<img src="${site.thumb}" alt="${site.filename}"  width="`+largeur+`" height="`+hauteur+`">
+*/
+
+			if ( parseInt(site.width) <= parseInt(site.height) ) {
+				largeur = 200;
+				hauteur = 300;
+			}
+			else
+			{
+				largeur = 300;
+				hauteur = 200;
+			}
+			
+            let popup = `<div class="popup">
+            <div>
+            				<a href="${site.big}" title="${site.title_thumb}" data-lcl-txt="${site.description}" data-lcl-author="${site.creator}">
+                            	<img src="${site.thumb}" alt="${site.filename}"  width="`+largeur+`" height="`+hauteur+`">
+                            </a>
+                            
+                                <h2>${site.title_thumb}</h2>
+                                <p>${site.exif}</p>
+                            </div>
+                        </div>`;
+
+            marker.bindPopup(popup);
+            limites.push(coords);
+
+            // On ajoute le marqueur au cluster
+            markers.addLayer(marker);
+        }
+
+        // On ajoute les clusters à la carte
+        map.addLayer(markers);
+
+        map.fitBounds(limites);
+    });