I have configured a WMS layer for OpenLayers like:

var wmsSource = new ol.source.ImageWMS({
  url: 'http://<servername>/geoserver/<namespace>/wms',
  params: {'LAYERS': [ 'Layer 001', 'Layer 002', ... 'Layer xxx' ]}, 
  ratio: 1.2,
  serverType: 'geoserver'

var wms = new ol.layer.Image({
  title: 'Basemap',
  type: 'base',
  source: wmsSource

The layer-switch I use is this one: https://github.com/walkermatt/ol3-layerswitcher

It is configured like

var layerSwitcher = new ol.control.LayerSwitcher({
    tipLabel: 'Legend'

Now the layer-switcher only shows one "Basemap" entry. But I want to have the WMS-Layers listed - best in a group "Basemap".

Any ideas how to do this?

3 Answers 3


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.


The easiest and fastest way would be to create an own source for each layer and add them to the same ol.layer.Group.

Or you write a function that iterates through an array with all layernames in it and adds all these layers to said group object.

  • If I add each layer separately I assume each layer will be transfered to the clients. We used the combined version to get only one image transfered through the network. Jul 26, 2017 at 6:22
  • Well each layer appears in the layer switcher button and can then be activated seperately (and transferred seperately)
    – Revo
    Jul 26, 2017 at 9:55

ol3-layerswitcher uses title title: 'Basemap' from the layer definition for generating the layer list in the switcher. Since you have defined all the layers under one definition it take the title of basemaps.

If you are trying to get the names of all the layers in the layerswitcher you need to define each layer separately and group them as Revo and GeoSpatialEarth.in suggested.

If I add each layer separately I assume each layer will be transfered >>to the clients. We used the combined version to get only one image >>transfered through the network.

If you want the layers combined you can create a layer group in the geoserver and access it using the WMS the same way you are doing now.

var wmsSource = new ol.source.ImageWMS({
  url: 'http://<servername>/geoserver/<namespace>/wms',
  params: {'LAYERS': 'LAYERGROUP'}, 
  ratio: 1.2,
  serverType: 'geoserver'

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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