Ajoutons notre style

Cette carte utilise les styles de base de Leaflet, mais pour notre carte, nous voulons que les stations soient indiquées par le M et que les lignes soient de la couleur qu’elles ont sur les cartes de la RATP.

Style des lignes

Pour le style des lignes, en plus de la couleur officielle, il faut régler leur poids à 4. Pour ce faire, au moment de la création de la couche des lignes, il faut rajouter une option « style ».

Cette option est une fonction qui prend en paramètre d’entrée une feature GeoJSON et qui retourne un style.

Dans cette fonction, on récupère la propriété « color » de la feature pour l’attribut « color » du style, et on règle l’attribut « weight » du style à 4.

Cela donne :

L.geoJson(metro_lines,{
  style: function(feature){
    return {color: feature.properties.color, weight:4}
  }
}).addTo(map);

Style des stations

Pour le style des stations, au moment de la création de la couche correspondante, il faut utiliser l’option « pointToLayer ».

La fonction correspondante prend 2 paramètres d’entrée : une feature GeoJSON et ses coordonnées. Cette fonction retourne un marqueur Leaflet.

À ce marqueur on associe une icône Leaflet qui utilise le logo « M » en le redimensionnant et en le centrant.

En code cela se traduit par :

L.geoJson(metro_stations,{
  pointToLayer: function(feature,latlng){
    return L.marker(latlng,{
      icon: L.icon({
        iconUrl: '/assets/files/images/symbole_metro.svg',
        iconSize: [14,14],
        iconAnchor: [7,7]
      })
    });
  }
}).addTo(map);

Une fois ces deux modifications appliquées, nous obtenons le résultat suivant :