Mise en oeuvre de Leafletjs

Présentation de la librairie LeafletJS

  1. Principe
    • Historique
    • Présentation et installation
  2. Exemples d’utilisation
  3. Installation et première main sur LeafletJS

Principe

a.    Historique

LeafletJS est une librairie JavaScript, sortie en Mai 2011, créée par Vladimir Agafonkin. Elle permet de créer des cartes interactives pour le web et mobile tout en restant simple et performant. Cette librairie est aussi open-source.

Elle reste encore mise à jour à l’heure d’aujourd’hui, puisque sa dernière version est sortie le 27 Octobre 2017 (version 1.2.0).

 

b.   Présentation et utilisation

Quelques pré-requis pour pouvoir utiliser cette librairie.

Dans un premier temps, il faut au préalable, avoir des connaissances en ce qui concerne la technologie Javascript.

Il existe deux possibilités afin de pouvoir utiliser la librairie LeafletJS :

  • On peut fork la solution LeafletJS depuis le repository sur Github.
  • Ajouter en CSS et JavaScript, les liens correspondant à LeafletJS avec des liens unpkg
  • Ajouter à l’aide de NPM, le package LeafletJS.
  1. Fork

Pour fork le projet LeafletJS, équivalent à directement le télécharger sur sa propre machine, il suffit de cloner le projet à l’aide de GIT

git clone leaflet

  1. Liens Unpkg

Pour utiliser les liens unpkg, copier les liens ci-dessous

  1. NPM

Dans le projet, il est possible d’installer Leaflet à l’aide du gestionnaire de paquet de Node.js :

npm install leaflet

Exemples d’utilisation

La librairie Leaflet nous permet donc de créer des cartes interactives mais il a besoin de ce que l’on appelle un fournisseur de fonds de carte.

Leaflet fait office de tuile, qui intègre la carte fournie.

Dans notre cas, et plus généralement, le fournisseur le plus commun reste OpenStreetMap (ou OSM) ou encore Google Maps.

 

Plusieurs projets ont vu le jour grâce à ces technologies, notamment le projet Wheelmap, qui se sert surtout d’OSM, et qui a pour but de montrer aux utilisateurs différents endroits, accessibles pour les personnes en fauteuil roulant par exemple.

Installation et première main sur LeafletJS

Dans notre cas, nous allons plutôt utiliser la seconde méthode, consistant à rajouter directement les liens CSS et JavaScript dans notre code HTML.

Il existe une version des liens en plus sécurisé, que nous allons utiliser dans ce tutoriel :

Dans un premier temps, nous allons juste afficher une carte, avec un marqueur, qui renverra un « Hello World ! ».

Décortiquons un peu le code ci-dessus : dans la balise body du code HTML, on ajoute une balise div avec un id, que l’on nommera map (il nous servira pour faire afficher la carte en javascript).

On lui ajoute une largeur à 100% pour que la carte puisse prendre toute la largeur de l’écran et une hauteur de 450px.

En-dessous, vous pouvez apercevoir deux balises de script :

  • La première correspond à l’appel pour la librairie LeafletJS.
  • La seconde est simplement un fichier javascript, nous permettant de bien séparer le code HTML du Javascript (afin de rendre cela plus propre). A noter qu’on placera ce fichier à la racine du dossier, au même endroit que notre fichier index.html.

Ceci reste donc un code assez simple, mais efficace pour afficher une première carte.

Dans notre code Javascript, on déclare une variable, qui contiendra l’id de la div réceptionnant la carte.

La méthode setView demande deux paramètres :

  • Le premier correspond aux coordonnées du centre de la carte
  • Le second indique le zoom qui sera appliqué par défaut

C’est ce que l’on appelle « l’initialisation de la carte ».

Voici ce que donne notre affichage avec seulement la première ligne du code Javascript

En ajoutant de la ligne 3 à 5 de la figure 4, nous obtenons ceci

Décortiquons maintenant la suite de notre code Javascript.

 

Nous faisons appel une méthode tileLayer. Celle-ci a besoin de deux paramètres pour fonctionner :

  1. Elle a besoin d’un layer, qui sera représenté par une URL

L’URL est tout bonnement une image, généralement au format PNG.

Cependant, on peut s’apercevoir qu’il y a différents arguments dans celle-ci.

  • {s} correspond au nom de domaine disponible
  • Nom de domaine
  • {z} correspond au niveau de zoom
  • {x} et {y} correspondent aux coordonnées
  1. Des options, que l’on peut fournir.

Dans notre cas, les options indiquent une information en bas à droite de la carte, permettant d’avoir, par exemple, un copyright.

Pour l’URL, nous avons choisi d’utiliser un layer disponible sur tile.osm.org.

Enfin, la méthode addTo permet d’ajouter le layer au conteneur de la map.

Ajout d’un marqueur sur la carte

Nous allons maintenant ajouter un marqueur sur notre carte. Pour cela, il suffit simplement de rajouter à notre code ce qui suit sur la figure 8.

Notre objet L, qui dispose d’une méthode marker, qui prendra comme paramètre des coordonnées [latitude, longitude].

Dans notre exemple, on peut remarquer que j’ai pris la liberté de créer une variable centerCampus représentant les coordonnées de CampusID.

Que l’on peut déclarer comme ceci :

var centerCampus = [43.615077, 7.054426];

A noter que la première valeur sera la latitude, et la seconde la longitude.

Ce qui nous permet d’afficher l’image ci-dessous.

Maintenant que nous avons fait notre base de carte avec Leaflet, allons un peu plus loin en dessinant et en ajoutant dynamiquement des marqueurs dessus.

