To wrap up our chapter on vector layers, let's combine our knowledge of layers, sources, and features and create a small application that displays the name of a country when we hover over it with the mouse:
Let's start with a simple vector layer based on the GeoJSON file containing the country data. This is how we started the chapter!
var source = new ol.source.GeoJSON({ projection: 'EPSG:3857', url: '../assets/data/countries.geojson' }); var countries = new ol.layer.vector({ source: source }); 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 hook up to the
pointermoveevent provided by the map object. If you don't remember anything about map events, review Chapter 3, Charting the Map Class:map.on('pointermove', onMouseMove);Now, add the
onMouseMovefunction:function onMouseMove...