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

Interactive styles


To round off our chapter on vector styles, let's explore combining vector styles with user interaction. In the previous chapter, we responded to the mouse moving over a country by displaying the country's name in an HTML element outside the map. We'll build on this example and take it one step further. As the mouse moves, we'll highlight the country under the mouse and draw its flag and name in the center of the country using a feature overlay. The feature overlays are something new; so, we'll need to learn something about them before we go ahead with our example though.

The feature overlays

The FeatureOverlay class, ol.FeatureOverlay, is a special type of vector layer designed to render a small number of temporary features in a specific style. It isn't a full-fledged vector layer, but it is highly optimized for the specific case of highlighting features in a temporary way. This sounds ideal for our use case!

Creating a new feature overlay is just like creating any other...