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) etzoom
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,
});