Modification et dessin sur la carte

  1. Ajout de nouveaux marqueurs

L’ajout de nouveaux marqueurs impliquent la modification de notre code HTML.

Premièrement, ajouter le script de « dessin » ci-dessous, nommé leaflet.draw :

Ensuite, ajouter le lien CSS, nommé par le même nom :


Il s’agit d’ajouter dans notre fichier main.js, tout le code nécessaire pour l’affichage des nouvelles options.

Copiez simplement le code ci-dessous.

Expliquons-le.

var editableLayers = new L.FeatureGroup(); représente la modification du conteneur de la map.

Ensuite, nous pouvons l’ajouter à notre carte.

Pour pouvoir ajouter de nouveaux marqueurs, il faut activer certaines options que nous allons voir à la suite.

Déclarez en premier lieu un nouvel objet, que l’on nommera ici drawPluginOptions

Vous pouvez remarquer plusieurs propriétés, que nous allons définir point par point, sachant qu’il est possible d’en ajouter plusieurs autres encore.

  • Position : permet de définir la position des options supplémentaires que l’on pourra ajouter au conteneur.
  • Draw : définitions de chaque entité que l’on peut afficher. A noter que si on définit des propriétés aux entités, elle sera affichée par défaut (sa valeur sera à true).
    • Polygon : permet de créer un polygone
    • Polyline : création de forme multi-ligne
    • Circle : création de cercle
    • Rectangle : création de rectangle
    • Marker : création de marqueur

Attardons-nous sur les marqueurs pour le moment. Ici, on peut apercevoir que j’ai seulement ajouté la définition d’une icône personnalisée.

Pour notre exercice, je vous mets un exemple de marqueur personnalisé.

A noter que les urls, pour la shadowUrl et pour l’iconUrl, ont été récupérées directement depuis le site de LeafletJS. Par ailleurs, vous pouvez tout à fait créer vos propres icônes, mais il faut aussi prévoir une ombre pour chaque nouvelle icône créée.

Le premier objet LeafIcon nous permet de définir chaque option auquel sera affectée la nouvelle icône, que l’on a créée dans le second objet greenIcon.

Maintenant, il ne reste plus qu’à ajouter un listener sur la carte, qui permettra de détecter quel type d’entité sera créée à la pression du bouton correspondant.

Ici, on s’attarde sur le type marker.

On détermine si le type d’entité créé sera un marker, et si oui, on ajoute le marqueur. J’ai personnalisé un peu l’action du bouton, qui nous permettra d’ajouter dynamiquement des marqueurs sur la carte.

Pour se faire, nous allons créer une fonction createDOMElement, qui prendra en paramètre un layer et créera un champ texte avec un bouton. Ci-dessous le code de la fonction.

Si vous avez déjà des bases en Javascript, ce qui reste un pré-requis pour comprendre ce tutoriel, vous devriez comprendre ces trois fonctions :

  • La première, comme dit plus tôt, créera les éléments du DOM que l’on aura besoin.
  • La seconde méthode deleteDOMElement, nous permettra de supprimer la div contenant le champ texte et le bouton, lorsque l’on aura renseigné le contenu du marqueur.
  • Enfin, ajouterContenuMarker nous permettra d’ajouter le contenu au marqueur, puis de le supprimer avec la fonction deleteDOMElement que l’on vient de voir.

Ceci nous permet donc d’afficher le contenu ci-dessous.

On peut apercevoir deux nouveaux boutons en haut à droite de notre carte.

Zoomons un peu…

Pour ajouter un nouveau marqueur, il suffira d’appuyer sur le bouton avec l’icône appropriée.

Le marqueur personnalisé apparaît alors, et un simple sur la carte sur l’endroit désiré permettra de l’ajouter dessus.

A noter qu’un bouton cancel est ajouté par défaut au niveau du bouton de création d’un marqueur. Et en-dessous de notre carte on pourra retrouver :

Inscrire l’information que contiendra le marqueur et on aura directement le popup qui s’ouvrira lors du clique sur ok tel que ci-dessous

  1. Création de polygone

Attardons-nous sur l’autre bouton que l’on a aperçu.
Revenons sur notre code précédent.

Nous pouvons distinguer plusieurs attributs, que nous survolerons en bref, car ils parlent d’eux-mêmes.

Si nous retournons sur notre carte, et que l’on clique sur l’autre bouton, nous aurons ceci.

Les boutons Finish, Delete last point et Cancel sont ajoutés par défaut par Leaflet ainsi que le message Click to start drawing shape au niveau du curseur.

Ensuite, il suffira de cliquer sur plusieurs endroits de la carte pour créer un polygone, et lorsque notre figure nous convient, appuyer sur Finish.

Ce qui nous donne :

Pour conclure ce tutoriel, nous avons pu faire un tour de présentation de la librairie Javascript LeafletJS.

Cette librairie peut donc s’apparenter à Google Maps, cependant, comme vu, elle sera très utile et simple d’utilisation pour l’intégration de cartes, avec quelques interactions. Mais si par ailleurs, il vous est nécessaire de créer des itinéraires ou autres, il faudra utiliser l’API de Google Maps, via des appels Ajax.

 

Glossaire

Fork : Principe de copier un repository, dans le but de pouvoir tester le code, de le changer, sans pour autant affecter le projet original.

Dans notre cas, Fork le projet permettra de l’utiliser dans une page ou application web.

Repository : Un repository, ou dépôt, est un système de stockage permettant de centraliser du contenu.

NPM : Gestionnaire de paquet Javascript.

API : Bibliothèque de classes, méthodes…

 

Sitographie

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *