Accessing attributes

In the first example (ch04_getattribute), we will learn how to access attribute data stored in the features and communicate them to the user. We will use a very particular feature of OpenLayers 3: the overlay. As a first step, we will create some simple rules to be applied on our overlays:

.popup {
    border: 1px solid grey;
    background-color: rgba(255,255,255,1);
    border-radius: .5em;


Overlays are geographically bounded HTML elements, which scale with the current resolution. They are stored separately from layers and other elements of the library, allowing us to have full control over them. As they are not parts of the canvas, we can easily style them with CSS.

Writing the code

For this task, we simply register a click event ...

Get Mastering OpenLayers 3 now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.