Needed to exclude the last two layers from the layerswitcher by adding a -2 to length like so:
for (i = 0, ii = layers.length-2; i < ii; ++i) layers[i].setVisible(i==checkedLayer);
This makes the layers visible on load, so set them to false like so:
layers[4] = new ol.source.TileWMS({
Visible: false,
source: new ol.source.TileWMS({
url: 'http://something/geoserver/wms',
params: {'LAYERS': 'country_borders'},
serverType: 'geoserver'
})
});
layers[5] = new ol.source.TileWMS({
Visible: false,
source: new ol.source.TileWMS({
url: 'http://something/geoserver/wms',
params: {'LAYERS': 'lakes'},
serverType: 'geoserver'
})
});
Totally agree with Revo. You can use ol.layer.Group for defining multiple base layers and / or overlays.
You can define Base layers like bl1, bl2, bl3 ... etc and put them together in a Group say baselayers in the following manner.
var baselayers = new ol.layer.Group({
'title': 'Base maps',
layers: [bl1, bl2, bl3]
});
Similarly you can define overlays say ol1, ol2, ol3 ... etc and put them into a Group say overlays as follows:
var overlays = new ol.layer.Group({
title: 'Overlays',
layers: [ol1, ol2, ol3]
});
Now you can define the map element and put these baselayers and overlays into it.
var map = new ol.Map({
layers: [baselayers, overlays],
target: "map",
view: new ol.View({
center: [20,20],
zoom: 4,
projection: 'EPSG:4326'
})
});
You need to add ol3-layerswitcher.js javascript in your head section of html page.
Best Answer
To display or hide from your own code use