Time for action – understanding the forEachFeatureAtPixel method

Let's try with another example to discover more about the forEachFeatureAtPixel method. It should remind you about the last sample from Chapter 5, Using Vector Layers. To complete the task, check the following steps:

First, copy and paste the code from Time for action – converting your local or national authorities data into web mapping formats, that is, the file 2360_08_01_simple_select.html in a new HTML file 2360_08_03_foreachfeatureatpixel.html.
Then change the ol.js JavaScript file reference with ol-debug.js.

After that, add at the end of the JavaScript section of the new HTML file the following:

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

Open your browser with the console, and click where you have blue features to get a result like the following screenshot:
Next, remove both console.log statements, and add the following code just after the line var pixel = evt.pixel;displayFeatureInfo(pixel);.

Add the function displayFeatureInfo before the map.on( code:

var displayFeatureInfo = function(pixel) {
  var features = [];
  map.forEachFeatureAtPixel(pixel, function(feature, layer) {
    features.push(feature);
  });
  console.log(features);};

Again, open your browser and try to click not only on features, but also on the sea, where you don't have features to understand the behavior. Here's the resultant screenshot:

Replace console.log with this code:

var container = document.getElementById('information');
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)';
} else {
  container.innerHTML = '&nbsp;';
}

Add just before the HTML div the class map, as follows:
```
<div id="information"></div>
```
Now, for the last time, open or reload your example, and click on features on the map to see something like the following screenshot:

What just happened?

First, with console.log, we tried to see the event content and also get the pixel position with an array of x, y, where we click. Next, we made a call to the function that relies on a map.forEachFeatureAtPixel function. Its purpose is to get back every feature under the click using the pixel position from the event where we want to see the return you get from the callback in success property and also restrict the action on the vectorEuropa layer.

We also saw that the return contained the ol.Feature object, and because of this, we chose to play to try if the return was empty or not. As a click can send back more than one feature, we used a loop to push the features property N3NM information in an array. Depending on this, we have the choice to display or not the name of the NUTS region with the attribute N3NM in a DOM element in the screenshot FR717 Savoie.

After this review, we know how to retrieve and manipulate information from vector layers. You understand that the method map.forEachFeatureAtPixel within displayFeatureInfo sends back ol.Feature. You can manipulate to retrieve geometry or attributes from the layers you click on.

There is another way to retrieve information when clicking, and it's with the WMS getGetFeatureInfoUrl method. In which circumstances should we use it, and why does it exist?

The getGetFeatureInfoUrl method – an alternative way of getting information from a map

The title can be unclear if you don't already have some basics.

For this, we will start by reviewing the Open Geospatial Consortium (OGC) Web Map Services (WMS) standard.

Let's begin with the basics of WMS, and later, we will come back to the main topic.

Basics of the WMS standard

For this, we will reuse two excerpts from the Geoserver documentation (a server-side component that can work with the OpenLayers 3 library).

The first one summarizes what WMS is:

"The OGC Web Map Service (WMS) specification defines an HTTP interface for requesting georeferenced map images from a server."

The second one, a table, gives you the type of requests the WMS standard can perform:

Operation	Description
`DescriptionExceptions`	This is displayed when an exception occurs.
`GetCapabilities`	This retrieves metadata about the service, including supported operations and parameters and a list of the available layers.
`GetMap`	This retrieves a map image for a specified area and content.
`GetFeatureInfo` (optional)	This retrieves the underlying data, including geometry and attribute values, for a pixel location on a map.
`DescribeLayer` (optional)	This indicates the Web Feature Service (WFS) or Web Coverage Service (WCS) to retrieve additional information about the layer.
`GetLegendGraphic` (optional)	This retrieves a generated legend for a map.

In this list of possible operations, the most common operation is GetMap, an operation that send back an image to display in a client, JavaScript or desktop.

But you also see GetFeatureInfo, an optional operation for WMS.

Here, when you read, the point is that it's not the client side that manages returned features, but the server side. The purpose here is to have less load on the client side: managing a lot of features in the client side is mainly a pain, in particular if you use DOM.

The idea is to send the information to a server and retrieve the minimum and really light result. The result can be an HTML, a GML, raw text or depending on your server, also a GeoJSON. To illustrate, type into your browser the following URL:

http://demo.opengeo.org/geoserver/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetFeatureInfo&FORMAT=image/png&TRANSPARENT=true&WIDTH=256&HEIGHT=256&LAYERS=ne:ne&QUERY_LAYERS=ne:ne&STYLES=&CRS=EPSG:3857&BBOX=-10018754.171394622,5009377.085697312,-5009377.085697311,10018754.171394624&INFO_FORMAT=text/html&I=94&J=182

You will see an HTML table with information from the point where we clicked on: INFO_FORMAT= text/html. It is the way to say we want an HTML format return.

As a conclusion, just retain at the moment that when you choose to use the OpenLayers getGetFeatureInfoUrl method, you are supposed to use it with WMS layers.

Now, you have enough knowledge, let's go back to the main topic.

Using the getGetFeatureInfoUrl method to get information from your map

After, this quick review of WMS, let's try to work with another example using getFeatureInfoUrl.

Previous Chapter

Introducing methods to get information from your map

Next Chapter

Time for action – understanding the getGetFeatureInfoUrl method

Table of Contents for OpenLayers 3 : Beginner's Guide

Time for action – understanding the forEachFeatureAtPixel method

What just happened?

The getGetFeatureInfoUrl method – an alternative way of getting information from a map

Basics of the WMS standard

Using the getGetFeatureInfoUrl method to get information from your map

Table of Contents for
OpenLayers 3 : Beginner's Guide