javascript - Leaflet.label not showing over the markers - Stack Overflow

admin管理员组

文章数量:1316974

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 ments), the labels are always behind the markers, which is not the expected behavior.

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 plete code can be seen here

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 ments), the labels are always behind the markers, which is not the expected behavior.

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 plete code can be seen here

• javascript
• google-maps
• google-maps-markers
• z-index
• leaflet

Share Improve this question Follow edited Dec 5, 2014 at 19:58 wont_pile asked Dec 3, 2014 at 22:06 wont_pilewont_pile 87622 gold badges1818 silver badges4343 bronze badges 2

• You need to look to see what pane of the map the label is being attached to and move it to one above the markers. You might also look at {optimized: false} for the markers (if it is available). – geocodezip Commented Dec 3, 2014 at 22:40
• It is being attached to the leaflet-marker-pane, as the last element in the list of all markers in the div. – wont_pile Commented Dec 5, 2014 at 19:51

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7 +50

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./Leaflet/Leaflet.label

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

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./reference.html#featuregroup-bringtofront Post your code somewhere too so I can take a look at it.

本文标签： javascriptLeafletlabel not showing over the markersStack Overflow