Unable to remove WMS layer from Leaflet map

Question

I am using Leaflet. In my application, I am adding layers from GeoServer, through checkboxes. The user selects a checkbox, the map is displayed. Can be seen in the image below. enter image description here

Now, when the checkbox is not checked, the layer should be removed, but it's not.

This is the list of maps

 var map_layers = [ 'Coastal_Ecosystem:Indus_1990_Cover', //landcover
 'Coastal_Ecosystem:Indus_1995_Cover',
 'Coastal_Ecosystem:Indus_2000_Cover',
 'Coastal_Ecosystem:Indus_2005_Cover',
 'Coastal_Ecosystem:Indus_2010_Cover',
 'Coastal_Ecosystem:Indus_2015_Cover',
 'Coastal_Ecosystem:Indus_1990-1995_Change', //landcover change
 'Coastal_Ecosystem:Indus_1995-2000_Change', 
 'Coastal_Ecosystem:Indus_2000-2005_Change', 
 'Coastal_Ecosystem:Indus_2005-2010_Change', 
 'Coastal_Ecosystem:Indus_2010-2015_Change', 
 'Coastal_Ecosystem:Indus_1990_Density', //density
 'Coastal_Ecosystem:Indus_1995_Density', 
 'Coastal_Ecosystem:Indus_2000_Density', 
 'Coastal_Ecosystem:Indus_2005_Density', 
 'Coastal_Ecosystem:Indus_2010_Density', 
 'Coastal_Ecosystem:Indus_2015_Density', 
 ];
 var indus = new Array();

This is the onchange function:

function onSelect(){
 //calling for the checkboxes
 var checks = document.querySelectorAll("[class = years]");
 //loading data with checkbox selection
 for (var i = 0; i < checks.length; i++) { 
 //loading and adding map layers
 if (checks[i].checked){ 
 indus [i] = L.tileLayer.wms('http://localhost:8080/geoserver/Coastal_Ecosystem/wms', {
 layers: map_layers[i],
 format: 'image/png',
 transparent: true, 
 attribution: ""
 }).addTo(map); 
 }
 else { 
 map.removeLayer(indus[i]);
 } 
}

}

Why removeLayer is not working?

• TomazicM: You have layer instance indus defined inside onSelect function. Once function is executed this variable is gone and you cannot use it later to remove layer. If only one layer can be selected at time, just define var indus; outside function. If multiple layers can be selected at the same time, then indus should be an array, on element for each layer.
• Aneeqa: Thank you for your reply. But map.removeLayer(indus); is still not working. Neither is map.removeLayer(indus[i]); unless I need to remove the layers outside the function or the for loop!
• TomazicM: Edit your question and add the code of what you have tried and it's still not working.
• Aneeqa: I updated the code. It is still not working and I am not sure why...

Answer 1

Problem with your code is that on each check/uncheck, when you are looping through checkbox elements, you each time create new layers for checked boxes and try to remove unchecked ones even if they don't exist yet.

If checkbox is checked for a layer, you have to check if this layer is already created and if this layer is already added to the map. Also if checkbox is not checked you have to check if this layer is already created and if this layer is already added to the map.

Code should then look something like this:

function onSelect(){
 var checks = document.querySelectorAll("[class = years]");
 for (var i = 0; i < checks.length; i++) { 
 if (checks[i].checked) {
 if (typeof (indus[i]) === 'undefined') {
 indus[i] = L.tileLayer.wms('http://localhost:8080/geoserver/Coastal_Ecosystem/wms', {
 layers: map_layers[i],
 format: 'image/png',
 transparent: true, 
 attribution: ""
 }).addTo(map); 
 }
 else if (! map.hasLayer(indus[i])) {
 indus[i].addTo(map);
 }
 }
 else if (typeof (indus[i]) !== 'undefined') {
 if (map.hasLayer(indus[i])) {
 map.removeLayer(indus[i]);
 }
 }
 }
}

• Aneeqa: Thank you so much. This works. I wasn't aware of the .hasLAyer method.
• TomazicM: If answer solved your problem, it would seem appropriate to accept it.
• Aneeqa: Sorry I didn't know about the acceptance. I thought I had liked it though. Thank you so much for your help.

Answer 2

Here is an example I did that may help : http://www.gistechsolutions.com/leaflet/DEMO/sports/sports.html

In my code below my checkbox called "bball" adds and removes the layer as checked.

// Handles the check boxes being turned on/off
document.querySelector("input[name=bball]").addEventListener('change', function() {
 if(this.checked) map.addLayer(baseball)
 else map.removeLayer(baseball)
 if (clickmark != undefined) { //i.e. if it exists...
 //function all to remove the yellow select circle, could call function to clear table from here.
 map.removeLayer(clickmark);
 };
 })