I found this example for switching layers in OpenLayers 3.
function switchLayer()
{
var checkedLayer = $('#layerswitcher input[name=layer]:checked').val();
for (i = 0, ii = layers.length; i < ii; ++i) layers[i].setVisible(i==checkedLayer);
}
$(function() { switchLayer() } );
$("#layerswitcher input[name=layer]").change(function() { switchLayer() } );
var layers = [];
layers[0] = new ol.layer.Tile({ source: new ol.source.MapQuest({layer: 'sat'}) });
layers[1] = new ol.layer.Group({ layers: [ new ol.layer.Tile({ source: new ol.source.MapQuest({layer: 'sat'}) }), new ol.layer.Tile({ source: new ol.source.MapQuest({layer: 'hyb'}) }) ] });
layers[2] = new ol.layer.Tile({ source: new ol.source.MapQuest({layer: 'osm'}) });
layers[3] = new ol.layer.Tile({ source: new ol.source.OSM() });
var map = new ol.Map({
target: 'map',
controls: ol.control.defaults().extend([ new ol.control.ScaleLine({ units:'metric' }) ]),
layers: layers,
view: new ol.View({
center: ol.proj.transform([0, 10], 'EPSG:4326', 'EPSG:3857'),
zoom: 3
})
});
</script>
<div id="map"></div>
<div id="toolbox">
<ul id="layerswitcher">
<li><label><input type="radio" name="layer" value="0" checked> MapQuest Satellite</label></li>
<li><label><input type="radio" name="layer" value="1"> MapQuest Hybrid</label></li>
<li><label><input type="radio" name="layer" value="2"> MapQuest OSM</label></li>
<li><label><input type="radio" name="layer" value="3"> OSM</label></li>
</ul>
</div>
This is great for having multiple base layer maps… In addition to this, I also need the ability to add layers (addLayer) to this same map that allow me to add multiple feature/vector layers to these maps via checkbox section. Ideas?
I was thinking something like this:
$("#layerswitcher input[name=layer]").change(function() { addLayer() } );
var layers = [];
layers[4] = new ol.layer.Image({
source: new ol.source.ImageWMS({
url: 'http://demo.opengeo.org/geoserver/wms',
params: {'LAYERS': 'topp:states'},
serverType: 'geoserver'
})
})
];
layers[5] = new ol.layer.Image({
source: new ol.source.ImageWMS({
url: 'http://demo.opengeo.org/geoserver/wms',
params: {'LAYERS': 'countries'},
serverType: 'geoserver'
})
})
];
layers[6] = new ol.layer.Image({
source: new ol.source.ImageWMS({
url: 'http://demo.opengeo.org/geoserver/wms',
params: {'LAYERS': 'point_clouds'},
serverType: 'geoserver'
})
})
];
but it isn't working.
Best Answer
Are you trying to add/remove layers?
You can do something similar by showing/hidding the layers like this
Assuming that you have something like this (and several other layers):
Add checkboxes in the HTML:
Then, in your script section:
btw, you should add JQuery in order to make it work.