Creating a side-by-side map comparator

We are going to create a map comparator. The goal is to have two maps side-by-side from different providers and synchronize the same position and zoom level. The source code can be found in ch04/ch04-map-comparator. Here's a screenshot of our two synchronized maps, side-by-side:

How to do it…

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

1. Create an HTML file with OpenLayers library dependencies. In particular, the markup for the two maps and separator should look like the following:

   <div id="js-map1"></div>
   <hr/>
   <div id="js-map2"></div>

2. Create a custom JavaScript file and set up the shared view:

   var view = new ol.View({
     zoom: 5,
     center: [1252000, 7240000]
   });

3. Instantiate the first map with the shared view, as follows:

   var map1 = new ol.Map({
     view: view,
     target: 'js-map1',
     layers: [
       new ol.layer.Tile({source: new ol.source.OSM()})
     ]
   });

4. Finish off by instantiating the second map with the same...