4

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

enter image description here

4

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?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.