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

Question

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!

iH8 · Accepted Answer · 2018-12-11T11:15:46.000

76

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/

edited Dec 11 '18 at 11:15

answered Jan 13 '16 at 20:04

iH8

27,722
4
67
76

Exactly what I was seeking. Thanks! – redshift Jan 13 '16 at 23:27
Perfect for me. I wanted custom text for each marker and I couldn't do that with an image :) This works perfect. – Sergio Tx Mar 31 '17 at 07:13
1

I think you mispelled it, it should be lower case `divIcon`. – phil294 Sep 12 '17 at 16:25
2

"NOTE: starting with Leaflet 1.0, L.Label is added to Leaflet core as L.Tooltip and this plugin is deprecrated." – Lee Goddard Nov 25 '19 at 14:25

score 58 · Answer 2 · answered Oct 02 '16 at 07:24

58

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.

answered Oct 02 '16 at 07:24

Mark

4,970
5
42
66

2

Great answer! So happy that Leaflet rolled this into the core package. API reference is here - http://leafletjs.com/reference-1.0.3.html#layer-bindtooltip – MattSidor Feb 07 '17 at 21:20
1

To make it look as google maps markers: `L.marker(latlng).bindTooltip("A",{permanent: true, direction: 'top',offset:L.point(-14, -5)}).addTo(map);` – Jawad Al Shaikh Sep 15 '21 at 08:48

thomaslprr · Answer 3 · 2022-07-19T10:54:30.013

To further explore Mark's answer, if you want to know an easy way to add text (number) over a marker like this:

You just have to proceed as follows:

1. Instantiate an icon (map.js)

var stepIcon = L.icon({
    iconUrl: 'graphic/yellow-circle.png', // the background image you want
    iconSize: [40, 40], // size of the icon
});

2.1 Setting the icon (map.js)

var marker = new L.marker([39.5, 77.3], { icon:stepIcon});
marker.bindTooltip("12" //specific number, {
                            permanent: true,
                            direction: 'center',
                            className: "my-labels"
                         });
marker.addTo(map);

2.2 Setting the icon (map.css)

.leaflet-tooltip.my-labels {
  background-color: transparent;
  border: transparent;
  box-shadow: none;
  font-weight: bold;
  font-size: 30px;
  }

Make sure you have imported your .css file into your .html page.

score 0 · Answer 4 · answered Dec 02 '21 at 14:53

this is out of box solution it may not suitable for everyone but it works for me simply you can add marker of icon then marker of text Like this :

    var MarkerIcon = L.icon(feature.geometry.properties.icon);
    var MarkerText = L.divIcon(
    {className: TextPositionClass,
     html:'<div>'+ displayText+'</div>',
     iconSize: null
    });
        
        
  let  marker = L.marker(latlng,  {icon: MarkerIcon}).addTo(this.map); // add marker 
  let label = L.marker(latlng, {icon: MarkerText}).addTo(this.map); // add text on marker

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

4 Answers4