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 – using properties to style features


For this example, we will render the country layer by styling each country based on income level by associating its country code to income level data provided by the world bank. There are quite a few brackets; so, we've simplified it to four levels: high, medium, low, and poor. We'll draw each country in a color associated with its income level based on these brackets. Let's start from the previous example.

  1. At the beginning of the <script> tag, before anything else, we will define colors for the four brackets. Use any colours you like:

    var high = [64,196,64,1];
    var mid = [108,152,64,1];
    var low = [152,108,64,1];
    var poor = [196,32,32,1];
  2. The income levels for each feature are indicated by a code. We need a way to look up the color to use for each code. You don't need to include the comments, they are there to show how we are grouping the income levels:

    var incomeLevels = {
      'HIC': high, // high income
      'OEC': high, // high income OECD...