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 = 'Population
- 1000+
- 500+
- etc..
';
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
};
map.fitBounds(pashtun.getBounds());
L.control.layers(baseMaps, ethnicGroups).addTo(map);
Here's my event handler:
map.on('overlayadd', function(eventLayer){
if (eventLayer.name === 'District Population'){
popDensity.bringToFront();
map.addControl(popuLegend);
}
});
map.on('overlayremove', function(eventLayer){
if (eventLayer.name === 'District Population'){
map.removeControl(popuLegend);
map.removeLayer(popDensity);
}
});
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?
No comments:
Post a Comment