// On initialise la latitude et la longitude de Panazol (centre de la carte)
var lat =  45.8363;
var lon =   1.3065;
var macarte = null;
// Fonction d'initialisation de la carte
// Créer l'objet "macarte" et l'insèrer dans l'élément HTML qui a l'ID "carte"
var macarte = L.map('carte').setView([lat, lon], 13);
L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
}).addTo(macarte);
// Nous initialisons une liste de marqueurs
var villes = {
  "Panazol": {"lat": 45.8363, "lon": 1.3065},
	"Feytiat": { "lat": 45.8101, "lon": 1.3309 }, 
	"Condat-sur-Vienne": { "lat": 45.7937, "lon": 1.2308 },
	"Landouge": { "lat": 45.8435, "lon": 1.1954 },
	"Isle": { "lat": 45.8052, "lon": 1.2239 }
};
	// Nous parcourons la liste des villes
var marqueurs = {};
for (var ville in villes) {
    marqueurs[ville] = L.marker([villes[ville].lat, villes[ville].lon]).addTo(macarte);
}

// un popup avec du HTML qui est automatiquement ouvert
marqueurs["Panazol"].bindPopup("<b>Hello world!</b><br>Je suis un popup.").openPopup();
// Préparer un contenu HTML avant de l'associer à un popup
contenuHTML = "Documentation";
contenuHTML += " </br>AQCM05";
contenuHTML +=  "<a href='https://www.aqcm.fr'>AQCM05</a>";
marqueurs["Feytiat"].bindPopup(contenuHTML);

// création d'une variable popup vide
var popup = L.popup();
function onMapClick(e) {
   // la variable e contient les informations sur l'événement
   // positionner le popup au coordonnées du clic 
   popup.setLatLng(e.latlng)
   // définir le contenu du popup
   popup.setContent("Vous avez cliqué sur la carte aux coordonnées " + e.latlng.toString())
   //ouvrir le popup sur la carte
   popup.openOn(macarte);
}
// faire exécuter la fonction lors du clic sur la carte
macarte.on('click', onMapClick);
