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 to our map, querying the underlying vector layers:

map.on('click', function (evt) {
    var pixel = evt.pixel;
    var coord = evt.coordinate;
    var attributeDiv = document.createElement('div');
    attributeDiv.className...