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.
Retour sur la base
Avant de parler de la personnalisation d’un marqueur avec OpenLayers, je souhaite d’abord revenier rapidement sur la définition de 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])),
});