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

Have a go hero – using the circle style


To round out our understanding of the image styles, redo the previous example using ol.style.Circle instead of ol.style.Icon as the image property of the earthquake style. Your result should look something like this (depending on what values you choose):

Text styles

We saw the text style in action in the first example, and we also saw that it wasn't very useful to include a static text style—at least in that example. In general, text styles will be much more useful when the text that is displayed is derived from some property of the feature being displayed. We'll look at how to do that at the end of the chapter, so for now, let's finish up the basic style section with the properties available to text styles:

Name

Type

Description

font

string

This is a string containing the font size and name of the font to use for rendering the text. The size is typically given in pixels, for example:

"18px Verdana"

offsetX

number

This is the horizontal...