Time for action – using ol.Overlay dynamically with layers information

In this case, we will reuse just the previous example as a model.

So, copy the previous example's code in a new HTML page named 2360_08_06_layer_overlay.html.
Remove the string <b>OpenLayers 3 Code Sprint</b> <i>Humanities A3</i> from the HTML.

Then, just after the osmLayer declaration, add the following code, where we are reusing again the vectorEuropa layer with the styles:

var selectEuropa = new ol.style.Style({
  stroke: new ol.style.Stroke({
    color: '#ff0000',
    width: 2
  })
});

var defaultEuropa = new ol.style.Style({
  stroke: new ol.style.Stroke({
    color: '#0000ff',
    width: 2
  })
});

var vectorEuropa = new ol.layer.Vector({
  id: 'europa',
  source: new ol.source.GeoJSON({
    projection: 'EPSG:3857',
    url: '../assets/data/nutsv9_lea.geojson'
  }),
  style: defaultEuropa
});

Add an ol.interaction.Select component, as shown in the following code.

var selectInteraction = new ol.interaction.Select({
  layers: function (layer) {
    return layer.get('id') == 'europa';
  }
});

After map.addLayer(osmLayer);, add to the map the following new layer:
```
map.addLayer(vectorEuropa);
```

At the end of the JavaScript block, just after map.addOverlay(popup);, add the code that follows:

function pickRandomProperty() {
  var prefix = ['bottom', 'center', 'top'];
  var randPrefix = prefix[Math.floor(Math.random() * prefix.length)];
  var suffix = ['left', 'center', 'right'];
  var randSuffix = suffix[Math.floor(Math.random() * suffix.length)];
  return randPrefix + '-' + randSuffix;
}

var container = document.getElementById('popup');
var displayFeatureInfo = function(pixel, coordinate) {
  var features = [];
  map.forEachFeatureAtPixel(pixel, function(feature, layer) {
    features.push(feature);
  });
  if (features.length > 0) {
    var info = [];
    for (var i = 0, ii = features.length; i < ii; ++i) {
      info.push(features[i].get('N3NM'));
    }
    container.innerHTML = info.join(', ') || '(unknown)';
    var randomPositioning = pickRandomProperty();
    popup.setPositioning(randomPositioning);
    popup.setPosition(coordinate);
  } else {
    container.innerHTML = '&nbsp;';
  }
};

map.on('click', function(evt) {
  var coordinate = evt.coordinate;
  displayFeatureInfo(evt.pixel, coordinate);
});

Now, open your browser, pan, and click, and you will see a result like the following screenshot:

What just happened?

First, we added to the previous example the vector EuropaLayer in order to have areas easier to click on. It's because areas cover the entire map contrary to points where you need accurate clicking.

Next, we declared a function pickRandomProperty in order to generate a random string, fitting positioning parameters expected by the ol.Overlay component for a small demonstration purpose.

Then, we declared a modified displayFeatureInfo function reusing most of the code from 2360_08_03_foreachfeatureatpixel.html, where we set the positioning and the position. The position requires coordinates, so we added a second argument to displayFeatureInfo.

For positioning, we chose to display the content by changing the pop-up position randomly. This position is relative to the click event; to get this result, we reused the function pickRandomProperty, as follows:

var randomPositioning = pickRandomProperty();
popup.setPositioning(randomPositioning);

We also used the setter on the pop-up element in order to change its position according to the retrieved click coordinates, as follows:

popup.setPosition(coordinate);

We finished with the now quite usual block to add a click event to the map map.on('click', function(evt), but we retrieved the coordinates also and not only the pixel position to reuse the function displayFeatureInfo.

Now, you will learn to make dynamic use of ol.Overlay. You are also able to put a pop-up on your map using your geographic features.

You can try by yourself some experiments by following instructions given in the next section.

Have a go hero – customizing your pop-up

In order to go further, we advise you to do some exercises with ol.Overlay.

Your new assignment can be the following:

Style the pop-up better, and try to add a tiny cross in particular to be able to close the pop-up. You should use the debugger for the styling part.
Use the JavaScript setTimeout() function to stop displaying the pop-up after some time. You can see a reference about setTimeout at https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers.setTimeout. A short article at http://davidwalsh.name/javascript-debounce-function will also help you to understand why it can be useful.
Review the official vector examples to find some examples relying on an external library such as Bootstrap.

Creating or updating content on your map

Interactions can happen not only with selecting and displaying information from your map. It's also possible, for example, to create new features by drawing points, lines, or polygons. You can also update features. We will mainly focus on geometric representations because the built-in functionalities in OpenLayers 3 are mainly dedicated for this.

Drawing features on map

Let's start with the drawing component.

Previous Chapter

Time for action – introducing ol.Overlay with a static example

Next Chapter

Time for action – using ol.interaction.Draw to share new information on the Web

Table of Contents for OpenLayers 3 : Beginner's Guide

Time for action – using ol.Overlay dynamically with layers information

What just happened?

Have a go hero – customizing your pop-up

Creating or updating content on your map

Drawing features on map

Table of Contents for
OpenLayers 3 : Beginner's Guide