Lors de mon tutoriel sur la carte du métro de Paris avec Leaflet, j’ai déjà personnalisé les marqueurs de cette carte, mais comme dans le cadre du tutoriel c’était assez secondaire, je n’ai pas détaillé ce point.

Aujourd’hui est venu le temps de revenir sur la manière d’utiliser nos propres marqueurs sur une carte Leaflet.

Rappel des bases

Avant de parler de la manière dont on crée un marqueur personnalisé avec Leaflet, je pense qu’il serait intéressant de revenir sur la création d’une carte avec un marqueur.

Première étape, créer la carte. Pour cela, il suffit juste d’appeler le constructeur L.map(), en lui fournissant deux paramètres :

• l’id de la <div> destinée à la carte
• un objet d’options, dont les plus intéressantes sont center (pour indiquer les coordonnées sur lesquelles centrer la carte) et zoom

Pour créer une carte centrée sur le point zéro des routes de France, cela donne :

const map = L.map('map', {
  center: [48.853402, 2.348785],
  zoom: 16,
});

Ensuite, à cette carte il faut rajouter un fond. Cela passe par un objet de type TileLayer, qu’on rajoute à notre carte. Pour utiliser le fond de carte OpenLayers, on obtient le code suivant :

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

Deuxième et dernière étape pour notre carte de base, la création de notre marqueur. Pour faire ça, on créé un objet de type Marker, que l’on ajoute après à notre carte.

Le constructeur de notre marqueur doit obligatoirement avoir en paramètre un array contenant ses coordonnées (le contructeur peut également prendre en deuxième paramètre un objet d’options). Pour placer un marqueur au même emplacement que le centre initial de la carte, il faut faire comme ça :

L.marker([48.853402, 2.348785]).addTo(map);

Un fois tous ces bouts de codes rassemblés, on obtient une carte de base.

La personnalisation de notre marqueur

Avec Leaflet, pour personnaliser un marqueur, il faut ajouter à l’objet d’options de son contructeur un attribut icon.

Cet attribut contient un objet de type Icon. Et le constructeur de cet objet prend en paramètre un autre objet d’options.

Parmis ces options, celles qui nous intéressent sont :

• iconUrl : l’url de notre image
• iconAnchor : permet de préciser (en pixels) le point de l’image qui sera placé aux coordoonées du marqueur

Vous avez également la possibilité de rajouter une ombre à votre marqueur, via les options shadowUrl et shadowAnchor.

Pour personnaliser avec ombre le marqueur créé précédement, on obtient :

L.marker(
  [48.853402, 2.348785],
  {
    icon: L.icon({
      iconUrl: 'https://geekcommunicant.com/assets/files/images/marker.png',
      iconSize: [32, 48],
      iconAnchor: [16, 42],
      shadowUrl: 'https://geekcommunicant.com/assets/files/images/marker-shadow.png',
      shadowSize: [50, 48],
      shadowAnchor: [12, 44]
    })
  }
).addTo(map);

Le résultat final de ce tuto est visible ici.