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 – adding the select interaction


So, let's go ahead and add a select interaction to our application:

  1. To add feature selection ability, create a select interaction. We'll add events soon, but for now, let's just create the control and add it to the map and then activate it. Add this at the end of the main <script> tag after all the other code:

    var select = new ol.interaction.Select({
      layers: [flickrLayer]
    });
    map.addInteraction(select);
  2. If you try this out, you'll see that when you click on a feature or a cluster, it turns into a blue dot with a white stroke around it. This is the default style for selected point features, and isn't really what we want. A simple thing for us to do is to make the photo larger when it is selected. The select interaction has a style option that allows us to do this. We'll create a new function to return a selected style by making a copy of our flickrStyle function and cache object, using a larger scale value, and using the new style function...