3

I have this HTML checkbox:

<li>
 <input type="checkbox" id="bairroCENTRO-checkbox">
 <label for="bairroCENTRO-checkbox">Bairro</label>
</li>

And this JS code that, whenever the checkbox changes, it adds (using a betterWMS request) or removes the layer:

function bairroCheckbox(nomeBairro) {
    var nome_bairro = "bairro" + nomeBairro + "-checkbox";

    function requestBairro(bairro) {
        return new L.tileLayer.betterWms(url_geoserver, {
            layers: 'bdgeo:bairro',
            transparency: 'true',
            format: 'image/svg',
            opacity: 1,
            maxZoom: 20,
            attribution: "Geo Portal",
            CQL_FILTER: "nome in ('" + bairro + "')",
            zIndex: 2000
        });
    }

    document.getElementById(nome_bairro).addEventListener('change', function () {
        console.log('Checkbox changed');
        var camadabairro = requestBairro(nomeBairro);

        if (this.checked) {
            camadabairro.addTo(map);
            console.log('Layer added to the map');
        } else {
            map.removeLayer(camadabairro);
            console.log('Layer removed from the map');
        }
    });
}

bairroCheckbox(bairro);

However, it's not removing the layer. As you can see below, the checkbox is not checked, but the layer is still there.

Layer not being removed

I already tested removing using .removeFrom(map), but had no success, and the web page doesn't show any error.

Unfortunately, I can't provide the URL of the GeoServer. What is wrong?

1
  • Welcome to GIS SE. As a new user, please take the Tour. You might want to add debug statements to print the console log, then report the log contents.
    – Vince
    Nov 27, 2023 at 16:15

1 Answer 1

5

The problem in your code is that with var camadabairro = requestBairro(nomeBairro); you create a new layer every time check box is checked/unchecked.

Solution is to put camadabairro layer variable at the global level and then create layer only the first time that check box is checked.

Code could then look something like this:

var camadabairro = null;

function bairroCheckbox(nomeBairro) {
  var nome_bairro = "bairro" + nomeBairro + "-checkbox";

  function requestBairro(bairro) {
    return new L.tileLayer.betterWms(url_geoserver, {
      layers: 'bdgeo:bairro',
      transparency: 'true',
      format: 'image/svg',
      opacity: 1,
      maxZoom: 20,
      attribution: "Geo Portal",
      CQL_FILTER: "nome in ('" + bairro + "')",
      zIndex: 2000
    });
  }

  document.getElementById(nome_bairro).addEventListener('change', function () {
    if (!camadabairro) {
      camadabairro = requestBairro(nomeBairro);
    }

    if (this.checked) {
      camadabairro.addTo(map);
    } else {
      map.removeLayer(camadabairro);
    }
  });
}
1
  • IT WORKED!!! Thank you my friend :D thank you so much.
    – Mr. Vilela
    Nov 28, 2023 at 11:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.