Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 253
wont_compile Avatar asked Dec 03 '14 22:12

wont_compile


People also ask

How do you show markers in leaflet?

Adding a Simple Marker Step 1 − Create a Map object by passing a <div> element (String or object) and map options (optional). Step 2 − Create a Layer object by passing the URL of the desired tile. Step 3 − Add the layer object to the map using the addLayer() method of the Map class.

Why is map not showing in leaflet?

There are a number of reasons why your map might not be displaying: You have an error in your JavaScript (most likely) - use whichever debugging tool is provided with your browser to verify. you are using Internet Explorer and you have Compatibility mode ON....

What is a layer in leaflet?

In Leaflet, a “layer” is anything that moves around when the map is moved around. Before seeing how to create them from scratch, it's easier to explain how to do simple extensions.


2 Answers

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/

like image 185
dkiselev Avatar answered Oct 16 '22 00:10

dkiselev


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.

like image 28
Mensch Avatar answered Oct 15 '22 23:10

Mensch