En ces temps de confinement, c’est l’opportunité idéale de dépoussiérer les manuels et tuto de programmation que vous repoussiez depuis tant d’années. Et pour un géomaticien, quoi de mieux que profiter de cette assignation à résidence pour faire ses premiers pas en SIG web avec Leaflet.
Créée en 2011 par Vladimir Agafonkin, Leaflet est une librairie Javascript (JS) dédiée au web mapping. D’autres librairies JS comme OpenLayers ou Cesium sont concurrentes de Leaflet, mais cette dernière reste actuellement l’alternative à GoogleMap la plus populaire. L’USGS, la presse (NY Times, Guardian, etc), la NASA, et plein d’autres sociétés utilisent Leaflet dans leurs applications web. D’ailleurs, la librairie est régulièrement mise à jour par une core-team.
Vous n’avez jamais écrit en Javascript ? Ni en HTML ? Pas d’inquiétude, ces premiers pas sur Leaflet seront aussi l’occasion de s’initier, par étape, au plus répandu des langages web.
Avant de commencer, une petite précision : dans ce tutoriel, nous mélangerons dans un même fichier du HTML, du CSS et du JS. En programmation, il est (très) préférable de séparer ces trois langages dans trois fichiers distincts. Mais pour rendre cette initiation la plus accessible, nous écrirons tout dans le même fichier. On s’appuiera un peu sur la documentation de LeafletJS.com, gardez donc une page de votre navigateur ouverte sur ce site.
Dernière (vraiment) petite précision : on travaillera sur Windows, désolé les Linuxiens et Stevejobistes.
1) Créez un fichier HTML
Ouvrez votre éditeur de texte préféré et créez-y un nouveau fichier HTML (tapez juste le head et le body) que vous intitulerez « index.html ». Enregistrerez-le dans votre répertoire-projet. Vous obtenez à peu près ça :
2) Intégrez les fichiers CSS et JS de Leaflet
Donnez un titre à votre projet : mettons « Premier tuto Leaflet ». Puis ajoutez les fichiers CSS et JS de Leaflet dans le head de votre page HTML que vous trouverez ici. Veillez à bien les insérer après les balises ‘title’.
3) Créez la div qui accueillera la carte Leaflet
Une « div » en HTML, c’est l’équivalent d’une case qui découpe votre page web. Vous pouvez donner n’importe quelle hauteur, largeur, couleur à votre case, l’essentiel est de savoir qu’une page HTML s’organise en une série de div.
Dans le body, déclarez votre div à laquelle on donnera l’id « divcarte ». Nous souhaitons que cette div occupe l’entièreté de la page HTML. Il nous faut donc attribuer des propriétés CSS à notre body puis à notre div « divcarte ». Ouvrez une balise ‘style’ et entrez ces quelques lignes avant la fin du head :
A présent, ouvrez une balise ‘script’ dans le body à la suite de votre div (et pas avant). Ces balises permettent d’écrire du code Javascript. A l’intérieur de cette balise ‘script’, on y déclare la variable « carte » et on utilise la méthode map() comme ceci :
Le mot-clé « var » est utilisé pour déclarer une variable en JS, mais il est facultatif. Notre variable « carte » contient le résultat de la fonction map() appliquée à notre div « divcarte ».
Et là vous vous demandez quelle est la différence entre une fonction et une méthode ? En Javascript, une méthode n’est rien de plus qu’une fonction appartenant à un objet. Ici, la fonction map() appartient à l’objet « L » et lui permet en quelque sorte d’agir. En utilisant cette fonction on va commander à l’objet « L » de créer une interface cartographique dans la div « divcarte ».
Maintenant enregistrez votre code et double-cliquez sur votre fichier HTML. Votre navigateur s’ouvrira et vous tomberez sur une page totalement grisée, avec en haut à gauche deux onglets « + » et « – » et l’attribution « Leaflet » en bas à droite. Ce rectangle gris, c’est la div « divcarte » de votre nouvelle variable « carte ». Vous voulez en avoir le cœur net ? Interrogez la console de votre navigateur !
Ouvrez la console JS (F12, onglet « console ») et tapez-y « console.log(carte) ». Si la console JS vous renvoie un message d’erreur, c’est que vous avez mal déclaré votre variable. Sinon, déroulez l’onglet « Object » et à la première ligne vous obtiendrez votre div « divcarte » : si vous passez votre curseur dessus, les contours de la div apparaitront graphiquement à l’écran.
Votre variable carte existe ! Maintenant que vous en avez la certitude, il faut définir les coordonnées spatiales du centre de notre carte (la CY University, of course) et lui donner une échelle. On utilisera la méthode setView() :
var carte = L.map(« divcarte »).setView([49.03898, 2.07501], 16);
Les coordonnées doivent être entrées dans des crochets, suivies de l’échelle. Comme vous pouvez le constater, on a « collé » nos deux méthodes map() et setView(), JS permettant de « chainer » des fonctions. Si vous êtes curieux, refaites un coup de console.log(), vous verrez les coordonnées de l’université de Cergy apparaître en déroulant l’onglet « Object ».
Votre web map a donc bien été créée ! Vous n’y voyez pas de carte, pas de panique ! Ce qu’il vous manque, ce sont des tuiles vectorielles pour afficher el famoso fond de carte.
4) Ajoutez vos tuiles vectorielles
Dans le monde des SIG, les fonds de carte sont communément appelés des « tiles layers ». Ce sont des groupes de fichiers PNG qui tapissent votre carte en fonction de l’échelle et des coordonnées du point central de votre carte. Laissez tomber l’exemple du tutoriel Leaflet avec le token Mapbox, on va directement appeler ces tuiles vectorielles d’OpenStreetMap (oui, LeafletJS.com fait de la pub pour Mapbox).
On va utiliser les méthodes tileLayer() pour lui indiquer l’URL d’import des paquets de tuiles vectorielles, puis addTo() pour ajouter les tuiles vectorielles à notre carte. Entrez cette ligne de code à la suite de votre variable « carte » :
var tuiles = L.tileLayer(« https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png »).addTo(carte);
Sauvegardez votre code, double-cliquez sur votre fichier HTML, et voilà ! Vous avez obtenu votre première web map de la CY University, sur un fond OpenStreetMap !
Avant de nous quitter, vous vous demandez peut-être pourquoi un « L » majuscule précède systématiquement chacune de nos méthodes ? Et bien ce « L » est l’objet central de la librairie Leaflet que nous avions importée dans le head, et auquel appartiennent les fonctions map(), setView() ou tileLayer(), et plein d’autres encore.
Ça y est, c’est la fin de ce premier épisode d’une série de tutoriels sur Leaflet ! Faites-moi savoir si des passages ont été flous et s’ils méritent des explications supplémentaires. Par convention, on doit mentionner le fournisseur des tuiles vectorielles de notre fond de plan, ici OpenStreetMap. Pour éviter d’allonger ce tutoriel (déjà long non ?), on le fera la prochaine fois avant d’enrichir la carte avec des marqueurs, etc.
Vous pouvez retrouver le code en entier sur mon repo Gitlab, en attendant les prochains tutoriels.