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

Time for action – getting Flickr data


The first step in our application will require us to get data from Flickr. We'll request some data and save it locally.

  1. The first step, is to figure out what sort of data we want to get. To simplify things, let's start with KML data. We'll use the URL we mentioned before, but we'll also specify a tag. Let's use bird as a tag. Open up this URL in your web browser, and you should be able to download it as a KML file from http://api.flickr.com/services/feeds/geo/?format=kml&tags=bird.

  2. Save the file as flickr_data.kml and place it in your map directory.

  3. Open up the file in your text editor and take a look at it. We won't be editing it, but just take a look to see how the data is structured. Notice that there are style tags—if we want, we can directly apply the styles from the file to our map (as we'll see soon).

What just happened?

We just downloaded the latest images in the KML format that contained a tag called bird. When you call the URL and pass in...