1

I am trying to set the visibility of a layer in Openlayers map according to a checkbox status with a class ".layercheck" and value is the name of the Openlayers layer.

So here is my HTML:

<input type="checkbox" class="layercheck" value="layer134431245">text

And here is JS:

   var layer134431245 = new OpenLayers.Layer.WMS(...); 
   $(".layercheck").on( "click", function() {
    var layer = $(this).val();
    if ($(this).is(":checked")) {
        $("#"+layer).setVisibility(true);
    } else {
        $("#"+layer).setVisibility(false); 
        }
   });

This function and HTML does completely nothing. It also does not give an error in the js console.

So how do I make this work, and switch the layer visibility with any of the checkboxes which have the class "layercheck" and value is the layer ID?

I also understand that the $("#"+layer) is not the layer, but a jQuery object which maybe does not have the properties setVisibility. So then how do I convert a value (string) into a Openlayers layer name?

2

I also understand that the $("#"+layer) is not the layer, but a jQuery object which maybe does not have the properties setVisibility

Well, it definitely doesn't have setVisibility because it's a DOM element (e.g. an HTML div), not an OpenLayers object. If you only have one OpenLayers layer you can simply use its reference:

if ($(this).is(":checked")) {
  layer134431245.setVisibility(true);
} else {
  layer134431245.setVisibility(false);
}

But to make your code more general you could use layer's name to link between your JS code and the checkboxes (changed names and added another layer to make it more illustrative):

HTML:

<input type="checkbox" class="layercheck" value="layer1">Layer A</input>
<input type="checkbox" class="layercheck" value="layer2">Layer B</input>

JS:

var layerA = new OpenLayers.Layer.WMS("layer1", { ... });
var layerB = new OpenLayers.Layer.WMS("layer2", { ... });

map.addLayers([layerA, layerB]);


$(".layercheck").on("click", function () {
  var layerToCheck = $(this).val();

  var layersWithThisName = map.getLayersByName(layerToCheck);
  for (var i = 0; i < layersWithThisName.length; i++) {
    var l = layersWithThisName[i];
    l.setVisibility($(this).is(":checked"));
  }
});
  • Thank you very much for the answer! Although I would probably simplify this with the following: $(".layercheck").on( "click", function() { var layerVis = map.getLayer($(this).val()); layerVis.setVisibility($(this).is(":checked")); }); – user3178519 Jan 10 '14 at 0:01
  • Correction. This works better: $("#maplayers").on( "click", "input[type=checkbox]", function() {var layerId = $(this).val(); var layerObj = map.getLayersByName(layerId); layerObj[0].setVisibility($(this).is(":checked"));}); – user3178519 Jan 10 '14 at 0:58
0

I have multiple layers in a layertree with checkboxes. I have given each layer a option that I call treeIndex. On initialization I build the layer tree and set the id of the checkbox to the treeIndex. That ties the checkbox and the layer to each other.

function build_layertree() {    // called once on initialization

  var tree = new Array();
  $.each(map.layers, function(index) {
    if (this.options.displayInLayerSwitcher) {
      var idx = this.treeIndex
      if (this.options.visibility) {
        tree[idx] = "<li><input type='checkbox' id='" + idx + "'    checked='checked'/><label  class='layer'>" + this.name + "</label></li>";
      }else{
        tree[idx] = "<li><input type='checkbox' id='" + idx + "'/><label class='layer'>" + this.name + "</label></li>";
        }
    }
  });

  #layertree is a <div> in the html
 //using the treeIndex order my layers as I want in the map layers, i am happy
 for (x=0; x<tree.length; ++x) {
    $("#layertree ul").append(tree[x]);
        }
  return;


}

After the layertree is built this calls my toggleLayer function when the checkbox is checked or unchecked

$('#layertree input').click(function () {toggleLayer(this.id);});

And here is toggleLayer

function toggleLayer(id) {
// called when a checkbox is checked/un checked
// id is the the id of the checkbox which is the layer treeIndex, use that to find the layer to toggle
// this is whrere the layer visibility is changed
$.each(map.layers, function(index) {
  if (this.options.displayInLayerSwitcher) {
    if (this.treeIndex == id) {
      this.setVisibility(!this.visibility);
    }
   }    
})
};

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.