Mise en place de la carte de base
Dans tous les exemples suivants, la carte sera affichée dans une div avec l’ID « map », de dimensions de 500 pixels de large sur 375 pixels de haut.
La carte est initialisée sur le point zéro des routes de France, avec un niveau de zoom à 12. Ces deux réglages sont stockés dans deux variables :
var center = [48.8502, 2.3488];
var zoom = 12;
Ensuite, on initialise la map :
var map = L.map('map',{
center: center,
zoom: zoom
});
L’étape suivante consiste à ajouter le fond de carte :
L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}{r}.{ext}', {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
subdomains: 'abcd',
minZoom: 0,
maxZoom: 20,
ext: 'png'
}).addTo(map);
Maintenant, il ne nous reste plus qu’à ajouter nos objets GeoJSON :
L.geoJson(metro_lines).addTo(map);
L.geoJson(metro_stations).addTo(map);
Nous obtenons alors la carte ci-dessous :