Leaflet: How to add a text label to a custom marker icon?

Question

You could use a L.DivIcon:

Represents a lightweight icon for markers that uses a simple div element instead of an image.

http://leafletjs.com/reference.html#divicon

Put your image and text in it’s HTML, sprinkle some CSS to make it appear the way you want and you’re good to go

new L.Marker([57.666667, -2.64], {
    icon: new L.DivIcon({
        className: 'my-div-icon',
        html: '<img class="my-div-image" src="http://png-3.vector.me/files/images/4/0/402272/aiga_air_transportation_bg_thumb"/>'+
              '<span class="my-div-span">RAF Banff Airfield</span>'
    })
});

Another option is to use the Leaflet.Label plugin:

Leaflet.label is plugin for adding labels to markers & shapes on leaflet powered maps.

Repository: https://github.com/Leaflet/Leaflet.label
Example: http://leaflet.github.io/Leaflet.label/

Leave a Comment Cancel reply