Now we have the knowledge we need to build our final example. We will add some interactivity to our countries layer by highlighting the country under the mouse with a different style—specifically, we will:
Draw the highlighted country with a red outline and semitransparent fill
Draw an icon at the center of the highlighted country representing its flag
Draw the country's name next to the flag
First, we'll need a new file. Let's start again with the basic country vector layer:
var countries = new ol.layer.Vector({ source: new ol.source.GeoJSON({ projection: 'EPSG:3857', url: '../assets/data/countries.geojson' }) }); var center = ol.proj.transform([0, 0], 'EPSG:4326', 'EPSG:3857'); var view = new ol.View({ center: center, zoom: 1, }); var map = new ol.Map({ target: 'map', layers: [countries], view: view });Next, we'll set up some styles for our highlighted features. This code can go right after the map is defined. Don't worry if...