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.

Mise forme des données

Les données ci-dessus vont être rassemblées dans deux FeatureCollection GeoJSON (une pour le tracé des lignes et une pour la position des stations), qui pour des questions de praticité seront stockés dans des fichiers séparés.

Tracé des lignes

Chaque ligne est représentée par une feature avec une geometry de type MultiLineString. Chacune de ces features possède deux propriété : « line », qui contient le numéro de ligne, et « color », qui contient le code hexa de la couleur de la ligne.

Coordonnées des stations

Chaque station est représentée par une feature avec une geometry de type Point. Les propriétés de chacune de ces features sont « name » (nom de la station) et « about » (lignes desservant la station).