Choropleth map with OpenLayers using D.R.Y

Question

I'm trying to apply the D.R.Y. philosophy on a choropleth map but something is wrong. Now to stylize a choropleth I use this:

var stroke = new ol.style.Stroke({
    color: 'rgba(255, 255, 255 ,1.0)',
    lineDash: [3, 3],
    lineCap: 'butt',
    lineJoin: 'miter',
    width: 0.75,
})

var pop1 = new ol.style.Style({
      stroke: stroke,
      fill: new ol.style.Fill({
        color: 'rgba(242, 241, 45, 0.75)',
      }),
});

var pop2 = new ol.style.Style({
      stroke: stroke,
      fill: new ol.style.Fill({
        color: 'rgba(238, 211, 34, 0.75)',
      }),
});

var pop3 = new ol.style.Style({
      stroke: stroke,
      fill: new ol.style.Fill({
        color: 'rgba(230, 183, 30, 0.75)',
      }),
});

var pop4 = new ol.style.Style({
      stroke: stroke,
      fill: new ol.style.Fill({
        color: 'rgba(218, 156, 32, 0.75)',
      }),
});

var pop5 = new ol.style.Style({
      stroke: stroke,
      fill: new ol.style.Fill({
        color: 'rgba(202, 131, 35, 0.75)',
      }),
});

var pop6 = new ol.style.Style({
      stroke: stroke,
      fill: new ol.style.Fill({
        color: 'rgba(184, 107, 37, 0.75)',
      }),
});

var pop7 = new ol.style.Style({
      stroke: stroke,
      fill: new ol.style.Fill({
        color: 'rgba(162, 86, 38, 0.75)',
      }),
});

var pop8 = new ol.style.Style({
      stroke: stroke,
      fill: new ol.style.Fill({
        color: 'rgba(139, 66, 37, 0.75)',
      }),
});

var pop9 = new ol.style.Style({
      stroke: stroke,
      fill: new ol.style.Fill({
        color: 'rgba(114, 49, 34, 0.75)',
      }),
});

var istat_2011 = new ol.layer.Vector({
  title: 'Polygons',
  source: new ol.source.Vector({
      url: '....',
      format: new ol.format.GeoJSON(),
  }),
  style: function(feature, resolution) {
    data = feature.get('p1');
    if ( data < 77 ) {
      return [pop1];
    } else if ( data >= 77 && data < 202 ) {
      return [pop2];
    } else if ( data >= 202 && data < 356 ) {
      return [pop3];
    } else if ( data >= 356 && data < 540 ) {
      return [pop4];
    } else if ( data >= 540 && data < 779 ) {
      return [pop5];
    } else if ( data >= 779 && data < 1086 ) {
      return [pop6];
    } else if ( data >= 1086 && data < 1465 ) {
      return [pop7];
    } else if ( data >= 1465 && data < 2210 ) {
      return [pop8];
    } else if ( data >= 2210 ) {
      return [pop9];
    }
  },
});

With this code I can see my map without problems. But if I try to use this, all polygons are black.

var colorGradient = [
  'rgba(242, 241, 45, 0.75)',
  'rgba(238, 211, 34, 0.75)',
  'rgba(230, 183, 30, 0.75)',
  'rgba(218, 156, 32, 0.75)',
  'rgba(202, 131, 35, 0.75)',
  'rgba(184, 107, 37, 0.75)',
  'rgba(162, 86, 38, 0.75)',
  'rgba(139, 66, 37, 0.75)',
  'rgba(114, 49, 34, 0.75)'
]

var istat_2011 = new ol.layer.Vector({
  source: new ol.source.Vector({
      url: '....',
      format: new ol.format.GeoJSON(),
  }),
  style: new ol.style.Style({
      stroke: new ol.style.Stroke({
          color: 'rgba(255, 255, 255 ,1.0)',
          lineDash: [3, 3],
          lineCap: 'butt',
          lineJoin: 'miter',
          width: 0.75,
      }),
      fill: new ol.style.Fill({
        color: function(feature, resolution) {
          data = feature.get('p1');
          if ( data < 77 ) {
            return[colorGradient[0]]
          } else if ( data >= 77 && data < 202 ) {
            return[colorGradient[1]]
          } else if ( data >= 202 && data < 356 ) {
            return[colorGradient[2]]
          } else if ( data >= 356 && data < 540 ) {
            return[colorGradient[3]]
          } else if ( data >= 540 && data < 779 ) {
            return[colorGradient[4]]
          } else if ( data >= 779 && data < 1086 ) {
            return[colorGradient[5]]
          } else if ( data >= 1086 && data < 1465) {
            return[colorGradient[6]]
          } else if ( data >= 1465 && data < 2210 ) {
            return[colorGradient[7]]
          } else if ( data >= 2210 ) {
            return[colorGradient[8]]
          }
        },
      }),
  }),
});

I don't understand why the gradient isn't used. The polygons border is correctly represented but the fill is black.

Answer 1

color cannot be a function, the style must be a function

  style: function(feature, resolution) {
    var data = feature.get('p1');
    var color;
    if ( data < 77 ) {
      color = colorGradient[0];
    } else if ( data >= 77 && data < 202 ) {
      color = colorGradient[1];
    } else if ( data >= 202 && data < 356 ) {
      color = colorGradient[2];
    } else if ( data >= 356 && data < 540 ) {
      color = colorGradient[3];
    } else if ( data >= 540 && data < 779 ) {
      color = colorGradient[4];
    } else if ( data >= 779 && data < 1086 ) {
      color = colorGradient[5];
    } else if ( data >= 1086 && data < 1465) {
      color = colorGradient[6];
    } else if ( data >= 1465 && data < 2210 ) {
      color = colorGradient[7];
    } else if ( data >= 2210 ) {
      color = colorGradient[8];
    }
    return new ol.style.Style({
      stroke: new ol.style.Stroke({
          color: 'rgba(255, 255, 255 ,1.0)',
          lineDash: [3, 3],
          lineCap: 'butt',
          lineJoin: 'miter',
          width: 0.75,
      }),
      fill: new ol.style.Fill({
        color: color
      }),
    });
  }