I need to set z-index to my geosjson layers created in leaflet that is bar chart and a choropleth. I tried doing mymap.addLayer(ChinaBarChart).setZIndex(2) but it doesnt work at all. Is there any other alternative ways to set the z-index of the layers? The setZIndex method was based on a leaflet method, if you do know of a way to making it work do let me know?
// HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Map Testing</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
<!-- Cdn for jquery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<!-- Cdn for Barcharts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-dvf/0.3.1/leaflet-dvf.markers.min.js"
integrity="sha256-d4jm/DxK0vxzigVql4lmwFikmXIlItcko9Me2md/mwI="
crossorigin="anonymous"></script>
<script src="leaflet-motion.js"></script>
<!-- Event handling of checking of checkboxes -->
<script>
$(document).ready(function(){
// Hides the piechart at the beginning
if($(".leaflet-piechart-icon")){
$(".leaflet-piechart-icon").hide();
}
// Hides the piechart legend at the beginning
if($(".legend")){
$(".legend").hide();
}
// Hides the stringlines at the beginning
if($(1 == 1)){
mymap.removeLayer(polyline);
}
// Hides the barchart at the beginning
if($(1 == 1)){
mymap.removeLayer(IndiaBarChart);
mymap.removeLayer(ChinaBarChart);
mymap.removeLayer(MalaysiaBarChart);
mymap.removeLayer(UaeBarChart);
mymap.removeLayer(TaiwanBarChart);
mymap.removeLayer(IndonesiaBarChart);
mymap.removeLayer(TurkeyBarChart);
}
// Hides the choropleth at the beginning
if($(1 == 1)){
mymap.removeLayer(ChinaArea);
}
// Shows or hides layers when checkbox is checked or unchecked
$('input[id="pie-charts"]').click(function(){
if($(this).prop("checked") == true){
$(".leaflet-piechart-icon").show(500);
$(".legend").show(500);
}
else if($(this).prop("checked") == false){
$(".leaflet-piechart-icon").hide(500);
$(".legend").hide(500);
}
});
$('input[id="bar-charts"]').click(function(){
if($(this).prop("checked") == true){
mymap.addLayer(IndiaBarChart);
mymap.addLayer(ChinaBarChart);
mymap.addLayer(MalaysiaBarChart);
mymap.addLayer(UaeBarChart);
mymap.addLayer(TaiwanBarChart);
mymap.addLayer(IndonesiaBarChart);
mymap.addLayer(TurkeyBarChart);
}
else if($(this).prop("checked") == false){
mymap.removeLayer(IndiaBarChart);
mymap.removeLayer(ChinaBarChart);
mymap.removeLayer(MalaysiaBarChart);
mymap.removeLayer(UaeBarChart);
mymap.removeLayer(TaiwanBarChart);
mymap.removeLayer(IndonesiaBarChart);
mymap.removeLayer(TurkeyBarChart);
}
});
$('input[id="choropleth"]').click(function(){
if($(this).prop("checked") == true){
mymap.addLayer(ChinaArea);
}
else if($(this).prop("checked") == false){
mymap.removeLayer(ChinaArea);
}
});
$('input[id="string-lines"]').click(function(){
if($(this).prop("checked") == true){
mymap.addLayer(polyline);
}
else if($(this).prop("checked") == false){
mymap.removeLayer(polyline);
}
});
});
</script>
<!-- Access style.css file in the same folder -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<nav class="navbar">
<div class="hamburger-menu">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</div>
<ul class="nav-list">
<li class="nav-item">
<a href="#" class="navlink">
<label>
<input type="checkbox" id="pie-charts"> Pie Charts
</label>
</a>
</li>
<li class="nav-item">
<a href="#" class="navlink">
<label>
<input type="checkbox" id="bar-charts"> Bar Charts
</label>
</a>
</li>
<li class="nav-item">
<a href="#" class="navlink">
<label>
<input type="checkbox" id="choropleth"> Choropleth
</label>
</a>
</li>
<li class="nav-item">
<a href="#" class="navlink">
<label>
<input type="checkbox" id="string-lines"> String Lines
</label>
</a>
</li>
</ul>
</nav>
</div>
<div id="map">
<script src="myscripts.js"></script>
<script src="leaflet-choropleth.js"></script>
</div>
<script src="http://sashakavun.github.io/leaflet-canvasicon/leaflet-canvasicon.js"></script>
<script type="text/javascript" src="leaflet-piechart.js"></script>
<script src="leaflet-barchart.js"></script>
</body>
</html>
