OpenLayers adding/removing layer when checkbox is changed

Question

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

Answer 1

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

Answer 2

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