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

Style functions


Now that we've seen all the basic style properties and how to combine them as arrays of styles, it's time to learn how to use them in conjunction with feature properties to achieve dynamic styles. This is actually the last of our three ways of specifying the style property—the style function.

We said at the beginning of the chapter that a style function is one that returns an array of style objects to be used for a specific feature and zoom level.

What does this mean? It's really quite straightforward, but extremely powerful. A style function is nothing more than a JavaScript function that receives two parameters—the feature being styled, and the resolution of the map's view. It is required to return an array of ol.style.Style objects when it is called. For instance, we could have written our country style example using a style function like this:

var countryStyleFunction = function(feature, resolution) {
  return [countryStyle];  // the basic style we already defined
};
var...