1

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?

  • 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. – TomazicM Oct 26 at 19:34
  • 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! – Aneeqa Oct 26 at 20:15
  • Edit your question and add the code of what you have tried and it's still not working. – TomazicM Oct 26 at 20:53
  • I updated the code. It is still not working and I am not sure why... – Aneeqa Oct 27 at 7:02
0

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]);
      }
    }
  }
}
  • Thank you so much. This works. I wasn't aware of the .hasLAyer method. – Aneeqa Oct 29 at 11:32
  • If answer solved your problem, it would seem appropriate to accept it. – TomazicM Oct 29 at 12:04
  • Sorry I didn't know about the acceptance. I thought I had liked it though. Thank you so much for your help. – Aneeqa Oct 30 at 16:35
0

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);
                    };
                })

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.