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

What are vector styles?


So, what is a vector style? Quite simply, it is a set of instructions about how to draw graphic primitives—the points, lines, polygons, and text that make up our vector features. OpenLayers provides a basic default style that renders features in various shades of blue. While this is quite nice, it's probably not what you'll want to use all the time.

You've already seen an example of a basic vector style in the previous chapter. Let's review it here:

var fill = new ol.style.Fill({
  color: 'rgba(0,0,0,0.2)'
});
var stroke = new ol.style.Stroke({
  color: 'rgba(0,0,0,0.4)'
});
var circle = new ol.style.Circle({
  radius: 6,
  fill: fill,
  stroke: stroke
});      
var vectorStyle = new ol.style.Style({
  fill: fill,
  stroke: stroke,
  image: circle
});

This code defines specific rules for the fill, stroke, and image properties of a new ol.style.Style object. The fill and stroke rules specify a color and opacity using the RGBA (Red, Green, Blue, and Alpha) format. The...