// 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);
    });