Réaliser une carte similaire, version 2

Licence Creative Commons
Ce document est mis à disposition selon les termes de la Licence Creative Commons Attribution 4.0 International.

Auteur: P. Quaglia

Date de mise à jour: décembre 2018

Introduction: La première version de la carte des aménagements cyclables que nous avions réalisée était basée sur la génération complète de la carte par un logiciel. Ce logiciel générait les dizaines de milliers de «tuiles» (des petites images carrées de chaque bout de la carte à différents niveaux de zoom), que nous hébergions ensuite sur notre site. L’inconvénient de cette méthode était que la mise à jour était très lourde (il fallait régénérer toutes ces tuiles), et l’hébergement était également lourd (plusieurs centaines de Mo pour notre petite région), sans compter l’upload sur le serveur (plusieurs heures). Nous avons ne pouvions pas agrandir le territoire couvert, car le nombre de fichiers à générer n’était plus gérable.

Nous avons donc creusé un peu pour trouver une autre méthode, que nous vous proposons ci-dessous. Le code html est proposé en bas de cette page, nous l’avons commenté autant que possible pour que vous puissiez le comprendre et l’adapter à vos besoins.

Principe: Cette fois, nous allons utiliser des fonds de carte déjà existants, hébergés par des tierces parties ou par la société Mapbox. Nous n’aurons plus aucune tuile à générer. Autre avantage, nous pourrons facilement basculer d’un fond de carte à un autre. Comme les cartes standards ne mettent pas en avant les aménagements qui nous intéressent, nous utiliserons OpenStreetMap pour récupérer ces éléments (pistes cyclables, zones 30, stationnements vélos, etc.) et nous les afficherons par-dessus la carte. Il sera également possible de les faire apparaître ou disparaître d’un clic, ce qui n’était pas possible avec notre précédente carte.

Mise en place du fond de carte: Nous utilisons des fonds de carte mis en place par la communauté OpenStreetMap et par la société MapBox. Pour MapBox, il faut créer un compte (gratuit) auprès d’eux. Pour une utilisation avec moins de 50 000 vues par mois, l’usage est gratuit. Pour notre association, c’est largement suffisant. Le compte gratuit vous permet d’avoir un «token», c’est un bout de code qu’il faudra ajouter dans votre page html, qui permet à MapBox de savoir qu’une demande de carte provient du compte que vous avez ouvert. Il est aussi possible d’utiliser des fonds de carte maintenus par la communauté OpenStreetMap, voir une liste ici: https://wiki.openstreetmap.org/wiki/Tiles. Dans notre exemple, nous avons deux cartes MapBox, deux cartes de la communauté, et une photo aérienne dont la couche est mise à disposition par la société Esri. Les différents fond de carte peuvent être sélectionné avec une boite à cliquer. Les données sont en général issues de OpenStreetMap, et mises à jour très régulièrement.

Récupération des données d’OpenStreetMap: Nous allons utiliser un site internet qui s’appelle «overpass turbo». Dans le volet de droite vous voyez la carte OpenStreetMap, dans le volet de gauche un peu de code. En haut, des boutons dont «run» «export» et «wizard» dont nous aurons besoin. En gros, cet outil permet d’appliquer une requête sur la base de données de OpenStreetMap sur le périmètre affiché sur la carte. Il faut donc centrer la carte sur la région qui vous intéresse, et sur le niveau de zoom qui vous intéresse. Ensuite, pour faire la requête de manière simple, nous allons utiliser le bouton «wizard». Par exemple, pour afficher et récupérer les données concernant les stationnements vélos, vous pouvez simplement taper «bicycle parking» dans le wizard, et cliquer «build and run query». Vous verrez que dans le volet de gauche s’affiche le code permettant d’extraire les informations correspondantes aux stationnements vélo (c’est le «build query») et dans le volet de droite, vous visualisez tous les endroits de la carte où se trouvent des stationnements vélos (c’est le «run query»). Vous pouvez vérifier sur la carte que c’est bien ce que vous vouliez. Il ne reste plus qu’à le récupérer dans un fichier. Pour cela, il faut cliquer le bouton «export», et choisir l’option «download as GeoJSON». Le format GeoJSON est un type de fichiers standard pour échanger des informations géomatiques. Si vous êtes curieux, vous pouvez l’ouvrier avec un simple éditeur de texte, et vous verrez que c’est un simple fichier xml assez simple à comprendre. En tout cas, enregistrez ce fichier sur votre disque dur, sous un nom qu’il faudra utiliser dans votre page html pour afficher les données. Dans l’exemple que nous donnons, les stationnements vélos sont dans le fichier: BicycleParking.geojson

Vous devez faire de même pour tous les autres objets, le tableau ci-dessous donne la liste des requêtes et le nom du fichier pour pouvoir faire fonctionner l’exemple donné ci-dessous. Bien sûr, vous pouvez utiliser d’autres noms de fichier, mais il faudra alors mettre à jour le code html de votre page en conséquence. Vous verrez aussi dans le code html que chaque type d’objet sera affiché avec un style défini (couleur, transparence, etc.) que vous pouvez modifier dans le code, ou avec une icône.

Objet Requête dans le wizard Nom fichier
Stationnements vélos bicycle parking BicycleParking.geojson
Bancs bench bench.geojson
Fontaines / points d’eau drinking water Fontaine.geojson
Magasins vélos bicycle shop BikeShops.geojson
Pompes pour vélo « service:bicycle:pump » = * PompesVelo.geojson
Double sens cyclables (highway=*) and oneway=yes and (cycleway=opposite or cycleway=opposite_lane or cycleway=opposite_track) DSC.geojson
Vitesse limité à 30 ou moins (maxspeed=30 or « living street » or maxspeed=10 or maxspeed=20) and type:way MaxSpeed30.geojson
Bandes cyclables (highway!=cycleway) and (cycleway=lane or cycleway:right=lane or cycleway:left=lane) and type:way
BandesCyclables.geojson
Pistes cyclables et voies vertes ((highway=*) and (bicycle = designated) and (motor_vehicle = no)) or ((highway!=cycleway) and cycleway=track) or (highway=cycleway) PistesVoiesVertes.geojson

Ces huit fichiers .geojson sont donc ceux qui contiennent les informations issues de OpenStreetMap qui seront affichés sur votre carte. Pour faire une mise à jour, il suffit de retourner sur le site overpass turbo, et de recréer un nouveau fichier .geojson et remplacer l’ancien. C’est donc très rapide.

Enfin, sur notre carte, nous proposons différents itinéraires recommandés. Ceux-ci sont stockés dans des fichier .gpx, ce sont les fichiers utilisés par la plupart des GPS. Vous pouvez les extraire de votre GPS, ou bien les dessiner sur une carte en ligne en utilisant différents outils (par exemple: OpenRunner, ou bien le très bon Cycle.travel/map qui fait le routing et permet d’exporter la trace au format .gpx). Il suffit donc d’enregistrer les fichiers .gpx que vous souhaiter pouvoir faire afficher, et de modifier le code html (mettre à jour le nom du fichier .gpx et la légende que vous voulez donner) pour les faire afficher.

Et voilà. Sur votre serveur vous n’avez qu’à stocker les fichiers .geojson, les fichiers .gpx, le code html de la carte, et éventuellement les icônes que vous voulez utiliser pour afficher les points qui vous intéressent. C’est très léger. Pour mettre à jour, vous n’avez qu’à remplacer les fichiers .geojson par un autre plus récent.

Le code source de la page d’exemple (à enregistrer sur votre disque dur et à ouvrir dans un éditeur html): testleaflet10-sansToken