Après vous avoir créé une carte interactive du métro de Paris avec la librairie Leaflet (voir mon précédent article), j’ai décidé de recréer cette carte avec l’autre libraire majeure de cartographie en ligne : OpenLayers (que j’ai déjà utilisée pour ma carte utilisant un fond statique).

Données utilisées

Les données utilisées pour créer cette carte sont les même que pour celle réalisée avec Leaflet :

• Fond de carte Stamen Toner Lite
• Tracé des lignes fournis par le STIF sur leur site d’open data : opendata.stif.info
• Code couleur des lignes fournis par la RATP : data.ratp.fr
• Coordonnées des stations fournies par le STIF et Wikipédia pour les stations fantômes
• Logo utilisé comme marqueur de position trouvé sur le site de la RATP

Mise en place de la carte de base

Comme pour la carte faite avec Leaflet, les exemples suivants seront présentés au format de 500 pixels sur 375.

La position et le zoom de départ seront également les mêmes : point zéro des routes de France et zoom de niveau 12.

Avec OpenLayers, Stamen est un fournisseur de tuile inclus (en quelque sorte). L’initialisation de notre fond de carte se fait comme suit :

new ol.layer.Tile({
	source: new ol.source.Stamen({
		layer: 'toner-lite'
	})
});

Pour centrer la vue, il faut fournir les coordonnées de manière inversées (YX au lieu de XY) et les convertir avec ol.proj.fromLonLat(). Dans les paramètres de la vue on précise également le zoom de départ et le zoom maximum :

new ol.View({
	center: ol.proj.fromLonLat([2.3488, 48.8502]),
	zoom: 12,
	maxZoom: 20
})

L’initialisation de la carte se fait alors comme suit :

var map = new ol.Map({
	layers: [
		new ol.layer.Tile({
			source: new ol.source.Stamen({
				layer: 'toner-lite'
			})
		})
	],
	target: 'map',
	view: new ol.View({
		center: ol.proj.fromLonLat([2.3488, 48.8502]),
		zoom: 12,
		maxZoom: 20
	})
});

Ensuite, on ajoute nos objets GeoJSON (ici il faut préciser la projection, car étrangement OpenLayers ne reconnaît pas correctement les coordonnées fournies) :

var lines = new ol.layer.Vector({
	source: new ol.source.Vector({
		features: (new ol.format.GeoJSON({featureProjection:'EPSG:3857'})).readFeatures(metro_lines)
	})
});

map.addLayer(lines);

      	var stops = new ol.layer.Vector({
	source: new ol.source.Vector({
		features: (new ol.format.GeoJSON({featureProjection:'EPSG:3857'})).readFeatures(metro_stations)
	})
});

map.addLayer(stops);

On obtient alors la carte suivante :