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.

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: earthquakeStyle
});

Now, add the layer to the map's layers array:

var map = new ol.Map({
  target: 'map',
  layers: [countries, timezones, earthquakes],
  view: view
});

The result should look something like this:

What just happened?

Using the icon style properties, we displayed an image at the location of each of the points in the earthquakes.kml file.

First, we created an icon style pointing at our sprite image and supplied values for offset, anchor, size, and scale to ensure our red dot is used. The sprite is 156 pixels wide and 52 pixels high, and each image in the sprite is 52 by 52 pixels, so we provided a size of [52,52]. An offset value of [52, 0] moved the frame of reference 52 pixels in from the left edge. The anchor position of [0.5,0.5] specified the middle of the image since the default anchor units is fraction. We can also have specified pixels for anchor units and changed our anchor position to [26, 26]. Given the density of the earthquakes, using a 52 by 52 pixel image will overwhelm the map; so, we provided a scale value of 0.25, which effectively shrunk the resulting image to 25 percent of its size, or 13 by 13 pixels.

After creating a new vector layer that used our icon style, we added it to the map.

The circle style

Like the icon style, the circle style is used for point geometries. It's a much simpler object, though with only four configurable properties:

Name	Type	Description
`radius`	`number`	This is the radius, in pixels, to draw the circle.
`fill`	`ol.style.Fill`	This is the style to fill the circle with.
`snapToPixel`	`Boolean`	If `true`, this property will cause the circle to be snapped to integer pixel values and result in sharper display of the circle. If `false`, the circle will be drawn more accurately but may appear blurry. The default value is `true`. You may want to set this to `false` if you are animating the circle's position as snapping to pixels may cause noticeable jitter.
`stroke`	`ol.style.Stroke`	This is the style to draw the circumference of the circle with.

Previous Chapter

The style class

Next Chapter

Have a go hero – using the circle style

Table of Contents for OpenLayers 3 : Beginner's Guide

Time for action – using the icon style

What just happened?

The circle style

Table of Contents for
OpenLayers 3 : Beginner's Guide