Afficher des cartes avec Leaflet

Leaflet propose des fonctions spéciales qui permettent de gérer les événements produits par l'utilisateur (clic souris, passage du curseur de la souris sur un marker,...). Ces fonctions qui aident à gérer les événements s'appellent des "listeners" ("écouteurs" en français).

Pour créer un "listener" pour l'événement "clic sur la carte", il suffit d'utiliser une structure du type :


map.on('click',clicSurCarte)

"map" correspond à l'objet qui est "surveillé"
"click" correspond au type d'événement (ici clic de souris)
"clicSurCarte" est le nom de la fonction qui sera exécutée si l'événement surveillé est déclenché par l'utilisateur (ici donc un "clic de souris sur la carte"). Ce type de fonction est appelée fonction de "callback".

À faire vous-même 4.1

À l'aide d'un éditeur de texte, saisissez le code suivant dans le fichier "script.js" puis testez cet exemple.

script.js


var map = L.map('map');
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © OpenStreetMap contributors';
var osm = new L.TileLayer(osmUrl, {attribution: osmAttrib});
map.setView([47.0, 3.0], 6);
map.addLayer(osm);
map.on('click',clicSurCarte);
function clicSurCarte(){
    alert("Vous avez cliqué sur la carte");
}

La fonction de "callback" peut prendre un paramètre "event" qui nous donnera des informations sur l'événement.

À faire vous-même 4.2

À l'aide d'un éditeur de texte, saisissez le code suivant dans le fichier "script.js" puis testez cet exemple.

script.js


var map = L.map('map');
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © OpenStreetMap contributors';
var osm = new L.TileLayer(osmUrl, {attribution: osmAttrib});
map.setView([47.0, 3.0], 6);
map.addLayer(osm);
map.on('click',clicSurCarte);
function clicSurCarte(event){
    var latlong=event.latlng
    alert("Vous avez cliqué sur la carte à la position : "+latlong);
}

"event.latlng" renvoie un objet de type "LatLng" qui contient la latitude et la longitude d'un point (ici la latitude et la longitude du point situé sous le curseur de la souris au moment du clic).

Il est possible d'utiliser directement l'objet de type "LatLng" à la place du tableau "[latitude, longitude]" que nous avons utilisé pour la création de markers et de pop-up.

Un objet de type "LatLng" possède 2 attributs : "lat" et "lng". Dans l'exemple ci-dessus un "latlong.lat" renverra la latitude et "latlong.lng" renverra la longitude

À faire vous-même 4.3

Créez un programme qui permettra de placer un marker à la position du curseur de la souris au moment du clic.

Il est possible de définir un événement sur un marker (ou un pop-up) :


marker.on('click',clicMarker);

Le principe est exactement le même que précédemment, sauf que l'événement sera déclenché uniquement en cas de clic sur le marker "marker".

Il est possible d'utiliser une boucle pour attribuer des listeners à différents markers.

À faire vous-même 4.4

À l'aide d'un éditeur de texte, saisissez le code suivant dans le fichier "script.js" puis testez cet exemple.

script.js


var tabCoord=[[46.079722, 6.401389],[45,6],[47.466702,0.7],[43.787222,-1.403056],[46.53972,2.43028]]
var map = L.map('map');
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © OpenStreetMap contributors';
var osm = new L.TileLayer(osmUrl, {attribution: osmAttrib});
map.setView([47.0, 3.0], 6);
map.addLayer(osm);
for (i=0;i<tabCoord.length;i++){
    var marker = L.marker(tabCoord[i]);
    marker.on('click',clicMarker);
    marker.addTo(map);
}
function clicMarker(){
    alert("Vous avez cliqué sur un marker");
}

Dans l'exemple ci-dessus, la fonction "clicMarker" est exécutée uniquement en cas de clic sur un marker.

Le mot-clé "this" représente le marker qui a réellement "subi" le clic :

À faire vous-même 4.4

À l'aide d'un éditeur de texte, saisissez le code suivant dans le fichier "script.js" puis testez cet exemple.

script.js


var tabCoord=[[46.079722, 6.401389],[45,6],[47.466702,0.7],[43.787222,-1.403056],[46.53972,2.43028]]
var map = L.map('map');
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © OpenStreetMap contributors';
var osm = new L.TileLayer(osmUrl, {attribution: osmAttrib});
map.setView([47.0, 3.0], 6);
map.addLayer(osm);
for (i=0;i<tabCoord.length;i++){
    var marker = L.marker(tabCoord[i]);
    marker.on('click',clicMarker);
    marker.addTo(map);
}
function clicMarker(event){
    alert ("Vous allez supprimer le marker situé aux coordonnées : "+event.latlng);
    map.removeLayer(this);
}

Il existe beaucoup d'autres "événements" que l'on peut surveiller. Pour avoir une liste exhaustive des événements, consultez la documentation officielle.

À faire vous-même 4.5

Créez un programme qui permettra de placer un marker à la position du curseur de la souris au moment du "doubleclic" et qui permettra d'effacer un marker en cas de "doubleclic" sur ce dernier.

Il est aussi possible d'associer des événements avec les figures géométriques :

À faire vous-même 4.6

À l'aide d'un éditeur de texte, saisissez le code suivant dans le fichier "script.js" puis testez cet exemple.

script.js


var map = L.map('map');
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © OpenStreetMap contributors';
var osm = new L.TileLayer(osmUrl, {attribution: osmAttrib});
map.setView([47.0, 3.0], 6);
map.addLayer(osm);
var poly=L.polygon([[44,0],[44.7,1],[45.3,1.33],[46,2.5],[46.9,0]]);
poly.on('mouseover',polyIn);
poly.on('mouseout',polyOut);
poly.on('click',polyErase)
poly.addTo(map);

function polyIn(){
    poly.setStyle({color:"#ff0000", weight:3, fillColor:"#00ff00"});
}
function polyOut(){
    poly.setStyle({fillColor:"#0000ff"});
}
function polyErase(){
    map.removeLayer(this);
}

Nous venons juste d'entrevoir les possibilités offertes par leaflet. Pour en apprendre plus :

n'hésitez pas à consulter la documentation officielle qui est très bien faite : voir ici
voici un tutoriel en français sur leaflet : voir ici.
un livre en ligne consacré à Leaflet : voir ici