Ajout des données GeoJSON

Comme pour la carte présentée précédemment (carte des rues sans mégots) les données seront chargées en utilisant le plugin Leaflet AJAX.

Pour chaque étape de la vie de la ligne (voir les dates données dans la partie d’historique) il y aura deux calques : un pour la ligne et un pour les stations.

La fonction de style des lignes, appelée par l’option « style » du calque, est la suivante :

function styleLine() {
	return {color: '#a0006e'};
}

Pour les stations, la fonction de style, appelée par l’option « pointToLayer », est comme suit :

function styleStops(latlng) {
	return L.circleMarker(latlng,{
		fillOpacity: 1,
		fillColor: '#fff',
		color: '#000',
		weight: 2,
		radius: 6
	});
}

Les calques se créent alors avec le code suivant :

// Calque de la ligne originelle
var line_pip = new L.GeoJSON.AJAX('trace-puteaux_issy-plaine.geojson', {
	style: function(feature) {
		return styleLine();
	}
});

// Calque des arrêts originels
var stops_pip = new L.GeoJSON.AJAX('gares-puteaux_issy-plaine.geojson', {
	pointToLayer: function(feat, latlng) {
		return styleStops(latlng);
	}
});

Aux calques de stations, on rajoute également un tooltip, qui affichera le nom de la station, qui est stocké dans la propriété « name » de la feature, avec la méthode « bindTooltip » :

var stops_pip = new L.GeoJSON.AJAX('gares-puteaux_issy-plaine.geojson', {
	pointToLayer: function(feat, latlng) {
		return styleStops(latlng);
	}
}).bindTooltip(function(layer) {
	return layer.feature.properties.name
});

Pour les stages de la vie de la ligne nécessitant l’utilisation du contenu de plusieurs fichiers GeoJSON, on utilise la technique de prendre des p’tits bouts d’trucs pour les assembler ensemble (🎶).

Cela se fait en utilisant la méthode « addUrl » des calques créés :

var line_init = new L.GeoJSON.AJAX('trace-puteaux_issy-plaine.geojson', {
	style: function(feature) {
		return styleLine();
	}
});

line_init.addUrl('trace-nord_init.geojson');

Création des groupes de calques

Un groupe de calques se déclare simplement en précisant dans un array les calques à utiliser :

var pip = L.layerGroup([line_pip, stops_pip]);

L’ordre dans l’array correspond à l’ordre dans lequel les calques seront rendus, donc les calques les plus « bas » sur l’axe Z doivent être indiqués en premier.

On rajoute ensuite le groupe correspondant au tracé de la ligne Puteaux – Issy-Plaine à la carte :

pip.addTo(map);

Création du contrôle des calques

La fonction de création du contrôle prend 3 objets en entrée :

• Un objet contenant des calques sélectionnables par des boutons radio
• Un autre objet contenant des calques sélectionnables par des cases à cocher
• Un objet d’options.

Dans notre cas, les deux premiers objets sont vides, et le troisième ne contient qu’un seul réglage, indiquant que le contrôle doit toujours être affiché « déplié » :

var control = L.control.layers({},{},{collapsed:false}).addTo(map);

Une fois le contrôle créé et rajouté à la carte, on lui ajoute les différents groupes de calques, en précisant pour chacun le texte à utiliser dans le contrôle :

control.addBaseLayer(pip, 'Puteaux – Issy-Plaine');
control.addBaseLayer(init, 'Initial');
control.addBaseLayer(dev_2006, '2006');
control.addBaseLayer(extension_1, 'Première extension');
control.addBaseLayer(extension_2, 'Deuxième extension');

Et voilà, maintenant vous avez une carte historique, avec des tooltips !

Comme d’habitude, la version finale de cette carte est disponible sur mon site.