Leaflet.label not showing over the markers

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

Solution

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/

Problem

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. 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

Original source