OpenLayers 3: Beginner's Guide

More Information
  • Build a complete, real-world OpenLayers application optimized for production use
  • Work with different raster data sources to create a base map
  • Overlay vector data sources and work with vector features directly
  • Customize the appearance of vector layers
  • Understand the concept of map projections and how to use them
  • Manage and work with interactions such as click and touch
  • Work with controls to enhance the user experience
  • Target mobile platforms and explore challenges presented by mobile development

This book is a practical, hands-on guide that provides you with all the information you need to get started with mapping using the OpenLayers 3 library.

The book starts off by showing you how to create a simple map. Through the course of the book, we will review each component needed to make a map in OpenLayers 3, and you will end up with a full-fledged web map application. You will learn the key role of each OpenLayers 3 component in making a map, and important mapping principles such as projections and layers. You will create your own data files and connect to backend servers for mapping. A key part of this book will also be dedicated to building a mapping application for mobile devices and its specific components.

  • Create and display maps online with the latest HTML5 features available, using the OpenLayers 3 library
  • Learn how to interact with the map and learn best practices to improve the loading time for a map
  • A practical beginner's guide, which also serves as a quick reference with useful screenshots and detailed code explanations
Page Count 512
Course Length 15 hours 21 minutes
ISBN 9781782162360
Date Of Publication 28 Jan 2015
OpenLayers' key components
Time for action – creating a map
Time for action – using the JavaScript console
Time for action – overlaying information
OpenLayers' super classes
Key-Value Observing with the Object class
Time for action – using bindTo
Working with collections
Understanding the Map class
Time for action – creating a map
Map renderers
Time for action – rendering a masterpiece
Map properties
Time for action – target practice
Map methods
Time for action – creating animated maps
Time for action – linking two views
Introducing layers
Layers in OpenLayers 3
Common operations on layers
Time for action – changing layer properties
Tiled versus untiled layers
Types of raster sources
Tiled images' layers and their sources
Time for action – creating a Stamen layer
Time for action – creating a Bing Maps layer
Time for action – creating tiles and adding Zoomify layer
Image layers and their sources
Using Spherical Mercator raster data with other layers
Time For action – playing with various sources and layers together
Time For action – applying Zoomify sample knowledge to a single raw image
Understanding the vector layer
Time for action – creating a vector layer
How the vector layer works
The vector layer class
Vector sources
Time for action – using the cluster source
Time for action – creating a loader function
Time for action – working with the TileVector source
Time for action – a drag and drop viewer for vector files
Features and geometries
Time for action – geometries in action
Time for action – interacting with features
What are vector styles?
Time for action – basic styling
The style class
Time for action – using the icon style
Have a go hero – using the circle style
Multiple styles
Time for action – using multiple styles
Style functions
Time for action – using properties to style features
Interactive styles
Time for action – creating interactive styles
Map projections
Time for action – using different projection codes
Time for action – determining coordinates
OpenLayers projection class
Transforming coordinates
Time for action – coordinate transforms
Time for action – setting up
Time for action – reprojecting extent
Time for action – using custom projection with WMS sources
Time for action – reprojecting geometries in vector layers
Selecting features with OpenLayers 3
Time for action – converting your local or national authorities data into web mapping formats
Time for action – testing the use cases for ol.interaction.Select
Time for action – more options with ol.interaction.Select
Introducing methods to get information from your map
Time for action – understanding the forEachFeatureAtPixel method
Time for action – understanding the getGetFeatureInfoUrl method
Adding a pop-up on your map
Time for action – introducing ol.Overlay with a static example
Time for action – using ol.Overlay dynamically with layers information
Time for action – using ol.interaction.Draw to share new information on the Web
Time for action – using ol.interaction.Modify to update drawing
Understanding interactions and their architecture
Time for action – configuring default interactions
Discovering the other interactions
Time for action – using ol.interaction.DragRotateAndZoom
Time for action – making rectangle export to GeoJSON with ol.interaction.DragBox
Introducing controls
Adding controls to your map
Time for action – starting with the default controls
Controls overview
Time for action – changing the default attribution styles
Time for action – finding your mouse position
Time for action – configuring ZoomToExtent and manipulate controls
Creating a custom control
Time for action – extending ol.control.Control to make your own control
Touch support in OpenLayers
Using a web server
Time for action – go mobile!
The Geolocation class
Time for action – location, location, location
The DeviceOrientation class
Time for action – a sense of direction
Debugging mobile web applications
Debugging on iOS
Debugging on Android
Going offline
Time for action – MANIFEST destiny
Going native with web applications
Time for action – track me
Development strategies
Using geospatial data from Flickr
Time for action – getting Flickr data
A simple application
Time for Action – adding data to your map
Styling the features
Time for action – creating a style function
Creating a thumbnail style
Time for action – switching to JSON data
Time for action – creating a thumbnail style
Turning our example into an application
Time for action – adding the select interaction
Time for action – handling selection events
Time for action – displaying photo information
Using real time data
Time for action – getting dynamic data
Wrapping up the application
Time for action – adding dynamic tags to your map
Deploying an application
Creating custom builds
Creating a combined build
Time for action – creating a combined build
Creating a separate build
Time for action – creating a separate build


Erik Hazzard

Erik Hazzard is the author of OpenLayers 2.10 Beginner's Guide, Packt Publishing. He has worked as the lead developer for a GIS-based company, has done contracting work with the design studio, Stamen, and has co-founded two start-ups. Erik is passionate about mapping, game development, and data visualization. In his free time, he enjoys writing and teaching, and can be found at

Thomas Gratier

Thomas Gratier is a GIS consultant who provides web development, consulting, and training services in Nantes, France. He is an open source advocate and a charter member of The Open Source Geospatial Foundation (OSGeo) ( He gets involved in writing French translations for open source geospatial projects, such as MapServer and Zoo Project. With like-minded professionals, he contributes to the weekly geospatial news updates at Geotribu ( With an MSc degree in geography and urban planning from The Institute Of Alpine Geography at Grenoble University, his career spanning 8 years steered more towards technical programming work, but he always kept his geospatial passion in mind. He has worked for public authorities on water and flood risk prevention and management, various private consultancies in urban planning developing web mapping solutions, and multinational company CapGemini's GIS Division in France. More information can be found on his website at Web Geo Data Vore (

Paul Spencer

Paul Spencer is a software engineer who has worked in the field of open source geospatial software for more than 15 years. He is a strong advocate of open source development and champions its use whenever possible. Paul has architected several successful open source projects and been actively involved in many more. Paul was involved in the early design and development of OpenLayers and continues to be involved as the project evolves. Paul joined DM Solutions Group (DMSG) in 1998, bringing with him advanced software development skills and a strong understanding of the software-development process. In his time with the company, Paul has taken on a leadership role as the CTO and primary architect for DM Solutions Group's web mapping technologies and commercial solutions. Prior to joining DMSG, Paul worked for the Canadian Military, after achieving his master's degree in software engineering from The Royal Military College of Canada.