OpenLayers - Bind checkbox/layer visibility

by Jonatas Walker

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ol3/3.9.0/ol.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/ol3/3.9.0/ol.min.js"></script>
<div id="map"></div>
<ul class="list">
    <li>
      <label for="cat1">Category 1</label>
      <input type="checkbox" id="cat1" value="cat1" onclick="toggleVisibility(this)" checked>
    </li>
    <li>
      <label for="cat2">Category 2</label>
      <input type="checkbox" id="cat2" value="cat2" onclick="toggleVisibility(this)" checked>
    </li>
</ul>

CSS

html, body, #map { width:100%; height:100%; margin:0; }
#map {
    position: absolute;
    z-index: 5;
}
.list{
    position: absolute;
    z-index: 10;
    left: 50%;
    transform: translate(-50%, 5px);
    background-color: rgba(238,238,238,.6);
    padding: 10px;
    color: #222;
    width: 350px;
    text-align: center;
}
.list li{
    display: inline-block;
    padding: 5px 10px;
}
.list label:hover{
    cursor: pointer;
    text-decoration: underline;
}

JavaScript

var layer1 = new ol.layer.Vector({
	name: 'cat1',
  source: new ol.source.Vector({
  	format: new ol.format.GeoJSON(),
    url: '//data.mapeando.net/tmp/points.json'
  })
});

var layer2 = new ol.layer.Vector({
	name: 'cat2',
  source: new ol.source.Vector({
  	format: new ol.format.GeoJSON(),
    url: '//data.mapeando.net/tmp/points2.json'
  })
});

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.XYZ({
        url: 'http://{1-4}.basemaps' + 
        '.cartocdn.com/dark_nolabels/{z}/{x}/{y}.png'
      })
    }),
    layer1, layer2
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([21.54967, 38.70250]),
    zoom: 5
  })
});

function getLayerByName(value) {
  var layer;
  var found = map.getLayers().getArray().some(function(each){
    //discard layers other than ol.layer.Vector
    if(each instanceof ol.layer.Vector) {
    	layer = each.get('name') === value ? each: undefined;
    }
    if(layer) return true;
    return false;
  });
  return layer ? layer : false;
}

function toggleVisibility(element) {
  var layer = getLayerByName(element.value);
  if (element.checked) {
  	layer.setVisible(true);
  } else {
  	layer.setVisible(false);
  }
}