How to add text-only labels on Leaflet map with no icon

Question

I'm looking for a way to show text on Leaflet map using markers or anything else without showing any icon. I want to show text only and be able to style and rotate it... Any suggestion?

@NikhilVJ - That Q&A doesn't discuss how to have a tooltip without having a corresponding marker. The answers here discuss how to have only the text, with no visible marker. — ToolmakerSteve, Oct 09 '19 at 12:34

score 30 · Answer 1 · edited Oct 24 '16 at 14:18

30

Update for Leaflet 1.0: As of Leaflet 1.0, the Leaflet.label plugin is depracated, as it has been included with the Leaflet core as L.Tooltip. There is no need to include the source script, and the syntax has changed slightly. Sample usage:

var marker = new L.marker([39.5, -77.3], { opacity: 0.01 }); //opacity may be set to zero
marker.bindTooltip("My Label", {permanent: true, className: "my-label", offset: [0, 0] });
marker.addTo(map);

CSS styling may be applied to the class the same way as before.

.my-label {
    position: absolute;
    width:1000px;
    font-size:20px;
}

It also appears that the marker opacity may be set completely to 0.

Before Leaflet 1.0: Use the Leaflet.label Plugin (already mentioned by geomajor56).

<script src="scripts/leaflet.label.js"></script>

With the Leaflet Label plugin, labels are directly tied to markers, but you can set the opacity of the marker to almost zero so only the label is visible. (If you set the marker's opacity to 0, the associated label disappears as well.)

var marker = new L.marker([39.5, -77.3], { opacity: 0.01 });
marker.bindLabel("My Label", {noHide: true, className: "my-label", offset: [0, 0] });
marker.addTo(map);

You can then use CSS to style your labels as you see fit:

.my-label {
    position: absolute;
    width:1000px;
    font-size:20px;
}

edited Oct 24 '16 at 14:18

user2441511

284
3
11

answered Aug 27 '14 at 20:09

James Lawruk

941
6
9

- After I've added this line to my HTML the page appeared to be blank. Do I need to download any files? – Marcin Jun 05 '16 at 19:15
@MarcinKosiński - Yes, you'll need to download leaflet.label.js from the GitHub link in the post, and put it in a subfolder of your website named scripts. Or, you can replace the URL in the code with the hosted file at http://leaflet.github.io/Leaflet.label/leaflet.label.js (you may also want the CSS file; same name and location, different extension). – KeithS Jul 18 '16 at 20:55
i tried to do this,,, any idea how to remove the background and border ? https://snag.gy/JdnpyV.jpg – vvavepacket Feb 05 '17 at 22:09
When using L.Tooltip inside onEachFeature, getting error : "Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'." – Nikhil VJ Oct 08 '17 at 04:00
Solved, I was using one of the feature properties as text, had to append a .toString() at the end. marker.bindTooltip(feature.properties['prabhag_number'].toString(), {... – Nikhil VJ Oct 08 '17 at 04:10
This doesn't position the label at the marker origin. This can be seen by (temporarily) setting the marker opacity to 1 instead of 0.01. Or placing another marker on top, at the same location. The reason is that the default marker has a non-zero popupAnchor or tooltipAnchor (I'm not sure which). I solved by defining/using my own icon, with size [1,1] and all anchors and offsets [0.0]. – ToolmakerSteve Oct 09 '19 at 13:39
Is there a way to set the css style directly from the JS code, without creating a class-name in my .css files ??? – Gil Epshtain Jun 02 '20 at 16:39

score 25 · Accepted Answer · edited Apr 20 '17 at 20:05

25

I solved my problem by using the Leaflet L.DivIcon feature that represents a lightweight icon for markers that uses a simple div element instead of an image... These markers have an html and a className options that allow me to create labels with css drived styles...

edited Apr 20 '17 at 20:05

Aaron

51,658
28
154
317

answered Jul 02 '13 at 17:59

Etienne Desgagné

882
1
8
15

12

Would you mind providing a little bit of code for this? – mastov May 13 '16 at 09:13
This answer is not idea if you want a label AND a marker – Roy Jul 10 '17 at 16:48
1

@Roy - that is a different situation; See L.Tooltip. If you want the label (the tooltip) to always show, you set option permanent to true. – ToolmakerSteve Oct 09 '19 at 12:36

score 6 · Answer 3 · answered May 01 '13 at 00:37

6

You can start here with this Leaflet plugin. Probably create or edit a marker to your liking. Is the text coming from feature attributes?

answered May 01 '13 at 00:37

geomajor56

2,102
2
18
26

1

This answers a different question than was asked. This is how to add a label to an existing marker; it is not an explanation as to how to have only a label - no marker symbol. – ToolmakerSteve Oct 09 '19 at 12:45

score 0 · Answer 4 · edited Sep 10 '19 at 11:20

0

marker.bindTooltip("text here", { permanent: true, offset: [0, 12] });

This works for me

edited Sep 10 '19 at 11:20

MrXsquared

34,292
21
67
117

answered Sep 10 '19 at 07:45

Sathish Kumar Arunachalam

9
1

2

This answers a different question than was asked. This is how to add a label to an existing marker; it is not an explanation as to how to have only a label - no marker symbol. – ToolmakerSteve Oct 09 '19 at 12:39

How to add text-only labels on Leaflet map with no icon

4 Answers4

Linked