Leaflet JS

Introduction:

Ce tutoriel vous permettra de commencer votre première expérience en Webmapping qui devient de plus en plus primordiale dans les sites web actuels.

Avant de commencer à créer votre première carte, Allons voir d’abord une petite présentation du l’API Leaflet JS.

Leaflet est une bibliothèque javascript créée par Vladimir Agafonkin, elle est simple à utiliser et comprend toute fonctionnalité nécessaire soit sur la bibliothèque principale soit par les plugins crées par les autres programmeurs puisqu’elle est open source.

Sans tarder, voilà comment créer votre première carte Leaflet :

1- Dans votre code html, ajouter les lignes suivantes sinon télécharger la bibliothèque du lien suivant si vous voulez travailler en local (http://leafletjs.com/download.html)

2- Ajouter à votre code un div pour contenir votre carte et qu’on va lui donner map comme Id avec un style de votre choix selon les dimensions voulues :

3- Puis on ajoute la carte au div ainsi :

Ce code est aussi valable :

var map = L.map(‘map’).setView([34.0132500, -6.8325500],10);

4- Notre carte s’affichera ainsi :

5- La dernière étape est d’ajouter ce qu’on appelle Tile layer. Je tiens à vous rappeler que Leaflet accepte plusieurs types de tiles que nous allons voir prochainement, Pour notre exemple on va choisir Open Street Maps. Et c’est sur celle ci que nous allons ajouter par la suite nos points (markers), nos lignes (lines)…

6- Ouvrir votre fichier et voilà votre carte apparaitre comme suit :

Veuillez-nous savoir ci-dessous si vous avez des questions ou des commentaires.