Leaflet – How to Add Text-Only Labels on Map with No Icon

leaflet

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?

Best Answer

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;
}
Related Question