OpenLayers 3: Beginner's Guide

Book Image

OpenLayers 3: Beginner's Guide

By : Thomas Gratier, Paul Spencer, Erik Hazzard

Book Image

OpenLayers 3: Beginner's Guide

By: Thomas Gratier, Paul Spencer, Erik Hazzard

Overview of this book

<p>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.</p> <p>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.</p>

OpenLayers 3 Beginner's Guide

OpenLayers 3 Beginner's Guide

Credits

About the Authors

About the Authors

About the Reviewers

About the Reviewers

www.PacktPub.com

www.PacktPub.com

Preface

Free Chapter

Getting Started with OpenLayers

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

Key Concepts in OpenLayers

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

Charting the Map Class

Charting the Map Class

Understanding the Map class

Time for action – creating a map

Time for action – rendering a masterpiece

Time for action – target practice

Time for action – creating animated maps

Time for action – linking two views

Interacting with Raster Data Source

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

Using Vector Layers

Using Vector Layers

Understanding the vector layer

Time for action – creating a vector layer

How the vector layer works

The vector layer class

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

Styling Vector Layers

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

Wrapping Our Heads Around Projections

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

Interacting with Your Map

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

Taking Control of Controls

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

OpenLayers Goes Mobile

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

Time for action – MANIFEST destiny

Going native with web applications

Time for action – track me

Creating Web Map Apps

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

Object-oriented Programming – Introduction and Concepts

Object-oriented Programming – Introduction and Concepts

What is object-oriented programming?

More details on Closure Tools and Code Optimization Techniques

More details on Closure Tools and Code Optimization Techniques

The Closure Tools philosophy

Introducing Closure Library, yet another JavaScript library

Time for action – first steps with Closure Library

Making custom build for optimizing performance

Time for action – playing with Closure Compiler

Applying your knowledge to the OpenLayers case

Time for action - running official examples with the internal OpenLayers toolkit

Time for action - building your custom OpenLayers library

Syntax and styles

Time for action – using Closure Linter to fix JavaScript

Squashing Bugs with Web Debuggers

Squashing Bugs with Web Debuggers

Introducing Chrome Developer Tools

Time for action – opening Chrome Developer Tools

Explaining Chrome Developer debugging controls

Time for action – using DOM manipulation with OpenStreetMap map images

Time for action – using breakpoints to explore your code

Time for action – playing with zoom button and map copyrights

Using the Console panel

Time for action – executing code in the Console

Time for action – creating object literals

Time for action – interacting with a map

Improving Chrome and Developer Tools with extensions

Debugging in other browsers

Pop Quiz Answers

Pop Quiz Answers

Chapter 3, Charting the Map Class

Chapter 5, Using Vector Layers

Chapter 7, Wrapping Our Heads Around Projections

Chapter 8, Interacting with Your Map

Chapter 9, Taking Control of Controls

Chapter 10, OpenLayers Goes Mobile

Appendix B, More details on Closure Tools and Code Optimization Techniques

Appendix C, Squashing Bugs with Web Debuggers

Index

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Common operations on layers

All raster layers inherit from ol.layer.Layer.

The following table is the list of available properties. You can also use them with vector although it's not required in this chapter:

Name	Type	Description
`brightness`	`number`\|`undefined`	This property sets the layer brightness. See Wikipedia webpage (https://en.wikipedia.org/wiki/Brightness) for more information.
`contrast`	`number`\|`undefined`	This property sets the layer contrast.
`hue`	`number`\|`undefined`	This property sets the layer hue. You can discover more about hue with the Wikipedia page, https://en.wikipedia.org/wiki/Hue.
`opacity`	`number`\|`undefined`	This property sets the layer opacity. Possible values are between `0` and `1`. The default value is `1`.
`saturation`	`number`\|`undefined`	This property sets the layer saturation. See the dedicated Wikipedia article (https://en.wikipedia.org/wiki/Colorfulness) for more.
`source`	`ol.source.Source`	This property defines the source for the layer. Sources...