O'Reilly logo

OpenLayers 3 : Beginner's Guide by Erik Hazzard, Paul Spencer, Thomas Gratier

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Time for action – creating interactive styles

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
  1. 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({ ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required