Afficher des cartes avec Leaflet

Leaflet permet de placer des marqueurs sur une carte, tout simplement en renseignant la longitude et la latitude du marqueur.

À faire vous-même 3.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);
//on ajoute le marqueur ci-dessous
var marker = L.marker([46.079722, 6.401389]);
marker.addTo(map);

Rien de complexe dans ce code :

"var marker = L.marker([46.079722, 6.401389]);" nous définissons un "marker" en donnant sa latitude et sa longitude.
"marker.addTo(map);" permet d'ajouter le "marker" à la carte.

Pour effacer un "marker", il suffit d'utiliser la méthode "removeLayer". Cette méthode prend en paramètre le nom du "marker" :


map.removeLayer(marker);

À faire vous-même 3.2

Voici un tableau qui contient différentes coordonnées (latitude, longitude) :


var tabCoord=[[46.079722, 6.401389],[45,6],[47.466702,0.7],[43.787222,-1.403056],[46.53972,2.43028]]

Créez un programme permettant de placer des "markers" à ces différents endroits (vous devrez évidemment utiliser une boucle)

Il est possible de placer des messages sur la carte à l'aide de "pop-up"

À faire vous-même 3.3

À 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);
//on ajoute un pop-up
var popup = L.popup();
popup.setLatLng([46.079722, 6.401389]);
popup.setContent("<p>Bonneville</p><p>12479 habitants (en 2012)</p>");
popup.openOn(map);

Quelques mots sur ce code :

"var popup = L.popup();" permet de créer un pop-up
"popup.setLatLng([46.079722, 6.401389]);" permet de définir les coordonnées du pop-up
"popup.setContent("<p>Bonneville</p><p>12479 habitants (en 2012)</p>")" permet de définir le texte affiché par le pop-up
"popup.openOn(map);" permet d'afficher le pop-up sur la carte.

Un pop-up peut être directement relié à un marker (un clic sur le marker fera apparaitre le pop-up) :

À faire vous-même 3.4

À 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 marker = L.marker([46.079722, 6.401389]);
marker.bindPopup("<p>Bonneville</p><p>12479 habitants (en 2012)</p>");
marker.addTo(map);

Leaflet propose énormément d'options possibles pour les markers et les pop-up, pour en savoir plus, n'hésitez pas à consulter la documentation officielle : pour les markers et pour les pop-up

Leaflet permet de "dessiner" sur la carte, voici quelques méthodes qui pourront vous êtes utiles :

la méthode "polyline" vous permet de dessiner une "ligne brisée", cette méthode prend en paramètre un tableau constitué des coordonnées des sommets successifs de la ligne brisée
la méthode "polygon" vous permet de dessiner un polygone, cette méthode prend en paramètre un tableau constitué des coordonnées des sommets du polygone
la méthode "circle" vous permet de dessiner un cercle, cette méthode prend pour premier paramètre un tableau constitué des coordonnées du centre du cercle et pour second paramètre le rayon du cercle.

Leaflet propose d'autres figures géomètriques que je vous laisse découvrir en consultant la documentation officielle.

À faire vous-même 3.5

À 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 ligne=L.polyline([[45,3],[46,3],[45.5,4],[47,3.5]]);
ligne.addTo(map);
var poly=L.polygon([[44,0],[44.7,1],[45.3,1.33],[46,2.5],[46.9,0]]);
poly.addTo(map);
var cercle=L.circle([46.079722, 6.401389],50000);
cercle.addTo(map);

La méthode "setStyle" permet de modifier le style des figures géométriques, comme par exemple :

la couleur du trait (color)
l'épaisseur du trait (weight)
la couleur de "remplissage" (fillColor)

pour avoir une liste exhaustive des propriétés qui peuvent être modifiées, consulter la documentation officielle.

À faire vous-même 3.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.setStyle({color:"#ff0000", weight:3, fillColor:"#00ff00"});
poly.addTo(map);

Remarques :

la méthode "setStyle" prend en paramètre un objet JavaScript qui a pour attributs les propriétés à modifier.
les couleurs sont données au format rgb hexadécimal

Il est possible d'associer des pop-up aux figures géométriques :

À faire vous-même 3.7

À 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.setStyle({color:"#ff0000", weight:3, fillColor:"#00ff00"});
poly.bindPopup("<p>Cela fonctionne aussi avec un polygone !</p>");
poly.addTo(map);