I am trying to keep a specific layer named popDensity on top of all the other layers on my map despite what other layers I may click in the layers control. I am using the Leaflet overlayadd event to listen for my popDensity layer and then using the bringToFront() method to ensure that popDensity stays at the top of my other layers when they are clicked.

Here's my sample setup:

//establish the data
var popDensity = L.geoJson(popDensity, {
    onEachFeature: onEachFeature
    style: myCustomstyle

//Create the legend control for the popDensity layer
var popuLegend = L.control();
popuLegend.onAdd = function(map){
    var container = L.DomUtil.create('div', 'info');
    container.innerHTML = '<h3>Population</h3><ul id="popuLegend"><li>1000+</li><li>500+</li><li>etc..</li></ul>';
    return container;

My layers control:

var baseMaps = {
    "Base map 1": basemapOne,
    "Base map 2": basemapTwo

var ethnicGroups = {
    "Pashtun": pashtun,
    "Tajik": tajik,
    "etc..": etc,
    "District Population": popDensity

L.control.layers(baseMaps, ethnicGroups).addTo(map);

Here's my event handler:

map.on('overlayadd', function(eventLayer){
    if (eventLayer.name === 'District Population'){
map.on('overlayremove', function(eventLayer){
    if (eventLayer.name === 'District Population'){

This setup successfully adds the popuLegend legend control when the 'District Population' overlay is checked, but when it is unchecked, and then checked again, I get the following error in console:

Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

At the same time, when I click on the Pashtun and Tajik layer(s) these layers will show on top of the popDensity layer which defeats the purpose of trying to use the .bringToFront() method on the popDensity layer.

how can I ensure that my popDensity layer is the top layer at all times as long as that layer is checked on?


You could look at map panes in leaflet beta or use .bringToFront() on every overlayadd event at least as far as keeping the popDensity layer on top.

  • can you show an example of using bringToFront() on every overlayadd event? Thanks.
    – redshift
    Apr 6 '16 at 18:36

I am not an expert or anything, but I see that when you uncheck you completely remove the layer, and never add it back into the map. maybe it can be as simple as adding map.addLayer(popDensity);in your overlayadd function before using bringToFront(). Hope that helps, and if not I hope you get an answer that helps soon!

  • 1
    Does it give you the same error? yeah just noticed playing with control and noticed that the unchecking should automatically remove and add layers to map-_-. maybe removing the layer is uneccessary then? try removing the map.removeLayer(popDensity); ? Apr 6 '16 at 18:42

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.