1

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.

2

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):

var layer1 = new ol.layer.Tile({
        source: new ol.source.Stamen({
            layer: 'toner'
        })
    });
var layer2 = new ol.layer.Tile({
        source: new ol.source.Stamen({
            layer: 'watercolor'
        })
    });
var viewObject = new ol.View({
        center: [0, 0],
        zoom: 2
    })

    var mapObject = new ol.Map({target: 'map'});

    mapObject.addLayer(raster);
    mapObject.addLayer(vectorLayer);
    mapObject.setView(viewObject);

Add checkboxes in the HTML:

<div>
    <label class="checkbox"><input type="checkbox" id="layer1" checked /> Layer 1</label>
    <label class="checkbox"><input type="checkbox" id="layer2" checked /> Layer 2</label>
</div>

Then, in your script section:

$('input[type=checkbox]').on('change', function () {
        var layer = {
            layer1: layer1,
            layer2: layer2
        }[$(this).attr('id')];
        layer.setVisible(!layer.getVisible());
    });

btw, you should add JQuery in order to make it work.

  • I do have JQuery. That code doesn't seem to be working. Perhaps it conflicts with the var layers = []; that I have for selectLayers? – Dean Mar 2 '15 at 21:24
0

Following Mauro Vieira Gonçalves answer I was able to implement a working example. I just did some edits to his original code.

var layer1 = new ol.layer.Tile({
        source: new ol.source.Stamen({
            layer: 'toner',
            visibility:false
        })
    });

var layer2 = new ol.layer.Tile({
        source: new ol.source.Stamen({
            layer: 'watercolor',
            visibility:false
        })
    });
var viewObject = new ol.View({
        center: [0, 0],
        zoom: 2
    })

var mapObject = new ol.Map({target: 'map'});

mapObject.addLayer(layer1);
mapObject.addLayer(layer1);

HTML checkboxes:

<div>
  <label class="checkbox-inline"><input type="checkbox" id="layer1">Layer 1</label>
  <label class="checkbox-inline"><input type="checkbox" id="layer2">Layer 2</label>
</div>

JQuery to set layer visibility on (true) off (false):

$('input[type=checkbox]').on('change', function () {
  var layer = {
    layer1: layer1,
    layer2: layer2
  }[$(this).attr('id')];
  layer.setVisible(!layer.getVisible());
});

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.