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 – linking two views

We'll wrap up this chapter with a final update to our example by adding a second map and linking the two maps together.

  1. First, remove the button that we used to move the map between the two <div> tags; it's the HTML that looks like this:
    <button onclick="changeTarget();">Change Target</button>
  2. Also, remove the associated function, changeTarget(), as we won't need it any more.
  3. Next, add some code to create a second instance of ol.Map and put it into the map2 <div> tag. Note that there is no view option!
    var map2 = new ol.Map({
     target: 'map2',
     layers: [layer]
    });
  4. Now, we'll bind the map's view property to the other map object:
    map2.bindTo('view', map);
  5. Reload the example in your browser and try it out. Zooming and panning ...

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