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

Adding a pop-up on your map


To add a pop-up, you can rely exclusively on HTML and CSS, but the OpenLayers 3 library bundles a component to help you to display information in a pop-up.

You will find below the reference for this component called ol.Overlay. Only a light review will be done here because some examples will follow to illustrate.

The ol.Overlay reference

The object is instantiated with a constructor such as:

var yourOverlay = new ol.Overlay({
  element:document.getElementById('yourOverlayElement')
})

Because ol.Overlay inherits from ol.Object, we only describe here the methods related to the object itself.

Method

Parameters

Description

getElement()

None.

This gets the DOM element of the overlay.

getMap()

None.

This gets the map associated with the overlay.

getOffset()

None.

This gets the offset of the overlay.

getPosition()

None.

This gets the current position of the overlay in map projection.

getPositioning()

None.

This gets the current positioning of the...