I'm working on a webmapping project which use geoserver and OpenLayers 3 for the vizualisation. I'm stuck when I try to use "WMS GetFeatureInfo" and "LayerSwitcher". Both functions work individually but when I try to combine both it doesn't work anymore. I'm sure I'm on the right way but missing something...

For the GetFeatureInfo I use code like in this example: http://openlayers.org/en/v3.0.0/examples/getfeatureinfo-tile.html

and for the LayerSwitcher I have implemented this: https://github.com/walkermatt/ol3-layerswitcher

Do I may have to change something in the ol3-layerswitcher.js ?

<html lang="en">
    <link rel="stylesheet" href="web/css/ol.css" type="text/css">
      .map {
        height: 500px;
        width: 700px;
    <script src="web/build/ol.js"></script>
    <script src="web/resources/jquery.min.js" type="text/javascript"></script>
    <script src="web/resources/example-behaviour.js" type="text/javascript"></script>  
    <link rel="stylesheet" href="web/css/ol3-layerswitcher.css" />
    <script src="web/build/ol3-layerswitcher.js"></script>
      <div id="map" class="map"></div>

          var wmsSource = new ol.source.TileWMS({      
            url: 'http://xxx.xxx.xxx.xxx/geoserver/wms?',
            params: {
                'LAYERS': 'some:layer', 
                'TILED': true 
            title: 'something',
            crossOrigin: 'Anonymous'

          var wmsLayer = new ol.layer.Tile({
            extent: [1254218, 6707914, 1642967, 7072840],
            source: wmsSource

          var view = new ol.View    ({
            center: [1450000, 6809000],
            zoom: 12

          var map = new ol.Map  ({
            /*renderer: exampleNS.getRendererFromQueryString(),*/
            layers: [wmsLayer],
            target: 'map',
            view: view

          map.on('singleclick', function(evt) {
          document.getElementById('info').innerHTML = '';
          var viewResolution = /** @type {number} */ (view.getResolution());
          var url = wmsSource.getGetFeatureInfoUrl(
              evt.coordinate, viewResolution, 'EPSG:3857',
              {'INFO_FORMAT': 'text/html'});
          if (url) {
            document.getElementById('info').innerHTML =
                '<iframe seamless src="' + url + '"></iframe>';

        map.on('pointermove', function(evt) {
          if (evt.dragging) {
          var pixel = map.getEventPixel(evt.originalEvent);
          var hit = map.forEachLayerAtPixel(pixel, function(layer) {
            return true;
          map.getTargetElement().style.cursor = hit ? 'pointer' : '';

    var layerSwitcher = new ol.control.LayerSwitcher({
        tipLabel: 'Legende' // Optional label for button

    <div class="span4 offset4">
        <div id="info" class="alert alert-success">&nbsp;</div>


At the end I like to have a Layerswitcher which can group my layers and it should be possible to use "GetFeatureInfo" for every Layer.


I think this is a duplicate of a question asked on the OL3 Dev list which I provided some input on including linking to an example which demonstrates WMS layers with GetFeatureInfo and includes a LayerSwitcher: http://astuntechnology.github.io/osgis-ol3-leaflet/ol3/ol3-complete.html.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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