Pour ce troisième tutoriel dédié à Leaflet, on va cartographier les équipements sportifs de l’agglomération de Cergy-Pontoise. Si vous découvrez cette série de tutoriel, je vous invite à commencer par les épisodes précédents.
8) Téléchargez votre geoJSON
La source des données équipements sportifs de la ville de Cergy est disponible sur la plateforme Open-Data de la région Île-de-France. Ce n’est pas obligatoire, mais je vous recommande de filtrer les données car la taille conséquente du fichier ralentira vos manipulations. Téléchargez les data au format geoJSON. Ces données nous renseignent sur les coordonnées spatiales de chaque installation, le propriétaire, le nom de l’installation, de l’équipement etc.
Leur nom de fichier est trop long : après l’avoir importé dans le dossier « data » qu’on a créé au dernier tuto (il contenait les contours des Chênes 2), renommez votre fichier en « equipements.geojson ». Dans votre éditeur de texte préféré, jetez un œil à ce geoJSON…
Je vous l’accorde, les données brutes d’un geoJSON ne sont pas très lisibles, mais c’est toujours mieux que du XML. Le contenu du fichier est long et c’est normal si vous ne l’avez pas filtré : il y a des milliers d’entités vectorielles à l’intérieur de cet objet. Pour s’y retrouver, rappelez-vous de la structure d’un geoJSON lorsqu’on avait inversé les coordonnées d’un polygone. Un geoJSON contient un groupe d’éléments appelés des « features » qui sont regroupés dans une « FeatureCollection« . Chacun de nos éléments, ou « feature« , se distingue par sa longitude et sa latitude.
Ce qu’on souhaiterait, c’est récupérer les coordonnées spatiales de chacun de ces features pour les amener vers notre fichier « index.html » qui contient notre web map.
9) Importez votre geoJSON dans votre fichier HTML
Si vous reprenez la première capture d’écran de notre geoJSON, vous verrez qu’à la première ligne on peut distinguer les coordonnées de notre premier point (en orange). Pour envoyer ces coordonnées dans notre fichier HTML, il faut faire appel à Javascript (JS).
Rouvrez votre fichier index.html et insérez, dans le body, une nouvelle balise script à la suite de notre div :
Cette balise script indiquera à votre navigateur qu’au moment de charger votre page HTML, il faudra aller charger le geoJSON de notre dossier « data ». Ensuite, retournez dans le fichier « equipements.geojson » et, avant la première accolade qui précède le mot « type », déclarez votre variable « equipements » comme ceci :
var equipements = {« type »: »FeatureCollection », »features »…
Et comme toujours, fermez votre variable en rajoutant un « ; » à la toute fin de votre geoJSON.
Enregistrez votre fichier et rafraichissez votre navigateur. Aucun changement. C’est normal, on ne lui a pas encore dit de transformer votre geoJSON en « geoJSON layer ». Mais pour s’assurer que notre « equipements.geojson » a bien été chargé par le navigateur, faites un coup de console.log() dans la console JS de votre navigateur (F12, onglet « console ») :
Si vous déroulez le résultat renvoyé par la console, vous atteindrez les fameux features qu’on évoquait plus haut. Et en déroulant le premier feature, vous y observerez les données attributaires et les coordonnées spatiales de la première entité.
10) Créez une couche geoJSON à partir de votre geoJSON
Lâchez la console, et revenons à notre fichier HTML. Pour créer une couche de geoJSON (ou « geoJSON layer » dans le jargon Leaflet), il faut utiliser la méthode geoJSON(). Cette méthode prend en paramètre un geoJSON et retournera un marqueur pour chaque feature du geoJSON. Déclarez une nouvelle variable qu’on appellera « equipements_lyr » (« lyr » pour « layer » et pas le format Esri). Appliquez la méthode geoJSON() sur la variable « equipements » (celle qu’on a fait afficher dans la console JS) puis ajoutez le paramètre pointToLayer, comme ceci :
var equipements_lyr = L.geoJSON(equipements, {pointToLayer});
Ce paramètre pointToLayer va nous permettre d’ajouter un marqueur pour chaque équipement disponible dans notre variable. Et pour faire fonctionner ce paramètre, il faut lui associer une fonction. Celle-ci prendra deux paramètres : feature et latlng.
var equipements_lyr = L.geoJSON(equipements, {pointToLayer : function (feature, latlng)};
Vous l’avez deviné, pour chaque feature cette fonction ira chercher ses coordonnées latitude-longitude avec lesquelles elle retournera un marqueur. Pour compléter notre fonction, il faut définir, dans le corps de la fonction, les instructions qu’elle exécutera. Ouvrez une paire d’accolades comme celles en rouge ci-dessous :
var equipements_lyr = L.geoJSON(equipements, {
pointToLayer: function (feature, latlng) {
instruction A, instruction B, instruction C…
}}
Pour indiquer le résultat qu’on souhaite que la fonction nous retourne, il faut utiliser le mot-clé « return« . Et puisqu’on souhaite que notre fonction crée un marqueur, on va utiliser la méthode marker() sur notre paramètre latlng. Dans le corps de la fonction, entrez comme unique instruction de notre fonction ceci :
var equipements_lyr = L.geoJSON(equipements, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng);
}};
Enfin, ajoutez la méthode addTo() pour ajouter cette couche de geoJSON sur votre carte, comme ceci :
Allez, sauvegardez votre fichier HTML et go rafraichir votre navigateur. Si vous n’avez rien filtré, le chargement de la page risque d’être très long, et c’est normal quand on affiche 23.699 points. Voilà le résultat :
Bravo, vous êtes parvenu à afficher votre premier geoJSON sur une web map ! Il reste encore du chemin avant d’arriver au SIG web, mais on s’en rapproche ! Vous vous rappelez de ces marqueurs bleus ? Au dernier tutoriel, on avait associé une image au même marqueur de l’Université de Cergy-Paris pour afficher le nouveau logo de l’établissement. Essayez par vous-même de donner une image à votre couche de geoJSON.
En réalité, il existe plusieurs méthodes, plus ou moins complexes, pour importer un geoJSON dans une application Leaflet : l’API fetch par exemple, vous permet d’aller très rapidement récupérer votre objet et l’afficher en temps-réel. Mais comme il s’agit d’une initiation au web mapping en JS, on a choisi une méthode plus longue où les étapes sont facilement identifiables. Pour autant certaines restent du bricolage : par exemple, déclarer une variable dans notre geoJSON sans en modifier le format n’est pas convenable. Il aurait été préférable de le ré-enregistrer au format JS. Ou mieux : de stocker votre geoJSON dans une base de données pour ensuite l’importer dans votre web map. Ou mieux encore : utiliser l’API du portail Open Data d’Île-de-France !
Bien qu’arrivé au bout de ce tuto, vous n’êtes peut-être pas convaincu par le format geoJSON. Vous êtes géomaticien et avez prêté fidélité à Esri ? Votre shapefilophilie vous interdit de toucher à du JSON ? Pas de panique ! Il est possible de distribuer des shapefiles sur une application Leaflet grâce au plugin de Calvin Metcalf.
On s’arrêtera là pour aujourd’hui. J’avais annoncé qu’on afficherait des données attributaires dans un pop-up, mais je m’aperçois que ce tutoriel est déjà long. On le fera la semaine prochaine et on utilisera une API de routing.
En attendant, retrouvez les codes ici et rejoignez-moi sur Linkedin.