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.
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' }) });Next, create the earthquake layer and assign it the style. Because it is a KML file, we'll need to tell OpenLayers to not extract the embedded style information:
var earthquakes = new ol.layer.Vector({ source: new ol.source.KML({ projection: 'EPSG:3857', url: '../assets/data/earthquakes.kml', extractStyles: false }), style...