Carte interactive des rues sans mégots avec Leaflet

Cette carte interactive des rues sans mégots de Paris a été réalisée suite à la suite de la consultation de la page d’actualités de la ville de Paris concernant cette action de propreté, qui ne contenait qu’une image pour présenter la cartographie des différentes rues concernées par cette opération.

Sources des données

La liste des rues ou sections de rues proviennent de la page d’actualités.

Le tracé des rues provient de Paris Data, le site d’open data de la Ville de Paris.

Je suis parti des données en CSV, pour en extraire plus facilement les rues participantes. Pour les rues concernées seulement en partie j’ai ensuite supprimé manuellement les sections inutiles, en passant par geojson.io pour m’assurer que je ne supprimais pas des parties couvertes par l’opération.

Chaque feature de rue a au moins une propriété « name ». Pour les rues ne participant que sur une section je rajoute une propriété « between » pour indiquer cette section.

Ces données ont ensuite été rassemblées dans une FeatureCollection de LineStrings dans un fichier GeoJSON.

Continuer la lecture

Carte interactive du métro de Paris avec Leaflet

Si on vous parle de solution pour intégrer une carte sur votre site, la première qui vous vient à l’esprit est surement Google Maps. Mais il existe plusieurs solutions open-source et gratuites.

Je vous ai déjà parlé d’OpenLayers, avec laquelle j’ai déjà refait une carte réalisée précédemment avec jQuery.

Mais OpenLayers n’est pas la librairie open-source la plus utilisée. La première place revient à Leaflet (voir sources en fin d’article).

Pour m’exercer, j’ai décider de créer une carte interactive du métro de Paris avec Leaflet.

Éléments utilisés dans la carte

Pour des questions de lisibilité des différentes lignes de métro, j’ai choisi d’utiliser le fond de carte Stamen Toner Lite.

Pour le tracé des lignes, j’ai utilisé des données fournies par le STIF sur opendata.stif.info.

Les codes couleur des différentes lignes proviennent de la RATP sur data.ratp.fr.

Les coordonnées des stations proviennent elles aussi du STIF, et de Wikipédia pour les stations fantômes.

Le logo utilisé comme marqueur de position d’une station provient du site de la RATP.

Continuer la lecture