Time for action – more options with ol.interaction.Select

Now, let's reuse the previous example and discover more.

Start by copying 2360_08_01_simple_select.html in a new file called 2360_08_02_select_options.html.

After the vectorEuropa declaration, add the following JavaScript code to create the vector layer for points. A new dataset, a GeoJSON file france_4326.geojson, is available on the book's webpage:

var defaultFrancePoints = new ol.style.Style({
  image: new ol.style.Circle({
    fill: new ol.style.Fill({
      color: 'blue'
    }),
    stroke: new ol.style.Stroke({
      color: '#ffcc00'
    }),
    radius: 8
  })
});
var selectFrancePoints = new ol.style.Style({
  image: new ol.style.Circle({
    fill: new ol.style.Fill({
      color: '#ff0000'
    }),
    stroke: new ol.style.Stroke({
      color: '#ffccff'
    }),
    radius: 16
  })
});
var vectorFrancePoints = new ol.layer.Vector({
  id: 'france',
  source: new ol.source.GeoJSON({
    projection: 'EPSG:3857',
    url: '../assets/data/france_4326.geojson'
  }),
  style: defaultFrancePoints
});

Change a little bit the selectInteraction declaration, as follows:

var selectInteraction = new ol.interaction.Select({
  layers: function(layer) {
    return layer.get('selectable') == true;
  }
});

At the end of the preceding steps , after you added the vectorEuropa, add the new vector layer, as follows:
```
map.addLayer(vectorFrancePoints);
```
Then, set a property for both layers; arbitrarily, we use selectable to be more meaningful, as follows:
```
vectorEuropa.set('selectable', true);
vectorFrancePoints.set('selectable', true);
```
Open your browser and play with the selection with the Shift key to make multi-selection over the different layers.
You should see a result like the following screenshot:

What just happened?

We will not review all the code, but focus only on important points.

In the new block that declares the vectorFrancePoints layer, we just reviewed the vector point styling. Using the ol.style.Circle component, we set in style with the key image.

We kept the logic of the styles in order to keep the behavior for the selection: rules as reminders are applied if conditions they contain are met, whereas the style in ol.layer.Vector is the default style for the vector layers.

In the selectInteraction declaration, we changed the property that helps match our layers. Previously, we were matching using id with the value europa, and now, we are matching if a property selectable is true. But, as we do not declare initially in the layers some properties, we set them by adding a selectable property to both layers.

Have a go hero – try to make your own example

After you've seen everything you have to know about the ol.interaction.Select component, it's time to try to go further to really acquire knowledge by yourself about this part of the library.

For this, reuse the previous example and improve it using the following instructions:

Find a dataset using linestrings. It can be SHP, KML, or GeoJSON. If required, transform the format to be able to consume it with the OpenLayers 3 library.
Add a third layer using the retrieved dataset.
Find out what styles you have to use to style the linestrings layer.
Instead of adding options hardcoded in the code, use ol.dom.Input to be able to play on selectability.

Until now, we have only focused on the ol.interaction.Select component. Its main goals are to be able to highlight information by making a symbolization change and get information from the geographic features, for example.

But how can you also return information from the layers on your map and show them? That what we will see in the next part.

Previous Chapter

Time for action – testing the use cases for ol.interaction.Select

Next Chapter

Introducing methods to get information from your map

Table of Contents for OpenLayers 3 : Beginner's Guide

Time for action – more options with ol.interaction.Select

What just happened?

Have a go hero – try to make your own example

Table of Contents for
OpenLayers 3 : Beginner's Guide