Book Image

OpenLayers 3.x Cookbook - Second Edition

By : Peter J. Langley, Antonio Santiago Perez
Book Image

OpenLayers 3.x Cookbook - Second Edition

By: Peter J. Langley, Antonio Santiago Perez

Overview of this book

OpenLayers 3 is one of the most important and complete open source JavaScript mapping libraries today. Throughout this book, you will go through recipes that expose various features of OpenLayers 3, allowing you to gain an insight into building complex GIS web applications. You will get to grips with the basics of creating a map with common functionality and quickly advance to more complicated solutions that address modern challenges. You will explore into maps, raster and vector layers, and styling in depth. This book also includes problem solving and how-to recipes for the most common and important tasks.
Table of Contents (14 chapters)
OpenLayers 3.x Cookbook Second Edition
About the Authors
About the Reviewer

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