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

Creating a thumbnail style


We can use OpenLayer's icon style to display an image, we just need the URL to the photo. We can use the JavaScript console to take a quick look at what data is associated with each feature, so that we can figure out where the URL is stored. With the previous example running in your browser, open the JavaScript console and type the following commands:

var feature = flickrSource.getFeatures()[0];
feature.getProperties();

This gets the first feature from the vector source and displays its properties, which should show you something like the following screenshot:

Switch to JSON

Well, that wasn't as useful as we'd hoped. The URL to the photo is not there, so what's happening? It turns out that the KML format includes style information and OpenLayers is smart enough to extract that information and automatically generate style functions for the features. Unfortunately, OpenLayers is also hiding all the extra information about the feature that we need. We need a different...