Styling based on feature attributes

So far, in this chapter, we took a look at styling features at the layer level using the setStyle method from ol.layer.Vector. We've also looked at styling individual features based on their geometry type, and then we applied the styles using the setStyle method from the ol.Feature class.

For this recipe, we'll look at a different way to style features at the feature level using a styling function at the ol.layer.Vector level. The vector layer class has a property named style, which not only accepts an instance of ol.style.Style or an array of various ol.style.Style instances, but it also accepts an ol.style.StyleFunction method. This method is called whenever a feature is rendered on the map, and the result of this method must return an array of ol.style.Style instances.

As part of this new styling technique, we'll determine how some of the styles will be applied, based on the feature attributes.

We will load a GeoJSON file of some USA cities and provide...