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 using some of the events that OpenLayers.Map instance provides to keep the maps synchronized at the same position and zoom level.

How to do it...

To have two maps side-by-side, perform the following steps:

1. Start creating an HTML with OpenLayers library dependency.

2. Now, add the HTML code required to have two maps side-by-side. Here we are using a table with a row and two columns:

   <table style="width: 100%; height: 95%;">
       <tr>
           <td>
               <div id="ch04_map_a" style="width: 100%; height: 100%;"></div>
           </td>
           <td>
               <div id="ch04_map_b" style="width: 100%; height: 100%;"></div>
           </td>
       </tr>
   </table>

3. Now, let's write the JavaScript code. Create the two maps and initialize with the desired image provider. Here we have used OpenStreetMap...