Le blog de Philippe Poisse

Pré-requis

Leaflet est un framework JavaScript, pour travailler avec il faut donc avoir de bonnes bases en développement avec ce langage. Des connaissances basiques en cartographie suffisent pour utiliser OpenStreetMap dans ce contexte.
Si vous avez l’habitude des mashup avec Google Maps vous n’aurez pas trop de soucis à passer à Leaflet.

Insertion de Leaflet

Comme tous frameworks JavaScript il faudra inclure Leaflet dans votre page Web. Deux solutions s’offrent à vous. Soit vous l’installez directement sur votre hébergement Web soit vous le récupérez directement sur le site officiel.
Personnellement je suis plutôt du genre à héberger les frameworks sur mon site, mais vous êtes maître chez vous.
Dans tous les cas le code à insérer dans l’en-tête de la page sera du type :

<script src="ADRESSE DU FRAMEWORK"></script>

Leaflet utilise aussi du code CSS spécifique du l’affichage de la carte et les icônes par défaut. Il faudra aussi l’insérer dans la page.

<link rel="stylesheet" href="ADRESSE DU FICHIER CSS" />

Je vous invite à télécharger Leaflet sur le site officiel. Avoir le framework installé sur votre serveur de développement vous permettra de jeter un œil sur le code, ce qui est toujours didactique.
La page de téléchargement : http://leafletjs.com/download.html

La page HTML et le code CSS

Dans votre page il faudrait créer une balise DIV qui contiendra la carte.

Dans votre feuille de style CSS il suffira de donner une taille à cette DIV.

#map {
	width: 300px;
	height: 300px;
}

Les bases du fonctionnement de la carte

La carte est instanciée via du JavaScript. Il va falloir lui donner un fond de carte (tileLayer), un centre défini par sa latitude et sa longitude, un niveau de zoom. Il est aussi possible de définir un niveau de zoom maximal, ce qui limite le chargement de tuiles depuis le serveur.
Si vous ne maîtrisez pas trop le concept de zoom voici une page à ce sujet sur le wiki d’OpenStreetMap : http://wiki.openstreetmap.org/wiki/FR:Zoom_levels

Le fond de carte

Pour afficher le fond de carte il faut avoir accès à un serveur de tuiles. Si vous ne pouvez pas vous créer votre propre serveur il faudra utiliser un serveur offrant ce type de service.
J’utilise Mapbox mais comme toujours vous êtes libre d’en utiliser un autre.
Pour vous inscrire et avoir une clé chez Mapbox : https://www.mapbox.com/

Pour créer le fond de carte il faut instancier une variable.

//Fond de carte Mapbox
var mapbox = L.tileLayer('http://{s}.tiles.mapbox.com/v3/ID_CARTE/{z}/{x}/{y}.png', {
		attribution: 'Ma Carte à partir de Leaflet  © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox'
	});

Il faudra remplace ID_CARTE par l’identifiant de votre carte.
Les informations qui suivent « attribution » seront affichées en bas à droite de la carte. C’est à cet endroit que vous pouvez passer les informations sur le copyright par exemple.

Création de la carte en elle-même

Tout va se passer au niveau de la variable « map ».

var map = L.map(
	'map',
	{
		center: new L.LatLng(42.63685, 2.59415),
		zoom: 10,
		maxZoom: 15,
		layers: [mapbox]
	}
);

La deuxième ligne indique l’identifiant de la DIV qui contient la carte.
Entre les accolades on va passer les options de base :
le centre avec ses coordonnées géographiques ;
le niveau de zoom lors du premier affichage de la carte ;
le niveau de zoom maximal autorisé ;
les layers (calques) à afficher au chargement.

Dans la plupart des tutoriels vous ne trouverez pas l’option « layers ». À la place la carte sera instanciée en premier puis le fond de carte sera ajouté à la carte via la fonction « addTo() ». Jetez un coup d’œil sur le site officiel vous comprendrez de quoi je parle.
Je n’utilise pas cette méthode de manière à pouvoir simplifier la gestion des layers en cas d’applications un peu plus complexe. Vous remarquerez que « layers » est écrit au pluriel et non pas au singulier.
J’en parlerai dans un autre billet.

Optimisation

Pour améliorer « l’expérience utilisateur », comme on dit chez les gens biens, le code JavaScript devrait être contenu dans fichier extérieur. Le lien pour l’insérer doit être à la fin de la page, juste avant la fermeture de BODY.

Le code de l'exemple

Voici le code JavaScript écrit dans le fichier carte_tuto.js.

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

Votre carte est crée. Elle ne contient qu’un fond de carte tout simple.
Dans le prochain billet je vous montrerai comme ajouter des marqueurs, des cercles et des polygones.
Si vous êtes pressé n’hésitez pas à lire la documentation officielle :
http://leafletjs.com/examples/quick-start.html
http://leafletjs.com/reference.html