Time for action – handling selection events

The next step is to display some information about photos when they are selected. To do this, we'll need to listen for an event on the select interaction's collection of selected features and retrieve the features that were selected. Our plan is to have some photo information display when we select features:

Let's go ahead and get the framework for this set up first, by simply creating a <div> tag that will appear below the map. In your HTML code, add the following line after the map's <div> tag:
```
<div id='photo_info ></div>
```
The select interaction doesn't provide events directly related to features being selected or deselected, but it does maintain a collection of selected events and the collection object has events for adding and removing items. First, get a reference to the selected features:
```
var selectedFeatures = select.getFeatures();
```

Now, we can listen for the add event. For now, let's put the URL of the selected photo into our photo_info <div> tag:

selectedFeatures.on('add', function(event) {
  var feature = event.target.item(0);
  var url = feature.get('url');
  $('#photo-info').html(url);
});

We should also handle the case where a feature is removed from the selection by clearing the photo_info <div> tag:
```
selectedFeatures.on('remove', function(event) {
  $('#photo-info').empty();
});
```
Try it out! When you select a photo by clicking on it, you should see the URL to its image appear below the map. When you click elsewhere on the map, the selected photo should be unselected and the information should be removed.

What just happened?

We used the select interaction to respond to the user selecting photos. While there is no direct way to do this, we can use the add and remove events of the collection returned by getFeatures to update our photo_info div with some information about the selected photo.

Displaying photo information

Earlier, we revealed what information is available for each feature by running the following code in the JavaScript console:

var feature = flickrSource.getFeatures()[0];
feature.getProperties();

And, we saw the following in the console:

We can see that each feature has some interesting information we might want to display:

author and author_id: These are useful for identifying the Flickr user that took the photo.
date_taken and published: These contain the date that the photo was taken and the date it was published to Flickr.
description: This is a pregenerated HTML string that contains useful information about the photo including the user's description, if available.
link: This takes you to the actual Flickr page for the photo.
tags: This is a space-separated list of tags associated with the photo.
title: This was provided by the user that uploaded the photo.
Note
The description property seems like a great thing to display. It's nicely formatted and includes some interesting information for some photos. Unfortunately, all that nice formatting only shows up if we insert the description as HTML into our page. Injecting untrusted HTML into a page, without first sanitizing it, makes your application prone to XSS (Cross-site scripting) attacks, a technique for injecting and executing unauthorized JavaScript into web pages. You should never inject HTML from an untrusted source into a web page. Even though it might seem safe to trust Flickr, we'll be prudent and avoid the description property by creating our own description from other information available.

Previous Chapter

Time for action – adding the select interaction

Next Chapter

Time for action – displaying photo information

Table of Contents for OpenLayers 3 : Beginner's Guide

Time for action – handling selection events

What just happened?

Displaying photo information

Note

Table of Contents for
OpenLayers 3 : Beginner's Guide