Bruno21
e627a8e3ff
Nouveautés: - AJAX pour récupérer les données depuis la base - Leaflet pour l’API - Openstreetmap pour les cartes
99 lines
2.9 KiB
JavaScript
99 lines
2.9 KiB
JavaScript
// 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);
|
|
}); |