CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-markersz-indexleaflet
wont_compile
wont_compile

Reputation: 876

Leaflet.label not showing over the markers

I am having a set of geoJSON points and they have corresponding labels attached to them.

var points = L.geoJson (null, {
    onEachFeature: function (feature, layer) {
        layer.options.riseOnHover=true; //tried adding this
        layer.options.riseOffset=9999; //as well as this
        layer.bindLabel(feature.properties["name"], {className: 'map-label'});
        L.setOptions(layer, {riseOnHover: true}); //this as well
    }
});

This is the code that goes through each feature in JSON file and creates set of points. Now, the actual function that adds markers to the map goes like this:

var addJsonMarkers = function() {
    map.removeLayer(markers);
    points.clearLayers();

    markers = new L.layerGroup();
    points.addData(dataJson);
    markers.addLayer(points);

    map.addLayer(markers);

    return false;
};

The issue I am having is that no matter what I try to add (you can see my comments), the labels are always behind the markers, which is not the expected behavior.

Screenshot of label behind the

I would like the label to be on top of it. I tried manually changing the z-index in the map-label class, as well as numerous solutions with riseOnHover which seems to be the solution for this, but the labels are still behind. Anyone seeing what I am doing wrong?

The complete code can be seen here

Upvotes: 8

Views: 3036

Answers (2)

dkiselev
dkiselev

Reputation: 940

Specify popupPane as pane in bindLable options: 

layer.bindLabel(
    feature.properties["name"], 
    {
        className: 'map-label', 
        pane:'popupPane'
    }
);

In Leaflet popupPane is higher than markerPane so your labels will appear on top of markers.

There is a small doc for Leaflet.label with options description https://github.com/Leaflet/Leaflet.label

Also check this jsfiddle: http://jsfiddle.net/L6kqu54a/

Upvotes: 7

Mensch
Mensch

Reputation: 497

Take a look at the bringToFront() and bringToBack() Methods, create a group function for the markers and bring it to back, meanwhile doing the opposite with labels. Or you could add a L.info to show up the information if you don't find out a solution. Take a look here maybe this could help: http://leafletjs.com/reference.html#featuregroup-bringtofront Post your code somewhere too so I can take a look at it.

Upvotes: 1

Related Questions