Javascript + OpenLayers 3: Multiple layers selection

Question

I am trying to create a simple webpage about a WMS map with OpenLayers 3. I load some layers and I want for the user to be able to select one or more layers as visible on the map. My jsfiddle is available here https://jsfiddle.net/liostse/9dfccgxq/3/

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta charset="utf-8"/>
    <link type="text/css" rel="stylesheet" href="css/green.css">
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.5/ol.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="js/tether.min.js" type="text/javascript"></script>
    <script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.5/ol.js" type="text/javascript"></script>   
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script type="text/javascript"> 
        visible1 = true;
        visible2 = false;
        visible3 = false;
        function myChecked() {
            var a =5;
            if (document.getElementById("layer1").checked == true) {
                visible1 = true
            } else {visible1 = false}; 
            if (document.getElementById("layer2").checked == true) {
                visible2 = true
            } else {visible2 = false};
            if (document.getElementById("layer3").checked == true) {
                visible3 = true
            } else {visible3 = false}; 
        };
    </script>
</head>

<body>
<div class="container">
    <div id='webmap' class="tabcontent" style="position:relative;">
        <div id="layers" style="width:70%;height:600px;display:inline-block;" >
            <script>
                function wms(){
                    var baselayer = new ol.layer.Tile({
                      source: new ol.source.OSM()
                    });
                    var layer1 = new ol.layer.Tile({
                        source: new ol.source.TileWMS({
                            url: 'http://88.99.13.199:8080/geoserver/agristats/wms',
                            params: {'LAYERS': 'agriculture:reforestable','STYLES':'reforestable','TILED': true},
                            serverType: 'geoserver'
                        }), visible: visible1
                    });
                    var layer2 = new ol.layer.Tile({
                        source: new ol.source.TileWMS({
                            url: 'http://88.99.13.199:8080/geoserver/agristats/wms',
                            params: {'LAYERS': 'agriculture:corine_coniferous','STYLES':'coniferous','TILED': true},
                            serverType: 'geoserver'
                        }), visible: visible2
                    });
                    var layer3 = new ol.layer.Tile({
                        source: new ol.source.TileWMS({
                            url: 'http://88.99.13.199:8080/geoserver/agristats/wms',
                            params: {'LAYERS': 'agriculture:corine_fruitsberries','STYLES':'fruitsberries','TILED': true},
                            serverType: 'geoserver'
                        }), visible: visible3
                    });
                    var map = new ol.Map({
                        layers: [baselayer, layer1,layer2,layer3],
                        controls: ol.control.defaults().extend([
                            new ol.control.ScaleLine({units: 'metric'}), 
                            new ol.control.FullScreen()
                        ]),
                        target: 'layers',
                        view: new ol.View({
                          center: [2687148, 4556999],
                          zoom: 6.5
                        })
                    });
                };
                wms();
            </script>
        </div>
        <div style="display:inline-block;position:absolute;top:0px;">
            <h5 style="height:40px;position:relative;">Περιοχές παρέμβασης</h5>
            <label style="height:20px;display:block;position:relative;font-size:12px;" class="checkbox"><input onclick="myChecked()" type="checkbox" id="layer1" checked />Reforestable</label>
            <label style="height:20px;display:block;position:relative;font-size:12px;" class="checkbox"><input onclick="myChecked()" type="checkbox" id="layer2"/>Coniferous</label>
            <label style="height:20px;display:block;position:relative;font-size:12px;" class="checkbox"><input onclick="myChecked()" type="checkbox" id="layer3"/>Fruits and berries</label>
        </div>
    </div>
    <div style="height:50px;"></div>
</div>
</body>
</html>

I have searched a lot about this but haven't succeeded in making it work. One easy approach is in the code above but selection does not work. Any help will be much appreciated.

UPDATE-------------------- SOLUTION

$('body').on('change','#layer1',function(){
                    var isChecked = $(this).is(':checked');
                    if (isChecked) {map.addLayer(layer1);} 
                    else {map.removeLayer(layer1);};
                    map.renderSync(3000);
                });

I solved it as a combination of Svinjica's answer, the fact that I had to redraw WMS map and editing the jquery reference through 'body' and not straight to the element. Sachi Tekina's answer is alos working but Svinjica's answer is lighter and faster. In my edit I give the solution. — lios, May 12 '18 at 05:46

score 1 · Accepted Answer · answered May 08 '18 at 17:14

Recently I provided simple solution regarding adding/removing layers

Something like this:

$('#customCheck1').on('change', function() {
  var isChecked = $(this).is(':checked');
  if (isChecked) {
    map.addLayer(osmBasic)
  } else {
    map.removeLayer(osmBasic);
  }
})

Here is jsfiddle for further analysis.

score 1 · Answer 2 · answered May 09 '18 at 15:38

You can actually set the visibility of a layer by using setVisible. Without touching much of your code, you do it this way:

var visible1 = true;
var visible2 = false;
var visible3 = false;

function myChecked() {
  //var a = 5;
  if (document.getElementById("layer1").checked == true) {
    visible1 = true
    layer1.setVisible(visible1)
  } else {
    visible1 = false
    layer1.setVisible(visible1)
  }
  if (document.getElementById("layer2").checked == true) {
  console.log('2')
    visible2 = true
    layer2.setVisible(visible2)

  } else {
    visible2 = false
    layer2.setVisible(visible2)
  }
  if (document.getElementById("layer3").checked == true) {
    visible3 = true;
    layer3.setVisible(visible3)
  } else {
    visible3 = false;
    layer3.setVisible(visible3)
  }
}

Check this Fiddle.

Javascript + OpenLayers 3: Multiple layers selection

2 Answers2