How to show label over markers on leaflet?

Question

I need to show label over markers on leaflet to make it readable. How can I implement it? See the picture below label is overlay-ed by marker

Answer 1

EDIT:

An even more simple workaround would be to use the marker option riseOnHover (if you accept that behaviour on markers).

Leaflet adjusts the marker z-index when you hover it (so that it appears above others), and the label will also be adujsted automatically, so it will also appear above all other markers!

When instantiating your markers, simply make sure to set that option to true:

L.marker(latlng, {
    riseOnHover: true
});

Demo: http://jsfiddle.net/ve2huzxw/64/

---

Initial answer:

Unfortunately L.Label automatically adjusts the label's z-index to the same value as its source / parent marker. And because Leaflet automatically adjusts the markers z-index so that lower (south-er) markers appear above, they would also appear above labels of upper (north-er) markers.

A "simple" workaround would be to force L.Label to add the labels to the popupPane instead of the markerPane, as it already does for vectors. But that would mean modifying the library code.

If you are ready to go this way, simply add the following code in your script, before starting instantiating layers and their labels:

// Modify the L.Label.onAdd prototype method.
L.Label.include({
    onAdd: function (map) {
        this._map = map;

        //this._pane = this._source instanceof L.Marker ? map._panes.markerPane : map._panes.popupPane;
        this._pane = map._panes.popupPane; // add to popupPane in all cases.

        if (!this._container) {
            this._initLayout();
        }

        this._pane.appendChild(this._container);

        this._initInteraction();

        this._update();

        this.setOpacity(this.options.opacity);

        map
            .on('moveend', this._onMoveEnd, this)
            .on('viewreset', this._onViewReset, this);

        if (this._animated) {
            map.on('zoomanim', this._zoomAnimation, this);
        }

        if (L.Browser.touch && !this.options.noHide) {
            L.DomEvent.on(this._container, 'click', this.close, this);
        }
    }
});

Demo: http://jsfiddle.net/ve2huzxw/63/

Another workaround could be to have L.Label use a z-index offset when adjusting the label z-index compared to the marker one. But that would also require modifying the library code.

That could be an interesting feature request for L.Label plugin library. However it looks to be no longer maintained?