In this case, we will reuse just the previous example as a model.
So, copy the previous example's code in a new HTML page named
2360_08_06_layer_overlay.html
.Remove the string
<b>OpenLayers 3 Code Sprint</b> <i>Humanities A3</i>
from the HTML.Then, just after the
osmLayer
declaration, add the following code, where we are reusing again thevectorEuropa
layer with the styles:var selectEuropa = new ol.style.Style({ stroke: new ol.style.Stroke({ color: '#ff0000', width: 2 }) }); var defaultEuropa = new ol.style.Style({ stroke: new ol.style.Stroke({ color: '#0000ff', width: 2 }) }); var vectorEuropa = new ol.layer.Vector({ id: 'europa', source: new ol.source.GeoJSON({ projection: 'EPSG:3857', url: '../assets/data/nutsv9_lea.geojson' }), style: defaultEuropa });
Add an
ol.interaction.Select
component, as shown in the following code.var selectInteraction = new ol...