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

Ensuite, pour pouvoir utiliser ce marqueur, il faut l’intégrer à une source de type vectoriel, source qui sera ensuite rajouté à un calque de type vectoriel. Ce calque est ensuite rajouté au-dessus du fond de carte à la création de la carte elle-même. Ce qui donne :

const vectorSource = new ol.source.Vector({
  features: [iconFeature]
});

const vectorLayer = new ol.layer.Vector({
  source: vectorSource
});

const rasterLayer = new ol.layer.Tile({
  source: new ol.source.OSM(),
});

const map = new ol.Map({
  layers: [rasterLayer, vectorLayer],
  target: document.getElementById("map"),
  view: new ol.View({
    center: ol.proj.fromLonLat([2.348785, 48.853402]),
    zoom: 18
  })
});

Et en assemblant les deux bouts de code ci-dessus, vous obtenez une carte basique, avec un marqueur.

Personnaliser le marqueur

Pour personnaliser un marqueur avec OpenLayers, il faut utiliser un objet de type Style, dont l’attribut image contiendra un objet de type Icon.

Les attributs de l’object Icon qui nous intéressent dans notre cas sont :

• src : l’adresse de notre image (relative ou absolue)
• anchor : permet d’indiquer le point de l’image qui sera aux coordonnées du marqueur
• anchorXUnits : permet d’indiquer dans quelle unité (pourcentage ou pixels) est renseignée la coordonnée X de l’ancre
• anchorYUnits : la même que pour anchorXUnits, mais pour la coordonnée Y de l’ancre.

On obtient alors :

const iconStyle = new ol.style.Style({
  image: new ol.style.Icon({
    anchor: [16, 42],
    anchorXUnits: "pixels",
    anchorYUnits: "pixels",
    src: "/assets/files/images/marker.png"
  })
});

Une fois notre style défini, il faut l’attribuer à notre marqueur :

iconFeature.setStyle(iconStyle);

Une fois le style attribué à notre marqueur, plus rien ne change par rapport au code indiqué dans la partie précédente.

La version complète de cette carte est visible ici.