I am working with two geojson files containing polygons, each assigned to a different radio button. Additionally, there is a checkbox that contains a geojson polyline. My issue is that when I switch between the polygon layers, the polyline layer gets hidden. Is there a way to ensure that the polyline layer always stays visible in the front using BringToFront() or any other method?
You can view the simplified project on jsfiddle
http://jsfiddle.net/albertovich/fe0vtytb/
var poligon1 = new L.LayerGroup();
var poligon2 = new L.LayerGroup();
var polyline1 = new L.LayerGroup();
var map = L.map('map', {
center: [39.4699075, -0.382881],
zoom: 13,
layers: [poligon1]
});
var baseLayers = {
"Poligon1": poligon1,
"Poligon2": poligon2
};
var myStylePol1 = {
"weight": 2,
"opacity": 1,
"color": "#FF00CC",
"fillOpacity": 1
};
var myStylePol2 = {
"weight": 2,
"opacity": 1,
"color": "#FFFF80",
"fillOpacity": 1
};
var myStyle3 = {
"weight": 2,
"opacity": 1,
"color": "#000"
};
L.geoJson(poli1, {
style: myStylePol1
}).addTo(poligon1),
L.geoJson(poli2, {
style: myStylePol2
}).addTo(poligon2),
L.geoJson(polyl3, {
style: myStyle3
}).addTo(polyline1);
var overlays = {
"Polyline": polyline1
};
L.control.layers(baseLayers, overlays).addTo(map);