O'Reilly logo

Mastering OpenLayers 3 by Gábor Farkas

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

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;
}

Note

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

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