A la fin de notre premier tutoriel, nous avions généré notre fond de plan centré sur l’université de Cergy-Paris. A présent on va enrichir la carte en y affichant des entités vectorielles. Mais comme promis la semaine dernière, on commencera d’abord par indiquer la source de notre fond de plan.
5) Ajouter la source de vos données OpenStreetMap
La méthode tileLayer() prend en paramètre l’objet « attribution » qui indique la source de nos paquets de tuiles vectorielles, en bas à droite. Copiez cette ligne de code (n’oubliez pas les accolades) à la suite de l’URL d’import des tuiles vectorielles et veillez à bien les séparer par une virgule (screenshot ci-après) :
{
attribution: ‘Fond de carte par les contributeurs <a href= »https://www.openstreetmap.org/ »>OpenStreetMap</a>, <a href= »https://creativecommons.org/licenses/by-sa/2.0/ »>CC-BY-SA</a>’
}
6) Ajoutez un marqueur
Dans Leaflet, les marqueurs sont l’équivalent des entités ponctuelles d’un logiciel SIG. Déclarons un marqueur sur la CY University à l’aide de la méthode marker() et attribuons-lui les coordonnées spatiales du centre de notre web map avant de l’ajouter à notre carte :
var cy = L.marker([49.03898, 2.07501]).addTo(carte);
Ces marqueurs sont personnalisables : vous pouvez ajouter des bulles de texte, jouer sur l’opacité du marqueur, ou créer des événements lorsque le curseur survole votre point. Comme pour tileLayer() précédemment, ouvrez une paire d’accolades à la suite des coordonnées spatiales pour entrer ces paramètres :
var cy = L.marker([49.03898, 2.07501], {
title: « CY University »,
bubblingMouseEvents: true
}).addTo(carte);
Mais surtout, vous pouvez lui associer une icône. Avec celle-ci, vous pourrez indiquer la taille du marqueur et l’image que vous souhaitez lui attribuer. Si vous avez déjà fait du Illustrator, retapez le logo de l’université avec deux ou trois coups d’outil plume et enregistrez votre image en PNG dans un dossier « img » à la racine de votre projet :
var cy_icon = L.icon({
iconUrl: »img/cy.png »,
iconSize: [40, 40]
});
Pensez à bien déclarer cette variable avant votre marqueur. Puis, entrez cette variable en paramètre de la méthode marker() :
var cy = L.marker([49.03898, 2.07501], {
title: « CY University »,
bubblingMouseEvents: true,
icon:cy_icon
}).addTo(carte);
Rafraichissez votre page HTML et vous observerez votre marqueur au milieu de l’écran. Si vous passez le curseur de votre souris par-dessus, « CY University » s’affichera.
7) Ajoutez un polygone
Comme les marqueurs, les polygones sont personnalisables par leurs couleurs, l’interaction avec l’utilisateur, leurs contenus textuels, images etc. Pour en tracer, jetez un œil à la méthode polygon() sur le guide de la librairie Leaflet, vous verrez que ce n’est pas différent d’un marqueur.
Maintenant que vous savez afficher des polygones, on va tracer les contours du bâtiment des Chênes 2 qui abrite le master géomatique de Cergy. Déclarez votre variable « chenes_deux » dans votre fichier HTML avant d’aller sur geojson.io. Ce génial site vous permet de tracer des entités vectorielles sur un fond OSM et générer leurs coordonnées spatiales (en vert à droite sur l’image ci-dessous) au format geoJSON, format idéal lorsqu’on travaille sur Leaflet. Il s’agit simplement d’ajouter les coordonnées de votre polygone tout fraichement tracé, à la méthode polygon() de votre variable « chenes_deux ».
Malheureusement, tout n’est pas si simple en géomatique : vous ne l’avez peut-être pas remarqué, mais geojson.io semble inverser les coordonnées spatiales de nos entités vectorielles. Je dis « semble » parce qu’en réalité, c’est la librairie Leaflet qui inverse les coordonnées spatiales en latitude–longitude. Alors que le format geoJSON, selon la documentation officielle, les exige dans l’ordre longitude–latitude :
The order of elements must follow x, y, z order (easting, northing, altitude for coordinates in a projected coordinate reference system, or longitude, latitude, altitude for coordinates in a geographic coordinate reference system).
Ainsi, avant de les utiliser sous Leaflet, vous n’aurez pas d’autre choix que d’inverser par vous-même les coordonnées. Par série de couper-coller… Épuisant, n’est-ce pas ? Vous prenez pas la tête, vous trouverez les coordonnées corrigées de mon contour du bâtiment des Chênes 2 dans le fichier index.html de mon projet gitlab. Insérez-les dans la méthode polygon() de votre variable, sauvegardez votre fichier et rafraichissez votre page. Vous obtiendrez ce résultat :
Félicitations ! Sans jamais ouvrir un logiciel SIG, vous êtes parvenu à insérer vos premières entités vectorielles sur un fond de carte OSM et votre premier marqueur (et quel marqueur !).
Verdict ? Si le rendu graphique est appréciable, insérer 30 lignes de coordonnées en paramètre d’une méthode, pour un si petit bâtiment, n’est pas pratique. Comme on l’a dit au précédent tutoriel, il est préférable de réserver des fichiers JS pour tout votre code Javascript.
Si vous vous demandez comment j’ai fait pour inverser ces coordonnées, et bien j’ai utilisé Python. Comme tout bon géomaticien, j’ai horreur des tâches répétitives. C’est de l’aliénation. Mieux vaut écrire un petit script qui retournera dans le bon ordre les coordonnées spatiales de chacun des points de notre polygone. Si vous n’en avez jamais fait, commencez par télécharger Python 3 et son gestionnaire de paquets (Pip ou Anaconda).
Inversez les coordonnées d’un geoJSON avec Python
Sur geojson.io, téléchargez le geoJSON que vous avez créé (perso je l’ai appelé « contours.geojson ») et importez-le dans un dossier « data » à la racine de votre répertoire-projet. Puis, créez un nouveau fichier Python à la racine du projet. Commencez par importer le module « json » qui vous permettra de lire votre fichier geoJSON grâce au mot-clé « with ». Via la méthode load() de notre module, on va charger le geoJSON qu’on vient de lire dans la variable « data ». Voilà ce que ça donne sans l’indentation :
import json as j
with open(‘data/contours.geojson’) as contours:
data = j.load(contours)
C’est là qu’on entre dans la partie la moins facile du script : dérouler la structure d’un objet geoJSON. D’ailleurs, comment se construit un geoJSON ? Reprenons notre exemple en image (ci-dessous à droite) et gardez un onglet ouvert sur mon script.
Il faut vous imaginer qu’entre les coordonnées de chacun des points de votre polygone et la partie la plus superficielle de votre geoJSON, plusieurs couches d’objets les séparent. En effet, les coordonnées sont cachées dans l’objet « coordinates » (n°3), lui-même caché dans l’objet « geometry » (n°2) qui appartient à l’objet « Features » (n°1). Pour franchir ces 3 murs qui vous séparent de vos coordonnées, il faudra réaliser 3 itérations avec les mots-clé « for… in ». Arrivé à la dernière itération, appliquez la méthode reverse() sur vos coordonnées pour inverser l’ordre des longitude et latitudes. Enfin, utilisez la fonction print() pour afficher les coordonnées corrigées après exécution de votre script dans la console Python. Votre code ressemblera à ça, avec l’indentation en plus bien évidemment (désolé, je sais pas indenter sur WordPress) :
for feature in data[‘features’]:
coordinates = feature[‘geometry’][‘coordinates’]
for coordinate in coordinates:
for lnglat in coordinate:
lnglat.reverse()
print(lnglat)
Copiez les coordonnées affichées par la console dans les paramètres de la méthode polygon() de votre fichier index.html. Veillez à ne pas oublier des accolades ou virgules, très nombreuses dans les objets geoJSON. Rafraichissez votre page du navigateur et vous obtiendrez vos propres contours du bâtiment des Chênes 2.
C’est tout pour aujourd’hui. Si vous n’avez pas réussi l’étape Python, ce n’est pas grave, elle ne sera pas nécessaire pour les tuto suivants. Jusqu’ici on a travaillé uniquement sur la partie graphique du webmapping. La prochaine fois on verra comment charger des geoJSON partagés sur des plateformes Open-data et comment afficher leurs données attributaires avec des pop-ups.
En attendant, vous retrouverez les autres tutoriels sur mon Gitlab et n’hésitez pas à me partager vos impressions et vos réalisations.