Book Image

OpenLayers 3.x Cookbook - Second Edition

By : Peter J. Langley, Antonio Santiago Perez
Book Image

OpenLayers 3.x Cookbook - Second Edition

By: Peter J. Langley, Antonio Santiago Perez

Overview of this book

OpenLayers 3 is one of the most important and complete open source JavaScript mapping libraries today. Throughout this book, you will go through recipes that expose various features of OpenLayers 3, allowing you to gain an insight into building complex GIS web applications. You will get to grips with the basics of creating a map with common functionality and quickly advance to more complicated solutions that address modern challenges. You will explore into maps, raster and vector layers, and styling in depth. This book also includes problem solving and how-to recipes for the most common and important tasks.
Table of Contents (14 chapters)
OpenLayers 3.x Cookbook Second Edition
About the Authors
About the Reviewer

Using point features as markers

A marker can be understood as a point of interest (POI) where we place an icon to identify it, and this icon has some information associated with it, such as a monument, a parking area, a bridge, and so on.

In this recipe, we will learn how to associate a custom marker icon with a point geometry type. The source code can be found in ch03/ch03-markers/. Here's what we'll end up with:

How to do it…

Use the following steps to learn how to attach an icon, in this case a flag, to a geometry point on the map:

  1. Create the HTML file with the OpenLayers dependencies and a div to contain the map.

  2. Create a custom JavaScript file; within this file, create a function to generate and return a custom feature style:

        var createIconStyle = function(country) {
          return new{
            image: new{
              src: country + '.png'
  3. Create three geometry point features:

    var algeria = new ol.Feature(new ol.geom.Point([146759,3297187...