0

I am trying to add and remove layers2 layer when checkbox is changed. How can I do it with jquery?

Following my way i get: Uncaught ReferenceError: layers is not defined

     var wmsLayer2 = new ol.layer.Image({
          source: wmsSource2
        });

        $("#Buildings_chkbx").change(function(){
   var bool = !bool;
    if(bool)
          layers.push(wmsLayer2);
    else
    //remove layer...
        });


        var map = new ol.Map({
          target: 'map',
          layers: [baseLayer, wmsLayer],
          view: new ol.View({
            center: ol.proj.fromLonLat([33.33386, 35.14710]),
            zoom: 14
          })
        });
  • Yes, it's the same. Following this logic is giving me Uncaught ReferenceError: layers is not defined – csandreas1 Mar 21 at 10:57
  • well, what is layers? Where do you define it? – HimBromBeere Mar 21 at 10:58
3

Once you create your map, it is static, which means it will allways have the same layers. In particular only because you change the array, that was used to populate the map, does not mean the map itself will reflect those changes. Doing anything to layers (which I assume is defined somewhere above as an array or similar) won´t do anything to the map.

You can however call addLayer and removeLayer on the map to dynamically add remove a layer once the map was created.

var wmsLayer2 = new ol.layer.Image({
  source: wmsSource2
});

var map = new ol.Map({
  target: 'map',
  layers: [baseLayer, wmsLayer], // probably you want wmsLayer2 here, don´t you?
  view: new ol.View({
    center: ol.proj.fromLonLat([33.33386, 35.14710]),
    zoom: 14
  })
});

$("#Buildings_chkbx").change(function(){
  bool = !bool;
  if(bool)
    map.addLayer(wmsLayer2);
  else
    map.removeLayer(wmsLayer2);
});
  • It works on the first click but later on it gives me the following error message: Assertion failed. See https://openlayers.org/en/v5.3.0/doc/errors/#58 for details. – csandreas1 Mar 21 at 11:32
  • bool always returns true that's why. Also you need to do var bool = !bool; – csandreas1 Mar 21 at 11:34
  • @csandreas1 If you´d write var bool = !bool! I´d expect that to allways evaluate o true. You would need the variable defined outside the change-event-handler. – HimBromBeere Mar 21 at 11:53
  • use this instead: if($(this).is(':checked') ) //add layer else .... – csandreas1 Mar 21 at 11:55
  • @csandreas1 Good idea, however I would use if($(this).checked) to determine the check-state of your checkbox. – HimBromBeere Mar 21 at 11:58
0

Here is how i managed to make it work:

 var wmsLayer2 = new ol.layer.Image({
      source: wmsSource2
    });

    var map = new ol.Map({
      target: 'map',
      layers: [baseLayer, wmsLayer], 
      view: new ol.View({
        center: ol.proj.fromLonLat([33.33386, 35.14710]),
        zoom: 14
      })
    });

    $("#Buildings_chkbx").change(function (){
      if ($("#Buildings_chkbx").is(':checked'))
        map.addLayer(wmsLayer2);
      else
        map.removeLayer(wmsLayer2);
    });

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.