Le blog de Philippe Poisse

Les marqueurs

Les marqueurs sont les éléments les plus simples à afficher sur une carte. Il suffit juste d’avoir les coordonnées du point.

var marker = L.marker([42.63685, 2.59415]).addTo(map);

Vous remarquez que les coordonnées sont entre crochets [ ].
En gros on instancie la variable marker, on lui passe les coordonnées et on l’ajoute à la carte avec la fonction addTo().
Pour insérer plusieurs marqueurs il suffit de multiplier les variables : marker1, marker2, etc.

Les cercles

Les cercles peuvent être utiles pour créer des cartes servant à comparer des données. Un exemple est disponible à cette adresse : http://www.portailsig.org/content/leaflet-la-simple-2-cercles-proportionnels.

Le code est très proche de celui utiliser pour les marqueurs.

var circle = L.circle([42.7, 2.7], 500, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
}).addTo(map);

Entre crochets il faudra écrire les coordonnées du centre du cercle ; le chiffre après les coordonnées indique le rayon (radius en anglais) du cercle, il est exprimé en mètre (le développeur de Leaflet est européen) ; entre accolades les données sur le style de cercle seront passées, il s’agit de la couleur du disque (color), de la couleur du cercle extérieurs (fillColor) et de l’opacité du disque (fillOpacity). Les couleurs peuvent être indiquées en hexadécimal ou en utilisant des couleurs nommées. En gros c’est du CSS, pas de quoi fouetter un chat.

Comme pour les marqueurs, vous pouvez afficher autant de cercles que vous le voulez.

Les polygones

Les polygones sont simplement des points reliés par des segments. Il suffit donc de passer en arguments de la variable polygon les coordonnées des points.

var polygon = L.polygon([
    [42.75, 2.75],
    [42.76, 2.75],
    [43, 2.75]
]).addTo(map);

En pratique pour dessiner un segment il suffira de n’indiquer que 2 points.

Ajouter un popup

Lorsque l’utilisateur clique sur un point, un cercle ou polygone il peut être intéressant d’afficher des informations via une infobulle (popup).

marker.bindPopup("Hello world!
Je suis un popup.") ;
circle.bindPopup("Je suis un cercle");
polygon.bindPopup("Je suis un polygone");

La fonction bindPopup permet d’attacher une infobulle à un marqueur, un cercle ou un polygone. Le texte à afficher dans l’infobulle est passé en paramètre. Ce texte peut être du HTML, ce qui permet une mise en forme ou l’affichage d’images, de vidéos, etc.
Pour afficher un popup dès le chargement de la carte il faudra rajouter la fonction openPopup().

marker.bindPopup("Hello world!
Je suis un popup.").openPopup();

Le code complet de l'exemple

//Fond de carte Mapbox
var mapbox = L.tileLayer('http://{s}.tiles.mapbox.com/v3/phil6611.ikebkh58/{z}/{x}/{y}.png', {
                attribution: 'Carte des Pyrénées-Orientales © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox'
            });


//Création de la carte. La div a pour identifiant "map_tuto"
var map = L.map('map_tuto', {
    center: new L.LatLng(42.63685, 2.59415),
    zoom: 10,
    maxZoom: 15,
    layers: [mapbox]
});

//Création d'un marqueur
var marker = L.marker([42.63685, 2.59415]).addTo(map);


//Création d'un cercle
var circle = L.circle([42.65, 2.65], 500, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
}).addTo(map);

//Création d'un polygone
var polygon = L.polygon([
    [42.6, 2.7],
    [42.67, 2.7],
    [42.7, 2.75]
]).addTo(map);


//Création des popup
marker.bindPopup("Hello world!<br />Je suis un popup.").openPopup();
circle.bindPopup("Je suis un cercle");
polygon.bindPopup("Je suis un polygone");

Après la lecture de ces deux premiers tutoriels vous devez être capable de réaliser une carte simple avec des points et des formes géométriques.