Let's have a look at the code used in this task.

First, we declared the usual raster layer as the background with the following code:

var raster = new ol.layer.Tile({
  source: new ol.source.MapQuest({layer: 'sat'})
});

Then, we started to declare the style that is applied when we select one or more features. It's exactly like the usual styling.

Later, when selecting with the ol.interaction.Select, we will reuse this style. Here's how we declare the style:

var selectEuropa = new ol.style.Style({
  stroke: new ol.style.Stroke({
    color: '#ff0000',
    width: 2
  })
});

This part is dedicated to preparing styling for the vector layer when there is no selection; it's the blue stroke you see in the preceding screenshot:

var defaultEuropa = new ol.style.Style({
  stroke: new ol.style.Stroke({
    color: '#0000ff',
    width: 2
  })
});

Next, we started to declare the vector layer and its source ol.source.GeoJSON, where we mentioned the projection of the map and the GeoJSON file we produced in the previous part of the chapter. We lowered the GeoJSON file and renamed the extension nutsv9_lea.geojson. We added into the style property in ol.layer.Vector an ol.style.Style class that uses your previous defaultEuropa, as follows:

var vectorEuropa = new ol.layer.Vector({
  id: 'europa',
  source: new ol.source.GeoJSON({
  projection: 'EPSG:3857',
  url: '../assets/data/nutsv9_lea.geojson'
  }),
style: defaultEuropa
});

We also needed to declare the interaction constructor to make the selection, or our style for selection will never work.

The way to do it is to instantiate it with:

var selectInteraction = new ol.interaction.Select({
  condition: ol.events.condition.singleClick,
  toggleCondition: ol.interaction.condition.shiftKeyOnly,
  layers: function (layer) {
    return layer.get('id') == 'europa';
  }
});

When you are in a complex map, you have more than one layer. Using the option layers is the way to say the click will only query information from layers that match the condition. You use a function to do this filtering. You can also use an array of layers, but it's less powerful. So, if you click in a place where a feature with layer id is 'europa', it will apply the right style. The condition variable is a static variable you can choose when you want to change behavior for select. By default, it's the single click that triggers the selection, but it can also be, for example, the Alt + click that can do it if you wish. It's also the same for toggleCondition. The purpose of this property is to set the condition when you want to toggle selection. In this case, we just use the default condition for learning purposes.

Then, we do the usual operations: declare the center, the view, and the map, then add to the map the layers, and set the view for the map, as follows:

var london = ol.proj.transform([-0.12755, 51.507222], 'EPSG:4326', 'EPSG:3857');
var view = new ol.View({
  center: london,
  zoom: 6
});
var map = new ol.Map({
  target: 'map'
});
map.addLayer(raster);
map.addLayer(vectorEuropa);
map.setView(view);

At the end of it all, we finished by adding the ol.interaction.Select object, as follows:

map.getInteractions().extend([selectInteraction]);

An alternative syntax to get the same result can be done by adding it in the interactions property of the ol.Map constructor, as follows:

var map = new ol.Map({
  interactions: ol.interaction.defaults().extend([selectInteraction]),
target: 'map'
});

After this first introduction, let's do another useful example to learn how to manage multi-selection or make a selection with points instead of polygons.