O'Reilly logo

OpenLayers 3 : Beginner's Guide by Erik Hazzard, Paul Spencer, Thomas Gratier

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required