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 – handling selection events


The next step is to display some information about photos when they are selected. To do this, we'll need to listen for an event on the select interaction's collection of selected features and retrieve the features that were selected. Our plan is to have some photo information display when we select features:

  1. Let's go ahead and get the framework for this set up first, by simply creating a <div> tag that will appear below the map. In your HTML code, add the following line after the map's <div> tag:

    <div id='photo_info ></div>
  2. The select interaction doesn't provide events directly related to features being selected or deselected, but it does maintain a collection of selected events and the collection object has events for adding and removing items. First, get a reference to the selected features:

    var selectedFeatures = select.getFeatures();
  3. Now, we can listen for the add event. For now, let's put the URL of the selected photo into...