O'Reilly logo

OpenLayers 3 : Beginner's Guide by Erik Hazzard, Paul Spencer, Thomas Gratier

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Time for action – using bindTo

The bindTo method is extremely powerful and makes many seemingly advanced tasks quite easy to accomplish. Let's set up an HTML checkbox element that we can use to control the visibility of a map layer.

  1. Using the same sample file we started earlier in the chapter, add the following on a new line between <div id="map"> and the <script> tag:
    <input type="checkbox" id="visible" checked> Toggle Layer Visibility

    This will add a new HTML element, a checkbox, to our web page and we will use this to turn our layer on and off.

  2. Next, add the following two lines of code at the end of the script tag:
    var visible = new ol.dom.Input(document.getElementById('visible'));
    visible.bindTo('checked', layer, 'visible');

    This code creates a ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required