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>
Table of Contents (22 chapters)
OpenLayers 3 Beginner's Guide
Credits
About the Authors
About the Reviewers
www.PacktPub.com
Preface
Index

Turning our example into an application


So far, we've accessed data from Flickr, saved it to a file, added it to our map and created a simple photo thumbnail style. This is pretty cool, but we really haven't done much other than just load in the data, from an OpenLayers's point of view. It's useful, but we really haven't created a full-featured web application just yet. So, let's focus on how to build a more useful web-mapping application. To do this, we'll basically need to do two general things:

  1. Add some interactivity to our map.

  2. Use live data. We shouldn't have to manually download a data file every time we want new data—our web application should do it automatically.

Let's focus on the first part, and then change the data source after we develop some interactivity.

Adding interactivity

We need to decide what interactivity we'd like to provide to make our application interactive for our users. We'd like our users to be able to click on a photo and see relevant information. For this, we can...