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

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...


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

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

Tags:

Leaflet