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


Geographical awareness is an exciting and reassuring concept in general for many people. If a friend were to ask you where you live, you'd normally have a genuine desire to describe where. Better yet, you could show them where you live on a (digital) map. Not only is this exciting, but it's also often extremely relevant and useful to include spatial data in products or services to reveal exactly where something is. We live in a time where information is in abundance, and a lot of this information is susceptible to being represented geographically.

The ubiquity of the Web and the improvement in various browsers' performance has made it possible for the Web to become a major player in the GIS field. It can rival desktop applications because of its capabilities. Browsers now allow us to show data visualizations to the masses, create online data editors, and so on.

Nowadays, OpenLayers isn't without its competing libraries. However, with the new API (v3), it's better focused for mobile, and it remains a comprehensive mapping library to create any kind of web mapping application. In addition to offering a great set of components, such as maps, layers, or controls, OpenLayers also offers access to a great number of data sources using many different data formats and implements many standards from the Open Geospatial Consortium (OGC) (

What this book covers

Chapter 1, Web Mapping Basics, demonstrates how creating a simple full-screen map is made easy with OpenLayers. This chapter will take a look at some basic map options and controls that help a user get around the map and view different locations. You will gain an understanding of the basic concepts behind a web-based map.

Chapter 2, Adding Raster Layers, talks about integrating with external services for data and how mapping imagery is an integral part of any mapping application on the Web. You will learn how to utilize tiles and WMS mapping services from a variety of external providers and customize the URL requests being made to these third parties. You will also discover how to customize animation effects for map interactions and modify default layer properties, which include simple performance techniques to preload data.

Chapter 3, Working with Vector Layers, teaches you how to integrate detailed GIS data from external sources into your own map layers to build useful sets of information for users. You will learn how to create custom layers with performance strategies for high volumes of data, how to integrate with sources in a variety of different formats, how to package layer data for export, how to interact with features on these layers, and also some basic feature manipulation.

Chapter 4, Working with Events, explains how you need to know how to handle triggered events like in any other JavaScript Web application. You will learn how to create event handlers for a variety of different events that are sourced from map navigation, feature modifications, keyboard interaction, and more.

Chapter 5, Adding Controls, teaches you how to create capabilities for users to get on with their intended tasks around a customized mapping application. You will learn new ways to interact with the map and manipulate features on layers. You will also learn how to customize the mapping experience for your target users by adding helpful map controls to achieve known tasks.

Chapter 6, Styling Features, will help you create a personalized mapping application that can be fully customized to meet users' expectations. You will learn how to set static layer-wide styling rules, as well as dynamic styling that is based on geometry types or feature attributes. You will take advantage of styling features differently during specific user actions, such as on selection, when dragged, or while being drawn.

Chapter 7, Beyond the Basics, shows you how to take the foundational skills that you learned in the previous chapters to the next level by taking on new and advanced functionality to create full-featured mapping applications. You will learn what the canvas renderer is capable of, how to build a custom version of the library, how to create features in freehand mode directly on the map, and how to work with other projections.

What you need for this book

The fact that OpenLayers is a JavaScript library, which must be integrated within HTML pages, implies that the user must be familiar with these technologies.

To successfully view all the recipes in this book in action, you need to have Node.js ( installed on your machine, as we use an HTTP server written in Node.js. Please follow the instructions inside the bundle for more details, where you'll be instructed to install the required Node.js packages (these are listed in the package.json file).

Once you've installed these dependencies and initiated the server, you can access a chapter topic from any browser at http://localhost:3000/ch03/ch03-gml-layer.

All library dependencies required by the code of various recipes, such as OpenLayers or jQuery, are included in the bundle itself.

Who this book is for

This book is ideal for GIS-related professionals who need to create web-mapping applications. From basic to advanced topics, the recipes of this book cover the most common issues a user may find during their career in a direct way.


In this book, you will find several headings that appear frequently (Getting ready, How to do it, How it works, There's more, and See also).

To give clear instructions on how to complete a recipe, we use these sections as follows:

Getting ready

This section tells you what to expect in the recipe, and describes how to set up any software or any preliminary settings required for the recipe.

How to do it…

This section contains the steps required to follow the recipe.

How it works…

This section usually consists of a detailed explanation of what happened in the previous section.

There's more…

This section consists of additional information about the recipe in order to make the reader more knowledgeable about the recipe.

See also

This section provides helpful links to other useful information for the recipe.


In this book, you will find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.

Code words in text are shown as follows: "The map.getLayers()method returns the collection of map layers." Folder names, filenames and pathnames are shown in this format: ch02/ch02-zoom-effect.

A block of code is set as follows:

var view = new ol.View({
   zoom: 7, center: [3826743, 4325724]

Any command-line input or output is written as follows:

cd ch07/ch07-custom-openlayers-build

New terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: "However, if they click on OK, the logic in the click event handler executes, adding the features to a new vector layer."


Warnings or important notes appear in a box like this.


Tips and tricks appear like this.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of.

To send us general feedback, simply e-mail , and mention the book's title in the subject of your message.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Downloading the example code

You can download the example code files for this book from your account at If you purchased this book elsewhere, you can visit and register to have the files e-mailed directly to you.

You can download the code files by following these steps:

  1. Log in or register to our website using your e-mail address and password.

  2. Hover the mouse pointer on the SUPPORT tab at the top.

  3. Click on Code Downloads & Errata.

  4. Enter the name of the book in the Search box.

  5. Select the book for which you're looking to download the code files.

  6. Choose from the drop-down menu where you purchased this book from.

  7. Click on Code Download.

Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:

  • WinRAR / 7-Zip for Windows

  • Zipeg / iZip / UnRarX for Mac

  • 7-Zip / PeaZip for Linux

Downloading the color images of this book

We also provide you with a PDF file that has color images of the screenshots/diagrams used in this book. The color images will help you better understand the changes in the output. You can download this file from


Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.

To view the previously submitted errata, go to and enter the name of the book in the search field. The required information will appear under the Errata section.


Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

Please contact us at with a link to the suspected pirated material.

We appreciate your help in protecting our authors and our ability to bring you valuable content.


If you have a problem with any aspect of this book, you can contact us at , and we will do our best to address the problem.