Cette semaine encore, nous allons encore voir la création d’une carte interactive avec la librairie Leaflet.

La carte présentée aujourd’hui utilise les groupes de calques, ainsi que le contrôle de calques, afin de réaliser une carte historique de la ligne 2 du tramway d’Île-de-France.

Bref historique

Afin d’expliquer le découpage des données et les différents calques, un bref historique de la ligne doit être fait.

Jusqu’en 1993, une partie des voies empruntées par la ligne actuelle était exploitée par la SNCF (le tramway actuel est exploité par la RATP) sous le nom de « Ligne de Puteaux à Issy-Plaine ».

En 1997, entre en service le T2, qui empreinte le même parcours, plus une extension au nord. Toutes les stations de l’ancienne ligne sous réutilisées, certaines changeant de nom, et 4 nouvelles sont créées.

En 2006, une section du parcours est déviée.

En 2009, la ligne est prolongée une première fois au sud, avec l’ajout de 4 nouvelles stations.

En 2012, la ligne est prolongée une deuxième fois vers le nord, rajoutant 7 nouvelles stations.

Les données

Les tracés et les coordonnées des stations proviennent du site d’Open data d’Île-de-France Mobilités. Pour le tracé de la voie avant la déviation de 2006, je l’ai édité moi-même, à l’aide du site geojson.io.

Pour éviter la répétition des tracés, je les ai séparés en 5 fichiers GeoJSON distincts :

• La ligne originale
• La première extension au nord au moment de la création de la ligne de tramway
• La ligne déviée en 2006 (modification du tracé de la ligne originale)
• Le prolongement au sud
• Le prolongement au nord.

Concernant les stations, comme il y a eu réutilisation des anciennes stations avec certaines changeant de nom, celle-ci ont été répétées. À la fin on se retrouve avec 4 différents fichiers GeoJSON :

• Les arrêts de la ligne originale
• Les arrêts de la ligne de tramway avant extension
• Les arrêts de la première extension
• Les arrêts de la deuxième extension.

Mise en place de la carte de base

Le niveau de zoom et le centre de cette carte ont été déterminés afin de montrer l’ensemble du parcours initial de la ligne.

On initialise donc la map :

var center = [48.847886021323966, 2.258634567260742];
var zoom = 12;

var map = L.map('map',{
	center: center,
	zoom: zoom
});

Pour cette carte j’ai décidé d’utiliser le fond de carte Wikimedia, que l’on rajoute comme suit :

L.tileLayer('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}{r}.png', {
	attribution: '<a href="https://wikimediafoundation.org/wiki/Maps_Terms_of_Use">Wikimedia maps</a> | Map data © <a href="http://openstreetmap.org/copyright">OpenStreetMap contributors</a>',
	minZoom: 1,
	maxZoom: 19
}).addTo(map);