OpenLayers 3: Beginner's Guide

Get started with OpenLayers 3 and enhance your web pages by creating and displaying dynamic maps

OpenLayers 3: Beginner's Guide

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

2 customer reviews
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
$12.99 p/month

Get Access

Get Unlimited Access to every Packt eBook and Video course

Enjoy full and instant access to over 3000 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.

+ Collection
Free Sample

Book Details

ISBN 139781782162360
Paperback512 pages

Book Description

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.

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

Authors

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

Book Details

ISBN 139781782162360
Paperback512 pages
Read More
From 2 reviews

Read More Reviews