Dans ce tuto, pas de code, car j’ai décidé de vous parler d’une astuce avec le logiciel de dessin vectoriel Inkscape.
Oui, car depuis maintenant bientôt 5 ans, je poste quotidiennement sur mon compte Instagram (@geekc) des illustrations réalisées avec ce logiciel.
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.
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 :
center (pour indiquer les coordonnées sur lesquelles centrer la carte) et zoomPour 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,
});
Dans un tuto précédent sur la réalisation d’une carte à l’aide d’OpenLayers (carte du métro), j’ai utilisé des marqueurs personnalisés, mais comme ce n’était pas l’intérêt majeur du tuto, ne me suis pas attardé sur ce point.
Et c’est justement sur ce point, la personnalisation des marqueurs d’une carte OpenLayers, que l’on va se pencher aujourd’hui.
Avant de parler de la personnalisation d’un marqueur avec OpenLayers, je souhaite d’abord revenir rapidement sur la manière de définir ce marqueur.
Avec OpenLayers, un marqueur est une Feature dont la géométrie est un Point. Et les coordonnées de ce point sont définies via la méthode ol.proj.fromLonLat(), à laquelle on fournit un array contenant la longitude, puis la latitude.
En prenant en exemple le point zéro des routes de France (sur le parvis de Notre-Dame de Paris), dont les coordonnées en latitude/longitude sont 48.8533973/ 2.3487972, cela donne :
const iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([2.348785, 48.853402])),
});