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 – using the icon style

As we haven't seen the Icon style before, let's build an example. As we'll need some point data for this example, the earthquake.kml file should be perfect! We'll use the following image sprite and pick the middle dot. This file is included with the code samples that come with the book; you can find it at assets/img/dots.png.

Time for action – using the icon style
  1. Starting from the previous example, first, we'll create an icon style using our sprite:
    var earthquakeStyle = new ol.style.Style({
      image: new ol.style.Icon({
        anchor: [0.5, 0.5],
        size: [52, 52],
        offset: [52, 0],
        opacity: 1,
        scale: 0.25,
        src: '../assets/img/dots.png'
      })
    });
  2. Next, create the ...

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