Ajouter de marqueurs

Leaflet met à disposition plusieurs manières de créer des marqueurs:

  • Des marqueurs simples.
  • Des marqueurs avec une icône.
  • Des marqueurs à partir de code HTML.
  • Mais aussi de nombreux plugins permettant de créer d’autres types de marqueurs.

Afficher un marqueur basique

Pour ajouter un marqueur on crée un objet L.marker avec une position qu’on ajoute à la carte.

let marqueur = L.marker([48.856944, 2.351389]).addTo(map)

Plus d’informations sur le tuto d’Eskimon

Sur notre marqueur on peut ajouter un pop-up qui s’ouvrira au clic de la souris.

marqueur.bindPopup('Ceci est un test');

Ou directement à la création du marqueur :

let marqueur = L.marker([48.856944, 2.351389]).bindPopup('Ceci est un test').addTo(map)

Afficher un marqueur avec une icône personnalisées

Pour créer des marqueurs avec des images personnalisées, nous allons utiliser des L.icon permettant de paramétrer des icônes personnalisés.

Il nous faut créer une extension de la classe L.Icon sur laquelle on définit des options de taille (iconSize), de décalage de l’icône (iconAnchor) et de décalage de la popup (popupAnchor)

var myIconClass = L.Icon.extend({
    options: {
        iconSize:     [38, 95],
        iconAnchor:   [22, 94],
        popupAnchor:  [-3, -76]
    }
});

On crée une instance de notre classe, dans laquelle on définit ensuite l’image de l’icône

var icon = new myIconClass ({
    iconUrl: 'https://zestedesavoir.com/media/galleries/16186/d2a9ef14-71b2-4acb-a1cb-cf83eff0294f.png'
});

Enfin on crée le marqueur avec notre icône

L.marker([48.856944, 2.351389], {icon: icon}).bindPopup('Ceci est un test').addTo(map);

On peut également définir des ombres à notre image, pour cela on définit la taille, la décalage de l’ombre et on ajoute notre image d’ombre.

var myIconClass = L.Icon.extend({
    options: {
        iconSize:     [20, 20],
        iconAnchor:   [10, 10],
        popupAnchor:  [0, -10],
        shadowSize:   [20, 20],
        shadowAnchor: [6, 8],
    }
});

var icon = new myIconClass({
    iconUrl: 'https://zestedesavoir.com/media/galleries/16186/d2a9ef14-71b2-4acb-a1cb-cf83eff0294f.png',
    shadowUrl: 'https://zestedesavoir.com/media/galleries/16186/3503ba88-d052-4f5f-81df-223c70024f04.png'
});
Notre marqueur personnalisé avec une ombre
Notre marqueur personnalisé avec une ombre

Ajout d'un marqueur au clic

Nous allons maintenant faire un système d’ajout d’un nouveau marqueur au clic de la souris, pour cela nous allons ajouter un bouton et un système d’ajout de marqueur.

Dans la méthode onAdd, on ajoute notre bouton :

   var buttonAddMarker = L.DomUtil.create('button', 'my-button-class', div);

    let backgroundAddMarker = L.DomUtil.create('img', '', buttonAddMarker);
    backgroundAddMarker.src = "https://zestedesavoir.com/media/galleries/16186/d2a9ef14-71b2-4acb-a1cb-cf83eff0294f.png";
    backgroundAddMarker.style = "margin-left:0px;width:20px;height:20px";

    L.DomEvent.on(backgroundAddMarker, 'click', function() { this.addMarker(); }, this);

Pour gérer le clic sur la carte il faut écouter l’évènement mousedown de notre map, il prend en paramètre un évènement sur lequel on peut récupérer la latitude et la longitude du clic.

let enableAddMarker = false;
map.on('mousedown', function(e)
{
  if(enableAddMarker)
  {
    enableAddMarker = false;
    L.marker([e.latlng.lat, e.latlng.lng], {icon: icon}).bindPopup('Ceci est un test').addTo(map);
  }
});

Enfin au clic sur le bouton activation, on met à jour la variable d’ajout de marqueur

  addMarker()
  {
    enableAddMarker = true;
  }

Code complet :

Marqueur HTML et plugins

Il est possible de créer des marqueurs plus personnalisés, si vous le souhaitez je vous laisse suivre ce tuto (en anglais)

Il existe également beaucoup de modules permettant de personnaliser ses marqueurs:

Dans la prochaine partie nous verrons comment créer des tooltips personnalisés.