To have two maps work in synchronization, perform the following steps:

Although the CSS importantly presents the two maps side-by-side, we're going to skip over the details of the styling implementation in order to focus on the JavaScript. Please view the accompanying source code for a complete understanding behind the layout.

You can see that, with minimal effort, we can mirror the zoom and position of the map by simply sharing the view. We caught wind of how easy this was to do when we looked at the Buffering the layer data to improve the map navigation recipe in Chapter 2, Adding Raster Layers, where the solution also had two maps in synchronization.

OpenLayers 3 has externalized the view from any given map instance. This loose coupling design decision makes techniques like this possible. The OpenLayers view object is referenced by both map instances; so, when one map moves, the underlying object updates. This means that the new values also get presented within the other map instance.

As a learning exercise, we can demonstrate how to manually subscribe to the zoom, and position change events from one map instance and reflect the changes onto the other map instance. In this example, the views would not be shared:

map1.getView().on(['change:resolution', 'change:center'], syncMap);

function syncMap(event) {
  if (event.type === 'change:resolution') {
    map2.getView().setZoom(event.currentTarget.getZoom());
  } else {
    map2.getView().setCenter(event.currentTarget.getCenter());
  }
};

For the first map instance, we get hold of the view (getView), subscribe to the change:resolution and change:center events, and provide a handler function, namely syncMap. The change:center event is published when the map position has moved, and the change:resolution event is published when the map zoom level has changed.

When these events get published, our handler is called and passed an event object. This object contains the type of event (event.type). This is important as our handler captures multiple types of events. So, using this information, we're able to determine what action to perform based on the type of event.

The event object also contains a reference to the view that has been modified, namely event.currentTarget. We use this reference to the view to either retrieve the new zoom value (getZoom) or the new center coordinates (getCenter). We reflect these new values on the second map instance using either the setZoom or setCenter methods from the view object (of the second map instance).

This code has been simplified for brevity, as you'd also need to register for the same event types from the second map instance so that the first map instance can also be updated.

As well as listening to events, we can also cease listening to the notifications if we wish to do so.

The ol.Observable class has the un method, as well as the on method. The un method allows us to unsubscribe our listener functions from the published events that we previously subscribed to.

If we continue with our manual subscription example, to unsubscribe from future changes in the zoom level, we can perform the following:

map1.getView().un('change:resolution', syncMap);

Similar to the on method, the un method allows you to unregister multiple listeners, so we could have passed an array of event types like we did for on, had we wanted to do this.

Our syncMap event handler will no longer be passed the zoom level event type.

There's also a method of ol.Observable, which is called once, that provides the ability to subscribe to an event, listen to just one published event of that type, and then automatically unsubscribe from future notifications.

There may be circumstances where this could prove very useful.