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
- Afficher un marqueur avec une icône personnalisées
- Ajout d'un marqueur au clic
- Marqueur HTML et plugins
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'
});
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:
- Un module que j’ai réalisé afin de pouvoir afficher des icônes colorisées (à partir d’images noires)
- Un module pour créer de belles icônes à partir de Glyphicons ou Font-Awesome
Dans la prochaine partie nous verrons comment créer des tooltips personnalisés.