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

Is it possible to add text to a custom icon marker? I want to avoid having to edit the icon in an image editor just to add the text.

I've created my custom icon marker like so:

var airfieldIcon = L.icon({
        iconUrl: 'images/airfield.png',
        iconSize: [48,48]
});

var airfield = L.geoJson (airfield, {
    pointToLayer: function(feature,latlng){
        return L.marker(latlng, {
            icon: airfieldIcon
        })
    }
}).addTo(map);

How would I add the text "Banff Airfield" as a label to this icon? Is the easiest and most efficient way through using an image editor? if so, I will do that method, but wondering if there was a better way. Thanks!

Solution 1:

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/

Solution 2:

As of leaflet version 1.0.0, you can add a label without using a plugin (the plugin has been rolled into the core functionality).

Example:

var marker = L.marker(latlng)
    .bindTooltip("Test Label", 
    {
        permanent: true, 
        direction: 'right'
    }
);

This yields a marker on the map with a label of "Test Label" which is always displayed to the right of the marker's icon.