title: Styling features based on attribute values
body: <p>How does one style features based on attributes/properties? Currently I am doing the following:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>olLayer = new ol.layer.Vector( {
    source: new ol.source.Vector( {
      features: featureArray
    } ),
    style: ( function() {
  
      var styleR3 = new ol.style.Style( {
        image: new ol.style.Circle( {
          radius: 10,
          fill: new ol.style.Fill( {
            color: 'blue'
          } )
        } )
      } );
  
      var styleCatchAll = new ol.style.Style( {
        image: new ol.style.Circle( {
          radius: 5,
          fill: new ol.style.Fill( {
            color: 'red'
          } )
        } )
      } );
  
      return function( feature, resolution ) {
        if ( feature.attributes[ "Rank" ] === "3" ) {
          return styleR3;
        } else {
          return styleCatchAll;
        }
      };
  
    }() )
  } );</code></pre>
  </div>
  </div>
  </p>
  
  <p>The select features does work but the styleR3 does not get applied.</p>