Book Image

OpenLayers Cookbook

Book Image

OpenLayers Cookbook

Overview of this book

Data visualization and analysis has become an important task for many companies. Understanding the basic concepts of GIS and knowing how to visualize data on a map is a required ability for many professionals today. OpenLayers is a JavaScript library to load, display, and render maps from multiple sources on web pages."OpenLayers Cookbook" teaches how to work with OpenLayers, one of the most important and complete open source JavaScript libraries.Through an extensive set of recipes, this book shows how to work with the main concepts required to build a GIS web applicationñ maps, raster and vector layers, styling, theming, and so on."OpenLayers Cookbook" includes problem solving and how-to recipes for the most common and important tasks. A wide range of topics are covered.The range of recipes includes: creating basic maps, working with raster and vector layers, understanding events and working with main controls, reading features from different data sources, styling features, and understanding the underlying architecture."OpenLayers Cookbook" describes solutions and optimizations to problems commonly found.
Table of Contents (15 chapters)
OpenLayers Cookbook
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Wrapping the date line options


There might be situations where you do not want your map ends at -180 or +180 longitude degrees as you are working in that area and need a continuous map. For example, imagine a map where on the left you can see the end of Russia and at the right Alaska, as shown in the following screenshot:

This property is a common attribute from base class OpenLayers.Layer and is called the wrapDateLine.

How to do it...

To wrap the date line options, perform the following steps:

  1. Create an HTML file and add the OpenLayers dependency.

  2. In the beginning, we have put a checkbox to activate/deactivate the wrap data line feature, as follows:

    Wrap date line: <input dojoType="dijit.form.CheckBox" checked onChange="wrapDateLine" /> <br/>

    Note

    Do not worry about the dojoType="dijit.form.CheckBox" attribute, it is because the Dojo Toolkit (http://dojotoolkit.org) is used in the sample.

    Think of it as a normal HTML input element.

  3. Next, we have added the DOM element used to render the...