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.

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>
```
Also, remove the associated function, changeTarget(), as we won't need it any more.
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]
});
```
Now, we'll bind the map's view property to the other map object:
```
map2.bindTo('view', map);
```
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 first map.

What just happened?

With a single line of code, we bound the view property of the two maps and were able to produce a pretty interesting effect. By itself, this doesn't do much that could be considered useful but it is the basis for building some interesting functionalities such as creating an overview map or a highlight map that shows the same area as a main map but at a different level of detail.

One thing you probably noticed with the previous example is that changes from one map aren't animated in the other one. This behavior is to be expected. If you recall, we mentioned in the animation section that programmatic changes are applied instantly. Since we aren't adding animation effects with beforeRender(), the changes applied from one view to the other happen instantly and the result is sometimes quite jarring.

Have a go hero – an overview map

Use the knowledge you've gained in this chapter to adapt the previous example into something more useful. Try to make the second map respond to changes in the first map, but zoomed out three times. Remember that zooming out once is equivalent to doubling the zoom level. When the page loads, it should look like this:

When the first map is panned or zoomed, the second map should center on the same location and stay zoomed out in three levels. The second map should not have any controls or interactions—set both the controls and interactions option to new ol.Collection() to achieve this.

Tip

You will need a separate view object for the second map.

Pop quiz

Let's do a series of questions to see what you understood during the chapter:

Q1. I want to start my map looking at a specific location and level of detail. Which object is responsible for this?

the Map
the View

Q2. I want to take some action when the user pans the map. What event should I listen for?

moveend
zoomend

Q3. Which object files this event?

the View
the Map

Q4. I want to update a property called center of the view object when the center property on another object obj, changes. Which class provides the bindTo() method that I'll use?

ol.Map
ol.View
ol.Object

Table of Contents for OpenLayers 3 : Beginner's Guide

Time for action – linking two views

What just happened?

Have a go hero – an overview map

Tip

Pop quiz

Table of Contents for
OpenLayers 3 : Beginner's Guide