On poursuit notre série de tutoriels dédiés à Leaflet, avec une quatrième partie sur l’affichage de données attributaires d’un geoJSON à l’aide de pop-ups. Si vous découvrez cette série, jetez un œil aux épisodes précédents.
11) Associez une image aux marqueurs « equipements »
Recherchez un logo symbolisant des activités sportives et téléchargez l’image. Dans le dossier « img » qu’on avait créé au précédent tuto, ajoutez-y votre logo. Sinon, allez directement sur mon gitlab utiliser le fichier PNG intitulé « equipements.png ». A la manière dont on avait habillé le marqueur de l’Université de Cergy de son logo dans le tutoriel n°2, déclarez une nouvelle variable « equipements_icon » qui accueillera l’icône de vos équipements comme ceci :
var equipements_icon = L.icon({
iconUrl: »img/equipements.png »,
iconSize: [40, 40]
});
Si vous avez des difficultés, faites un tour sur mon script, j’y ai ajouté des commentaires. N’oubliez pas qu’une icône doit être déclarée avant la variable qui en sera habillée. Une fois terminé, ajoutez « equipements_icon » en paramètre de la méthode marker() de la couche geoJSON qu’on avait créée la dernière fois :
Sauvegardez votre fichier et rechargez la page de votre navigateur (là, si vous n’avez pas filtré votre jeu de donnée, ça va ramer) :
12) Filtrez les données attributaire à afficher dans le pop-up
Les pop-up sont un excellent moyen de dynamiser votre web map en lui donnant une dimension SIG. Ils offrent davantage d’interactivité avec l’utilisateur et mettent en lumière la richesse des données que vous distribuez sur la carte. L’utilisateur sera en effet curieux d’observer dans un pop-up le nom de l’établissement représenté, sa date de création, son adresse et plein d’autres informations encore.
Pour créer des pop-ups sur chacun de nos marqueurs, il faut vous créer une fonction (je l’ai appelée « onEachEquip« ) qui utilise la méthode bindPopup(). Cette fonction prendra deux paramètres : feature et layer. Et puisqu’on souhaite ajouter du contenu à chaque pop-up, créons une variable « popupContenu » dans laquelle on écrira quelques mots qui s’afficheront pour chaque marqueur :
function onEachEquip(feature, layer) {
var popupContenu = « Equipements sportifs d’Île-de-France »;
layer.bindPopup(popupContenu);
}
Puis ajoutez la fonction « onEachEquip » en attribut du paramètre « onEachFeature » de votre couche geoJSON, après pointToLayer :
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {icon:equipements_icon});
},
onEachFeature : onEachEquip
}
).addTo(carte);
Sauvegardez et rechargez votre page du navigateur :
Bien, vous avez créé vos premiers pop-ups. Pour l’instant on s’est contenté d’écrire une simple phrase dans chaque pop-up. Il s’agit à présent d’afficher les données attributaires de chaque feature pour que l’utilisateur puisse accéder au type d’équipement et son nom d’installation par exemple. Ce sera un bon début.
Comment accéder à ces données attributaires ? Rappelez-vous de la structure d’un objet geoJSON qu’on avait vue précédemment. Les données attributaires sont stockées dans l’attribut « properties » de votre geoJSON. A l’intérieur de cet objet, vous trouverez une série de variables comme « ins_nom » pour le nom de l’installation sportive, « eqt_type » pour le type d’équipement, « object_id » pour l’identifiant etc.
Pour parcourir ce geoJSON et sélectionner des variables particulières en Javascript (JS), il faut utiliser la notation pointée. Par exemple, pour sélectionner le type d’équipement de chaque feature de notre geoJSON, on va écrire « feature.properties.eqt_type« . C’est-à-dire qu’on va chercher la variable « eqt_type » contenue dans « properties » lui-même à l’intérieur de « feature« , vous saisissez ? Donc pour chercher nos deux variables « ins_nom » et « eqt_type », on va écrire à l’intérieur de notre variable « popupContenu » de la fonction « onEachEquip », deux phrases avec deux notations pointées :
function onEachEquip(feature, layer) {
var popupContenu = feature.properties.ins_nom + feature.properties.eqt_type;
layer.bindPopup(popupContenu);
En JS, on peut utiliser les signes « + » pour concaténer des chaînes de caractères. Ce qu’on a fait plus haut nous permet d’afficher le nom de l’installation et le type d’équipement de chaque point (mais c’est moche). Pour que l’information soit la plus accessible et compréhensible pour l’utilisateur, on va ajouter l’intitulé de chacune de nos variables avant la notation pointée. De fait, ouvrir une balise HTML est un bon moyen de mélanger une phrase et une notation pointée. C’est pourquoi on a ouvert des guillemets puis ajouté une balise « p ». La balise « br », elle, nous permet un retour à la ligne :
function onEachEquip(feature, layer) {
var popupContenu = « <p>Nom de l’installation : » + feature.properties.ins_nom +
« <br>Type de l’équipement : » + feature.properties.eqt_type +
« </p> »;
layer.bindPopup(popupContenu);
Sauvegardez ces dernières modifications de votre fonction « onEachEquip » et rafraichissez la page de votre navigateur (qui devrait encore plus ramer). Voilà ce que vous obtiendrez :
Un grand bravo à vous ! Vous avez créé votre première véritable web map, qui commence à avoir des airs d’application web. N’hésitez pas à ouvrir d’autres pop-ups pour voir les différents intitulés de nos deux variables.
13) Ajoutez une API
Bien sûr vous pouvez aller plus loin, en rajoutant d’autres jeux de données ou en utilisant des API dédiées au routing comme Leaflet Routing Machine. Cette API d’itinéraires a été développée par Per Liedmann, à partir des services Leaflet et Open Source Routing Machine (OSRM). Elle permet le tracé d’un itinéraire, selon plusieurs modes de transport, entre des points que l’utilisateur a indiqué sur la carte. Vous avez déjà utilisé le plugin de tracés d’itinéraire sur Qgis ? C’est encore mieux en JS.
Dans le head de notre fichier index.html, commençons par ajouter les fichiers CSS et JS de l’API avant nos balises « style » :
<link rel= »stylesheet » href= »https://unpkg.com/[email protected]/dist/leaflet-routing-machine.css » />
<script src= »https://unpkg.com/[email protected]/dist/leaflet-routing-machine.js »></script>
<link rel= »stylesheet » href= »https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css » />
<script src= »https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js »></script>
A présent, on va insérer une nouvelle variable dans la partie « script » de notre fichier HTML. Appelez-là « cy_routing ». On va utiliser un nouvel objet « Routing » qu’on placera toujours après le « L » puisqu’il dépend de la librairie Leaflet. On souhaite connaître la distance en voiture entre l’Université de Cergy et les équipements sportifs aux alentours. Ici, la méthode control() prend deux paramètres à savoir « router » qui va tracer l’itinéraire et « geocoder » qui va géocoder les points que l’utilisateur indiquera sur votre web map. De plus, on souhaite que l’API nous retourne des résultats en français. N’oubliez pas d’ajouter votre variable à votre carte avec addTo() :
var cy_routing = L.Routing.control({
router: new L.Routing.osrmv1({
language: ‘fr’,
profile: ‘car’
}),
geocoder: L.Control.Geocoder.nominatim({})
}).addTo(carte);
Sauvegardez, rafraichissez votre page HTML. Un nouvel outil apparaîtra en haut à droite de votre page HTML. Admirez le résultat en lançant vos propres itinéraires. Il est possible que, pour certaines adresses, vous ayez à déplacer par vous-même les marqueurs.
Pour aller plus vite qu’avec un geoJSON enregistré sur votre disque, il est préférable d’utiliser un moteur de base de données comme PostgreSQL par exemple. En couplant votre interface cartographique Leaflet à une base de données spatiales, vous pourrez récupérer vos data sans même les enregistrer dans un shapefile ni un geoJSON. D’ailleurs, l’écosystème Javascript propose des outils avancés qui accélèrent l’écriture du code avec des frameworks comme React ou VueJS, et facilitent les échanges entre votre web map et votre database. L’utilisateur est ainsi invité à ajouter lui-même des points sur une carte, à tracer des polygones en renseignant leurs données attributaires, ou même à compléter, corriger des données déjà existantes sur la page web. C’est une fois ce niveau d’échanges atteint entre le front-end et le back-end qu’on parle de véritable application SIG Web.
Retrouvez les autres tutoriels sur gitlab et rejoignez-moi sur Linkedin.