O'Reilly logo

OpenLayers Cookbook by Antonio Santiago Perez

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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.

Creating a side-by-side map comparator

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> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required