Book Image

OpenLayers 3: Beginner's Guide

By : Thomas Gratier, Paul Spencer, Erik Hazzard
Book Image

OpenLayers 3: Beginner's Guide

By: Thomas Gratier, Paul Spencer, Erik Hazzard

Overview of this book

<p>This book is a practical, hands-on guide that provides you with all the information you need to get started with mapping using the OpenLayers 3 library.</p> <p>The book starts off by showing you how to create a simple map. Through the course of the book, we will review each component needed to make a map in OpenLayers 3, and you will end up with a full-fledged web map application. You will learn the key role of each OpenLayers 3 component in making a map, and important mapping principles such as projections and layers. You will create your own data files and connect to backend servers for mapping. A key part of this book will also be dedicated to building a mapping application for mobile devices and its specific components.</p>
Table of Contents (22 chapters)
OpenLayers 3 Beginner's Guide
Credits
About the Authors
About the Reviewers
www.PacktPub.com
Preface
Index

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 in the first map automatically updates the view of the second map. The animation buttons also work on the first map and the second map's view gets updated. Panning and zooming in the second map also works and updates the...