Time for action – interacting with features

To wrap up our chapter on vector layers, let's combine our knowledge of layers, sources, and features and create a small application that displays the name of a country when we hover over it with the mouse:

Let's start with a simple vector layer based on the GeoJSON file containing the country data. This is how we started the chapter!

var source = new ol.source.GeoJSON({
  projection: 'EPSG:3857',
  url: '../assets/data/countries.geojson'
});
var countries = new ol.layer.vector({
  source: source
});
var center = ol.proj.transform([0, 0], 'EPSG:4326', 'EPSG:3857');
var view = new ol.View({
  center: center,
  zoom: 1,
});
var map = new ol.Map({
  target: 'map',
  layers: [countries],
  view: view
});

Next, we'll hook up to the pointermove event provided by the map object. If you don't remember anything about map events, review Chapter 3, Charting the Map Class:
```
map.on('pointermove', onMouseMove);
```

Now, add the onMouseMove function:

function onMouseMove(browserEvent) {
  var coordinate = browserEvent.coordinate;
  var pixel = map.getPixelFromCoordinate(coordinate);
  var el = document.getElementById('name');
  el.innerHTML = '';
  map.forEachFeatureAtPixel(pixel, function(feature) {
    el.innerHTML += feature.get('name') + '<br>';
  });
}

Finally, add a <div> element to display the country name, just after the <div> that holds the map:
```
<div id="name"></div>
```
Load this in your browser and move the mouse around. You should see the name of the country that the mouse is over appear below the map.

What just happened?

We've just saw how easy it is to interact in real time with vector data sources.

Step 1 just created a vector layer using a static GeoJSON source and added it to the map.

In step 2, we registered for the pointermove event. Recall from Chapter 3, Charting the Map Class that the pointermove event is fired by the map whenever the mouse moves over the map, and it passes a BrowserEvent object that contains, among other things, the map coordinate of the mouse position. Next, we implemented our event handler function. It gets the coordinate from the browser event and finds all features at that coordinate in our country layer's source. If there are any features, we get the name property from the first one and display this in the <div> added in step 4. You may wonder exactly how interactions with your map work behind the scene. Don't worry! We will see them more thoroughly in Chapter 8, Interacting with Your Map.

Previous Chapter

Time for action – geometries in action

Next Chapter

Summary

Table of Contents for OpenLayers 3 : Beginner's Guide

Time for action – interacting with features

What just happened?

Table of Contents for
OpenLayers 3 : Beginner's Guide