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 themap2
<div>
tag. Note that there is noview
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...