[GIS] OpenLayers Hide/Show Layers from external checkboxes

openlayers

I'm using OpenLayers with mapserver to display a lot of raster images and queryable wms layers. Everything works fine, the layers can be turned on/off in the OpenLayers layer switcher…But now I want to turn on/off the layers by external checkboxes and I don't know how to do this.

I'm little bit new to Javascript-the only thing I know is that I have to pass the checkbox layer value to an OpenLayers function. Till now I tried to call a function with an onClick event

<input type="checkbox" name="ckeckbox_layer1" onClick="layervisibility(this.checked);">

But I don't know how the function 'layervisibility' has to look like so that my layers that are actually placed in the openlayers init() function turn on/off correctly when I check/uncheck the checkboxes.

Best Answer

OpenLayers 2:

layer.setVisibility(true)

OpenLayers >= 3:

layer.setVisible(true)

Lots of examples here: http://openlayers.org/en/latest/examples/

Specific example: https://openlayers.org/en/latest/examples/layer-group.html

Related Solutions

OpenLayers 3 – Setting Layer Visibility

Aragon, your answer pointed me in the right direction. Below is my final unclean code for adding layers to an array and then controling them.

In a javascript file I initialized the map and used a function to toggle visibility as follows:

//Layer array
var layersArray = [];

//Map view (Initial location)
var view = new ol.View2D({
// the view's initial state
center: ol.proj.transform([*Lat*,*Long*], 'EPSG:4326', 'EPSG:3857'),
zoom: 12
});

/*  Map Initialization  */
function initializeMap(){

var esribase = new ol.layer.Tile({
preload: Infinity,
  source: new ol.source.XYZ({
    url: 'http://server.arcgisonline.com/ArcGIS/rest/services/' +
        'World_Topo_Map/MapServer/tile/{z}/{y}/{x}'
  })
});

var poly1 = new ol.layer.Tile({
source: new ol.source.TileWMS({
  url: 'http://localhost:8080/geoserver/wms',
  params: {'LAYERS': '*Workspace*:*Layer*', 'TILED': true}
 })
}); 
poly1.setVisible(false);

var poly2 = new ol.layer.Tile({
source: new ol.source.TileWMS({
  url: 'http://localhost:8080/geoserver/wms',
  params: {'LAYERS': '*Workspace*:*Layer*', 'TILED': true}
 })
}); 
poly2.setVisible(false);

var poly3 = new ol.layer.Tile({
source: new ol.source.TileWMS({
  url: 'http://localhost:8080/geoserver/wms',
  params: {'LAYERS': '*Workspace*:*Layer*', 'TILED': true}
 })
}); 
poly3.setVisible(false);

layersArray.push(esribase); //0
layersArray.push(poly1); //1
layersArray.push(poly2); //2
layersArray.push(poly3);//3

var map = new ol.Map({
controls: ol.control.defaults().extend([
new ol.control.ScaleLine({
  units: ol.control.ScaleLineUnits.METRIC
})
]),
renderer: ol.RendererHint.CANVAS,
target: 'map',
layers: layersArray,

view:view
});
}

// Layer visibility function
function layerswitch(evt){
layersArray[evt.value].setVisible(evt.checked);
}

In the HTML I used simple checkboxes (example of poly1 toggle):

<input  style='cursor:pointer' type="checkbox" value="1" onclick="javascript:layerswitch(this)" class="Cpoly1" name="poly1check" id="poly1check"/><label id="poly1checkLabel" for="poly1check">Polygon 1 Layer Switcher</label>

OpenLayers – Fixing Missing LayerSwitcher in OpenLayers3

This question was asked on Twitter recently https://twitter.com/RemiBovard/status/525028570780139520

If you follow the answer, at the moment, integrating layer switcher in the core is not the priority but there is an available component at https://github.com/walkermatt/ol3-layerswitcher

You can also take a look on "The book of OpenLayers" samples (by @acanimal) for some custom legend implementations.