Free Sample
+ Collection

OpenLayers 3: Beginner's Guide

Beginner's Guide
Thomas Gratier, Paul Spencer, Erik Hazzard

Get started with OpenLayers 3 and enhance your web pages by creating and displaying dynamic maps
$29.99
$49.99
RRP $29.99
RRP $49.99
eBook
Print + eBook

Want this title & more?

$21.99 p/month

Subscribe to PacktLib

Enjoy full and instant access to over 2000 books and videos – you’ll find everything you need to stay ahead of the curve and make sure you can always get the job done.

Book Details

ISBN 139781782162360
Paperback512 pages

About This Book

  • 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

Who This Book Is For

Whether you are a hobbyist or a professional web developer, if you wish to use maps on your website, then this book is for you. A basic understanding of JavaScript will be helpful, but is not necessary. If you've never worked with maps before, this book will introduce you to some common mapping topics and will guide you through the OpenLayers library. Experienced developers can also use this book as a reference to OpenLayers 3 components and to further enhance their knowledge.

Table of Contents

Chapter 1: Getting Started with OpenLayers
Introducing OpenLayers
Advantages of using OpenLayers
What, technically, is OpenLayers?
Anatomy of a web mapping application
Connecting to Google, Bing Maps, and other mapping APIs
Time for action – downloading OpenLayers
Time for action – creating your first map
Where to go for help
OpenLayers issues
OpenLayers source code repository
Getting live news from RSS and social networks
Summary
Chapter 2: Key Concepts in OpenLayers
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
Summary
Chapter 3: Charting the Map Class
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
Events
Views
Time for action – linking two views
Summary
Chapter 4: Interacting with Raster Data Source
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
Summary
Chapter 5: Using Vector Layers
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
Summary
Chapter 6: Styling Vector Layers
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
Summary
Chapter 7: Wrapping Our Heads Around Projections
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 Proj4js.org
Time for action – reprojecting extent
Time for action – using custom projection with WMS sources
Time for action – reprojecting geometries in vector layers
Summary
Chapter 8: Interacting with Your Map
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
Summary
Chapter 9: Taking Control of Controls
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
Summary
Chapter 10: OpenLayers Goes Mobile
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
Summary
Chapter 11: Creating Web Map Apps
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
Summary

What You Will Learn

  • 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

In Detail

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.

Authors

Read More