Time for action – adding the select interaction

So, let's go ahead and add a select interaction to our application:

To add feature selection ability, create a select interaction. We'll add events soon, but for now, let's just create the control and add it to the map and then activate it. Add this at the end of the main <script> tag after all the other code:
```
var select = new ol.interaction.Select({
  layers: [flickrLayer]
});
map.addInteraction(select);
```
If you try this out, you'll see that when you click on a feature or a cluster, it turns into a blue dot with a white stroke around it. This is the default style for selected point features, and isn't really what we want. A simple thing for us to do is to make the photo larger when it is selected. The select interaction has a style option that allows us to do this. We'll create a new function to return a selected style by making a copy of our flickrStyle function and cache object, using a larger scale value, and using the new style function with the select interaction:
```
var selectedCache = {};
function selectedStyle(feature) {
  var url = feature.get('url');
   if (!selectedCache[url]) {
    selectedCache[url] = new ol.style.Style({
      image: new ol.style.Icon({
        scale: 0.50,
        src: url
      })
    });
  }
  return [selectedCache[url]];
});

var select = new ol.interaction.Select({
  layers: [vectorLayer],
  style: selectedStyle
});
```
If you try this now, you should see a photo get larger when you click on it:

What just happened?

We just added some interactivity to our map. Let's recap how we did this.

The first step, was to add a select interaction to the map, configured to select features from our vector layer:

var select = new ol.interaction.Select({
  layers: [flickrLayer]
});
map.addInteraction(select);

The default selection style wasn't appropriate; so, we added a new function for styling selected features. We created a new cache object for selected styles, so that we could use the URL as the value for caching, and the style we used was the same thumbnail style but with a larger photo.

Have a go hero

We've duplicated the style code, which was easy to do and doesn't really introduce any problems in the runtime efficiency of our code. However, duplicated code can cause maintenance problems in real applications and some effort should be made to avoid obviously duplicate code. Try refactoring the style-related code to eliminate duplication as much as possible. You'll still need separate functions for the select interaction and the vector layer, but the code inside each layer looks like a candidate for moving into a new consolidated function that takes scale as a parameter.

Previous Chapter

Turning our example into an application

Next Chapter

Time for action – handling selection events

Table of Contents for OpenLayers 3 : Beginner's Guide

Time for action – adding the select interaction

What just happened?

Have a go hero

Table of Contents for
OpenLayers 3 : Beginner's Guide