Time for action – understanding the getGetFeatureInfoUrl method

Let's start with a new example:

To begin with, copy and paste the now usual HTML page 2360_08_01_simple_select.html to reuse it as a model in 2360_08_04_getgetfeatureinfourl.html.
Add just after the script referencing the ol.js file the HTML content that follows:
```
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
```

Remove all the JavaScript block content between <script> </script>. Next, add the following code into the same block:

var wms_layer = new ol.layer.Tile({
  source: new ol.source.TileWMS({
    url: 'http://demo.opengeo.org/geoserver/wms',
    params: {'LAYERS': 'ne:ne'}
  })
});

var view = new ol.View({
  center: [0, 0],
  zoom: 1
});

var map = new ol.Map({
  layers: [wms_layer],
  target: 'map',
  view: view
});

var viewProjection = view.getProjection();
var viewResolution = view.getResolution();

map.on('click', function(evt) {
  var container = document.getElementById('information');
  var url = wms_layer.getSource().getGetFeatureInfoUrl(
  evt.coordinate, viewResolution, viewProjection,
  {'INFO_FORMAT': 'text/javascript',
  'propertyName': 'formal_en'});
  if (url) {
    var parser = new ol.format.GeoJSON();
    $.ajax({
      url: url,
      dataType: 'jsonp',
      jsonpCallback: 'parseResponse'
    }).then(function(response) {
      var result = parser.readFeatures(response);
      if (result.length) {
        var info =[];
        for (var i = 0, ii = result.length; i < ii; ++i) {
          info.push(result[i].get('formal_en'));
        }
        container.innerHTML = info.join(', ');
      } else {
        container.innerHTML = '&nbsp;';
      }
    });
  }
});

Open your browser, and click wherever you want. You will see a result that looks like the following screenshot:

What just happened?

We started by creating a tiled WMS layer, a raster type layer. Next, we created the view and the map. Then we got parameters from the view required later in the code—the resolution and the projection—and we got the DOM element information reference where we will display our click result. The most important part happens in the declaration map.on('click', function(evt) {, means wherever you click in the map, the code within the block is executed.

In this block, we declared an url variable to call the WMS web service. Its result was provided by a function generated from a WMS source using also the coordinates of the click, the resolution, the projection, and the query parameters.

The coordinates were provided by the click. The query parameters defined the returned type expected from the web service. In this case, we wanted the JSONP return encapsulating GeoJSON (JSONP) using 'INFO_FORMAT': 'text/javascript'. They also help to select only the properties we want from the web service ('propertyName': 'formal_en').

You can discover more by setting a breakpoint, and when clicking on the map, copying the URL string, and then, opening it in a new browser window to inspect.

Then, we declared an ol.format.GeoJSON object called parser, a component designed to understand the returned GeoJSON content from the Ajax call just after.

The Ajax call was done using a jQuery function $.ajax({...}).then(function(response) {, hence the jQuery script addition previously. The url parameter is not enough to manage JSONP. We need to custom the Ajax call to manage JSONP. JSONP allows remote calls to resources external to your website without encountering any issues with Ajax same origin policy (see the Wikipedia web page about the subject https://en.wikipedia.org/wiki/Same-origin_policy).

The code in the block reuses the received content and adds it as a JavaScript object in the result variable. This new object, an array, is manipulated to retrieve the text data United States of America and displays it in the container DOM element.

It's recommended also that you see in the network panel what happens every time you click on the map. The following screenshot is a depiction of the network panel:

The important thing here is you rely on a web service able to provide a raster map based on a standard, and you are also able to get remotely the features below the place where you click. The main advantage here is to have less coupling between your server code and your JavaScript code. However, on the other side, you can suffer from latency (time to receive the response from the URL call). Up until now, every piece of information returned was always displayed in a DOM element outside of the map. How can we display it on the top of the map as a pop-up?

That's what we will see in the next part mainly based on ol.Overlay, a component we already use in the Chapter 2, Key Concepts in OpenLayers.

Previous Chapter

Time for action – understanding the forEachFeatureAtPixel method

Next Chapter

Adding a pop-up on your map

Table of Contents for OpenLayers 3 : Beginner's Guide

Time for action – understanding the getGetFeatureInfoUrl method

What just happened?

Table of Contents for
OpenLayers 3 : Beginner's Guide