9

I'm trying to upgrade my Openlayers 2.12 map to Openlayers 3 to take advantage of the fantastic transition effects on transparent layers (Something OL2 and Leaflet can't do attractively). This and I don't want to lag behind upgrading my sites when OL3 is officially released. In my current site (OL2.12) I use check boxes in a simple HTML menu to toggle layer visibility. I push each layer to an array (I hope I'm right in thinking OL3 now automatically generates an array for the layers called 'layers') and each checkbox calls this function (checkboxes are given a value that is representative of their layers array number):

function layerswitch(evt){
    layers[evt.value].setVisibility(evt.checked);
}

In OL3 this no longer works, and I can't find any examples or documentation that details how to set layer visibility, any help would be greatly appreciated.

Thank you for your help.

5

you can find more information here under properties section.

visible     boolean | undefined     Visibility. Default is true (visible).

and live example in Layer group example.

ol3

i hope it helps you...

  • Unfortunately, those links are dead. – Auspex Jan 27 '17 at 12:34
8

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>
0

Below is a link to an add-on to OpenLayers 3, with an ol2 style layer switcher.

https://github.com/walkermatt/ol3-layerswitcher

protected by underdark Dec 11 '14 at 11:12

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

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