Now that we've seen all the basic style properties and how to combine them as arrays of styles, it's time to learn how to use them in conjunction with feature properties to achieve dynamic styles. This is actually the last of our three ways of specifying the style property—the style function.
We said at the beginning of the chapter that a style function is one that returns an array of style objects to be used for a specific feature and zoom level.
What does this mean? It's really quite straightforward, but extremely powerful. A style function is nothing more than a JavaScript function that receives two parameters—the feature being styled, and the resolution of the map's view. It is required to return an array of ol.style.Style
objects when it is called. For instance, we could have written our country style example using a style function like this:
var countryStyleFunction = function(feature, resolution) { return [countryStyle]; // the basic style we already defined }; var...