Merge pull request #4401 from tschaub/style

Allow style function to return a style.

examples/cluster.js

@@ -38,7 +38,7 @@ var clusters = new ol.layer.Vector({
     var size = feature.get('features').length;
     var style = styleCache[size];
     if (!style) {
-      style = [new ol.style.Style({
+      style = new ol.style.Style({
         image: new ol.style.Circle({
           radius: 10,
           stroke: new ol.style.Stroke({
@@ -54,7 +54,7 @@ var clusters = new ol.layer.Vector({
             color: '#fff'
           })
         })
-      })];
+      });
       styleCache[size] = style;
     }
     return style;

examples/drag-and-drop-image-vector.js

@@ -19,7 +19,7 @@ goog.require('ol.style.Style');
 
 
 var defaultStyle = {
-  'Point': [new ol.style.Style({
+  'Point': new ol.style.Style({
     image: new ol.style.Circle({
       fill: new ol.style.Fill({
         color: 'rgba(255,255,0,0.5)'
@@ -30,14 +30,14 @@ var defaultStyle = {
         width: 1
       })
     })
-  })],
-  'LineString': [new ol.style.Style({
+  }),
+  'LineString': new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: '#f00',
       width: 3
     })
-  })],
-  'Polygon': [new ol.style.Style({
+  }),
+  'Polygon': new ol.style.Style({
     fill: new ol.style.Fill({
       color: 'rgba(0,255,255,0.5)'
     }),
@@ -45,8 +45,8 @@ var defaultStyle = {
       color: '#0ff',
       width: 1
     })
-  })],
-  'MultiPoint': [new ol.style.Style({
+  }),
+  'MultiPoint': new ol.style.Style({
     image: new ol.style.Circle({
       fill: new ol.style.Fill({
         color: 'rgba(255,0,255,0.5)'
@@ -57,14 +57,14 @@ var defaultStyle = {
         width: 1
       })
     })
-  })],
-  'MultiLineString': [new ol.style.Style({
+  }),
+  'MultiLineString': new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: '#0f0',
       width: 3
     })
-  })],
-  'MultiPolygon': [new ol.style.Style({
+  }),
+  'MultiPolygon': new ol.style.Style({
     fill: new ol.style.Fill({
       color: 'rgba(0,0,255,0.5)'
     }),
@@ -72,7 +72,7 @@ var defaultStyle = {
       color: '#00f',
       width: 1
     })
-  })]
+  })
 };
 
 var styleFunction = function(feature, resolution) {

examples/drag-and-drop.js

@@ -18,7 +18,7 @@ goog.require('ol.style.Style');
 
 
 var defaultStyle = {
-  'Point': [new ol.style.Style({
+  'Point': new ol.style.Style({
     image: new ol.style.Circle({
       fill: new ol.style.Fill({
         color: 'rgba(255,255,0,0.5)'
@@ -29,14 +29,14 @@ var defaultStyle = {
         width: 1
       })
     })
-  })],
-  'LineString': [new ol.style.Style({
+  }),
+  'LineString': new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: '#f00',
       width: 3
     })
-  })],
-  'Polygon': [new ol.style.Style({
+  }),
+  'Polygon': new ol.style.Style({
     fill: new ol.style.Fill({
       color: 'rgba(0,255,255,0.5)'
     }),
@@ -44,8 +44,8 @@ var defaultStyle = {
       color: '#0ff',
       width: 1
     })
-  })],
-  'MultiPoint': [new ol.style.Style({
+  }),
+  'MultiPoint': new ol.style.Style({
     image: new ol.style.Circle({
       fill: new ol.style.Fill({
         color: 'rgba(255,0,255,0.5)'
@@ -56,14 +56,14 @@ var defaultStyle = {
         width: 1
       })
     })
-  })],
-  'MultiLineString': [new ol.style.Style({
+  }),
+  'MultiLineString': new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: '#0f0',
       width: 3
     })
-  })],
-  'MultiPolygon': [new ol.style.Style({
+  }),
+  'MultiPolygon': new ol.style.Style({
     fill: new ol.style.Fill({
       color: 'rgba(0,0,255,0.5)'
     }),
@@ -71,7 +71,7 @@ var defaultStyle = {
       color: '#00f',
       width: 1
     })
-  })]
+  })
 };
 
 var styleFunction = function(feature, resolution) {

examples/earthquake-clusters.js

@@ -84,7 +84,7 @@ function styleFunction(feature, resolution) {
   var style;
   var size = feature.get('features').length;
   if (size > 1) {
-    style = [new ol.style.Style({
+    style = new ol.style.Style({
       image: new ol.style.Circle({
         radius: feature.get('radius'),
         fill: new ol.style.Fill({
@@ -96,10 +96,10 @@ function styleFunction(feature, resolution) {
         fill: textFill,
         stroke: textStroke
       })
-    })];
+    });
   } else {
     var originalFeature = feature.get('features')[0];
-    style = [createEarthquakeStyle(originalFeature)];
+    style = createEarthquakeStyle(originalFeature);
   }
   return style;
 }

examples/feature-move-animation.js

@@ -115,9 +115,9 @@ var vectorLayer = new ol.layer.Vector({
   style: function(feature, resolution) {
     // hide geoMarker if animation is active
     if (animating && feature.get('type') === 'geoMarker') {
-      return [];
+      return null;
     }
-    return [styles[feature.get('type')]];
+    return styles[feature.get('type')];
   }
 });
 

examples/geojson.js

@@ -21,25 +21,25 @@ var image = new ol.style.Circle({
 });
 
 var styles = {
-  'Point': [new ol.style.Style({
+  'Point': new ol.style.Style({
     image: image
-  })],
-  'LineString': [new ol.style.Style({
+  }),
+  'LineString': new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: 'green',
       width: 1
     })
-  })],
-  'MultiLineString': [new ol.style.Style({
+  }),
+  'MultiLineString': new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: 'green',
       width: 1
     })
-  })],
-  'MultiPoint': [new ol.style.Style({
+  }),
+  'MultiPoint': new ol.style.Style({
     image: image
-  })],
-  'MultiPolygon': [new ol.style.Style({
+  }),
+  'MultiPolygon': new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: 'yellow',
       width: 1
@@ -47,8 +47,8 @@ var styles = {
     fill: new ol.style.Fill({
       color: 'rgba(255, 255, 0, 0.1)'
     })
-  })],
-  'Polygon': [new ol.style.Style({
+  }),
+  'Polygon': new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: 'blue',
       lineDash: [4],
@@ -57,8 +57,8 @@ var styles = {
     fill: new ol.style.Fill({
       color: 'rgba(0, 0, 255, 0.1)'
     })
-  })],
-  'GeometryCollection': [new ol.style.Style({
+  }),
+  'GeometryCollection': new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: 'magenta',
       width: 2
@@ -73,8 +73,8 @@ var styles = {
         color: 'magenta'
       })
     })
-  })],
-  'Circle': [new ol.style.Style({
+  }),
+  'Circle': new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: 'red',
       width: 2
@@ -82,7 +82,7 @@ var styles = {
     fill: new ol.style.Fill({
       color: 'rgba(255,0,0,0.2)'
     })
-  })]
+  })
 };
 
 var styleFunction = function(feature, resolution) {

examples/gpx.js

@@ -21,7 +21,7 @@ var raster = new ol.layer.Tile({
 });
 
 var style = {
-  'Point': [new ol.style.Style({
+  'Point': new ol.style.Style({
     image: new ol.style.Circle({
       fill: new ol.style.Fill({
         color: 'rgba(255,255,0,0.4)'
@@ -32,19 +32,19 @@ var style = {
         width: 1
       })
     })
-  })],
-  'LineString': [new ol.style.Style({
+  }),
+  'LineString': new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: '#f00',
       width: 3
     })
-  })],
-  'MultiLineString': [new ol.style.Style({
+  }),
+  'MultiLineString': new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: '#0f0',
       width: 3
     })
-  })]
+  })
 };
 
 var vector = new ol.layer.Vector({

examples/igc.js

@@ -27,17 +27,17 @@ var colors = {
 var styleCache = {};
 var styleFunction = function(feature, resolution) {
   var color = colors[feature.get('PLT')];
-  var styleArray = styleCache[color];
-  if (!styleArray) {
-    styleArray = [new ol.style.Style({
+  var style = styleCache[color];
+  if (!style) {
+    style = new ol.style.Style({
       stroke: new ol.style.Stroke({
         color: color,
         width: 3
       })
-    })];
-    styleCache[color] = styleArray;
+    });
+    styleCache[color] = style;
   }
-  return styleArray;
+  return style;
 };
 
 var vectorSource = new ol.source.Vector();

examples/kml-earthquakes.js

@@ -21,7 +21,7 @@ var styleFunction = function(feature, resolution) {
   var radius = 5 + 20 * (magnitude - 5);
   var style = styleCache[radius];
   if (!style) {
-    style = [new ol.style.Style({
+    style = new ol.style.Style({
       image: new ol.style.Circle({
         radius: radius,
         fill: new ol.style.Fill({
@@ -32,7 +32,7 @@ var styleFunction = function(feature, resolution) {
           width: 1
         })
       })
-    })];
+    });
     styleCache[radius] = style;
   }
   return style;

examples/kml-timezones.js

@@ -35,14 +35,14 @@ var styleFunction = function(feature, resolution) {
     delta = 24 - delta;
   }
   var opacity = 0.75 * (1 - delta / 12);
-  return [new ol.style.Style({
+  return new ol.style.Style({
     fill: new ol.style.Fill({
       color: [0xff, 0xff, 0x33, opacity]
     }),
     stroke: new ol.style.Stroke({
       color: '#ffffff'
     })
-  })];
+  });
 };
 
 var vector = new ol.layer.Vector({

examples/layer-z-index.js

@@ -13,7 +13,7 @@ goog.require('ol.style.Style');
 var stroke = new ol.style.Stroke({color: 'black', width: 1});
 
 var styles = {
-  'square': [new ol.style.Style({
+  'square': new ol.style.Style({
     image: new ol.style.RegularShape({
       fill: new ol.style.Fill({color: 'blue'}),
       stroke: stroke,
@@ -21,8 +21,8 @@ var styles = {
       radius: 80,
       angle: Math.PI / 4
     })
-  })],
-  'triangle': [new ol.style.Style({
+  }),
+  'triangle': new ol.style.Style({
     image: new ol.style.RegularShape({
       fill: new ol.style.Fill({color: 'red'}),
       stroke: stroke,
@@ -31,8 +31,8 @@ var styles = {
       rotation: Math.PI / 4,
       angle: 0
     })
-  })],
-  'star': [new ol.style.Style({
+  }),
+  'star': new ol.style.Style({
     image: new ol.style.RegularShape({
       fill: new ol.style.Fill({color: 'green'}),
       stroke: stroke,
@@ -41,13 +41,13 @@ var styles = {
       radius2: 4,
       angle: 0
     })
-  })]
+  })
 };
 
 
-function createLayer(coordinates, styles, zIndex) {
+function createLayer(coordinates, style, zIndex) {
   var feature = new ol.Feature(new ol.geom.Point(coordinates));
-  feature.setStyle(styles);
+  feature.setStyle(style);
 
   var source = new ol.source.Vector({
     features: [feature]

examples/modify-test.js

@@ -19,8 +19,8 @@ var styleFunction = (function() {
     fill: null,
     stroke: new ol.style.Stroke({color: 'orange', width: 2})
   });
-  styles['Point'] = [new ol.style.Style({image: image})];
-  styles['Polygon'] = [new ol.style.Style({
+  styles['Point'] = new ol.style.Style({image: image});
+  styles['Polygon'] = new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: 'blue',
       width: 3
@@ -28,14 +28,14 @@ var styleFunction = (function() {
     fill: new ol.style.Fill({
       color: 'rgba(0, 0, 255, 0.1)'
     })
-  })];
-  styles['MultiLinestring'] = [new ol.style.Style({
+  });
+  styles['MultiLinestring'] = new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: 'green',
       width: 3
     })
-  })];
-  styles['MultiPolygon'] = [new ol.style.Style({
+  });
+  styles['MultiPolygon'] = new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: 'yellow',
       width: 1
@@ -43,8 +43,8 @@ var styleFunction = (function() {
     fill: new ol.style.Fill({
       color: 'rgba(255, 255, 0, 0.1)'
     })
-  })];
-  styles['default'] = [new ol.style.Style({
+  });
+  styles['default'] = new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: 'red',
       width: 3
@@ -53,7 +53,7 @@ var styleFunction = (function() {
       color: 'rgba(255, 0, 0, 0.1)'
     }),
     image: image
-  })];
+  });
   return function(feature, resolution) {
     return styles[feature.getGeometry().getType()] || styles['default'];
   };

examples/regularshape.js

@@ -14,7 +14,7 @@ var stroke = new ol.style.Stroke({color: 'black', width: 2});
 var fill = new ol.style.Fill({color: 'red'});
 
 var styles = {
-  'square': [new ol.style.Style({
+  'square': new ol.style.Style({
     image: new ol.style.RegularShape({
       fill: fill,
       stroke: stroke,
@@ -22,8 +22,8 @@ var styles = {
       radius: 10,
       angle: Math.PI / 4
     })
-  })],
-  'triangle': [new ol.style.Style({
+  }),
+  'triangle': new ol.style.Style({
     image: new ol.style.RegularShape({
       fill: fill,
       stroke: stroke,
@@ -32,8 +32,8 @@ var styles = {
       rotation: Math.PI / 4,
       angle: 0
     })
-  })],
-  'star': [new ol.style.Style({
+  }),
+  'star': new ol.style.Style({
     image: new ol.style.RegularShape({
       fill: fill,
       stroke: stroke,
@@ -42,8 +42,8 @@ var styles = {
       radius2: 4,
       angle: 0
     })
-  })],
-  'cross': [new ol.style.Style({
+  }),
+  'cross': new ol.style.Style({
     image: new ol.style.RegularShape({
       fill: fill,
       stroke: stroke,
@@ -52,8 +52,8 @@ var styles = {
       radius2: 0,
       angle: 0
     })
-  })],
-  'x': [new ol.style.Style({
+  }),
+  'x': new ol.style.Style({
     image: new ol.style.RegularShape({
       fill: fill,
       stroke: stroke,
@@ -62,7 +62,7 @@ var styles = {
       radius2: 0,
       angle: Math.PI / 4
     })
-  })]
+  })
 };
 
 

examples/synthetic-points.js

@@ -24,20 +24,20 @@ for (var i = 0; i < count; ++i) {
 }
 
 var styles = {
-  '10': [new ol.style.Style({
+  '10': new ol.style.Style({
     image: new ol.style.Circle({
       radius: 5,
       fill: new ol.style.Fill({color: '#666666'}),
       stroke: new ol.style.Stroke({color: '#bada55', width: 1})
     })
-  })],
-  '20': [new ol.style.Style({
+  }),
+  '20': new ol.style.Style({
     image: new ol.style.Circle({
       radius: 10,
       fill: new ol.style.Fill({color: '#666666'}),
       stroke: new ol.style.Stroke({color: '#bada55', width: 1})
     })
-  })]
+  })
 };
 
 var vectorSource = new ol.source.Vector({

examples/topojson.js

@@ -16,7 +16,7 @@ var raster = new ol.layer.Tile({
   })
 });
 
-var styleArray = [new ol.style.Style({
+var style = new ol.style.Style({
   fill: new ol.style.Fill({
     color: 'rgba(255, 255, 255, 0.6)'
   }),
@@ -24,7 +24,7 @@ var styleArray = [new ol.style.Style({
     color: '#319FD3',
     width: 1
   })
-})];
+});
 
 var vector = new ol.layer.Vector({
   source: new ol.source.Vector({
@@ -33,7 +33,7 @@ var vector = new ol.layer.Vector({
   }),
   style: function(feature, resolution) {
     // don't want to render the full world polygon, which repeats all countries
-    return feature.getId() !== undefined ? styleArray : null;
+    return feature.getId() !== undefined ? style : null;
   }
 });
 

examples/vector-esri.js

@@ -20,50 +20,42 @@ var layer = '0';
 var esrijsonFormat = new ol.format.EsriJSON();
 
 var styleCache = {
-  'ABANDONED': [
-    new ol.style.Style({
-      fill: new ol.style.Fill({
-        color: 'rgba(225, 225, 225, 255)'
-      }),
-      stroke: new ol.style.Stroke({
-        color: 'rgba(0, 0, 0, 255)',
-        width: 0.4
-      })
+  'ABANDONED': new ol.style.Style({
+    fill: new ol.style.Fill({
+      color: 'rgba(225, 225, 225, 255)'
+    }),
+    stroke: new ol.style.Stroke({
+      color: 'rgba(0, 0, 0, 255)',
+      width: 0.4
     })
-  ],
-  'GAS': [
-    new ol.style.Style({
-      fill: new ol.style.Fill({
-        color: 'rgba(255, 0, 0, 255)'
-      }),
-      stroke: new ol.style.Stroke({
-        color: 'rgba(110, 110, 110, 255)',
-        width: 0.4
-      })
+  }),
+  'GAS': new ol.style.Style({
+    fill: new ol.style.Fill({
+      color: 'rgba(255, 0, 0, 255)'
+    }),
+    stroke: new ol.style.Stroke({
+      color: 'rgba(110, 110, 110, 255)',
+      width: 0.4
     })
-  ],
-  'OIL': [
-    new ol.style.Style({
-      fill: new ol.style.Fill({
-        color: 'rgba(56, 168, 0, 255)'
-      }),
-      stroke: new ol.style.Stroke({
-        color: 'rgba(110, 110, 110, 255)',
-        width: 0
-      })
+  }),
+  'OIL': new ol.style.Style({
+    fill: new ol.style.Fill({
+      color: 'rgba(56, 168, 0, 255)'
+    }),
+    stroke: new ol.style.Stroke({
+      color: 'rgba(110, 110, 110, 255)',
+      width: 0
     })
-  ],
-  'OILGAS': [
-    new ol.style.Style({
-      fill: new ol.style.Fill({
-        color: 'rgba(168, 112, 0, 255)'
-      }),
-      stroke: new ol.style.Stroke({
-        color: 'rgba(110, 110, 110, 255)',
-        width: 0.4
-      })
+  }),
+  'OILGAS': new ol.style.Style({
+    fill: new ol.style.Fill({
+      color: 'rgba(168, 112, 0, 255)'
+    }),
+    stroke: new ol.style.Stroke({
+      color: 'rgba(110, 110, 110, 255)',
+      width: 0.4
     })
-  ]
+  })
 };
 
 var vectorSource = new ol.source.Vector({

examples/vector-labels.js

@@ -107,75 +107,66 @@ var createTextStyle = function(feature, resolution, dom) {
 
 
 // Polygons
-var createPolygonStyleFunction = function() {
-  return function(feature, resolution) {
-    var style = new ol.style.Style({
-      stroke: new ol.style.Stroke({
-        color: 'blue',
-        width: 1
-      }),
-      fill: new ol.style.Fill({
-        color: 'rgba(0, 0, 255, 0.1)'
-      }),
-      text: createTextStyle(feature, resolution, myDom.polygons)
-    });
-    return [style];
-  };
-};
+function polygonStyleFunction(feature, resolution) {
+  return new ol.style.Style({
+    stroke: new ol.style.Stroke({
+      color: 'blue',
+      width: 1
+    }),
+    fill: new ol.style.Fill({
+      color: 'rgba(0, 0, 255, 0.1)'
+    }),
+    text: createTextStyle(feature, resolution, myDom.polygons)
+  });
+}
 
 var vectorPolygons = new ol.layer.Vector({
   source: new ol.source.Vector({
     url: 'data/geojson/polygon-samples.geojson',
     format: new ol.format.GeoJSON()
   }),
-  style: createPolygonStyleFunction()
+  style: polygonStyleFunction
 });
 
 
 // Lines
-var createLineStyleFunction = function() {
-  return function(feature, resolution) {
-    var style = new ol.style.Style({
-      stroke: new ol.style.Stroke({
-        color: 'green',
-        width: 2
-      }),
-      text: createTextStyle(feature, resolution, myDom.lines)
-    });
-    return [style];
-  };
-};
+function lineStyleFunction(feature, resolution) {
+  return new ol.style.Style({
+    stroke: new ol.style.Stroke({
+      color: 'green',
+      width: 2
+    }),
+    text: createTextStyle(feature, resolution, myDom.lines)
+  });
+}
 
 var vectorLines = new ol.layer.Vector({
   source: new ol.source.Vector({
     url: 'data/geojson/line-samples.geojson',
     format: new ol.format.GeoJSON()
   }),
-  style: createLineStyleFunction()
+  style: lineStyleFunction
 });
 
 
 // Points
-var createPointStyleFunction = function() {
-  return function(feature, resolution) {
-    var style = new ol.style.Style({
-      image: new ol.style.Circle({
-        radius: 10,
-        fill: new ol.style.Fill({color: 'rgba(255, 0, 0, 0.1)'}),
-        stroke: new ol.style.Stroke({color: 'red', width: 1})
-      }),
-      text: createTextStyle(feature, resolution, myDom.points)
-    });
-    return [style];
-  };
-};
+function pointStyleFunction(feature, resolution) {
+  return new ol.style.Style({
+    image: new ol.style.Circle({
+      radius: 10,
+      fill: new ol.style.Fill({color: 'rgba(255, 0, 0, 0.1)'}),
+      stroke: new ol.style.Stroke({color: 'red', width: 1})
+    }),
+    text: createTextStyle(feature, resolution, myDom.points)
+  });
+}
 
 var vectorPoints = new ol.layer.Vector({
   source: new ol.source.Vector({
     url: 'data/geojson/point-samples.geojson',
     format: new ol.format.GeoJSON()
   }),
-  style: createPointStyleFunction()
+  style: pointStyleFunction
 });
 
 var map = new ol.Map({
@@ -195,15 +186,15 @@ var map = new ol.Map({
 });
 
 $('#refresh-points').click(function() {
-  vectorPoints.setStyle(createPointStyleFunction());
+  vectorPoints.setStyle(pointStyleFunction);
 });
 
 $('#refresh-lines').click(function() {
-  vectorLines.setStyle(createLineStyleFunction());
+  vectorLines.setStyle(lineStyleFunction);
 });
 
 $('#refresh-polygons').click(function() {
-  vectorPolygons.setStyle(createPolygonStyleFunction());
+  vectorPolygons.setStyle(polygonStyleFunction);
 });
 
 

examples/vector-layer.js

@@ -30,7 +30,6 @@ var style = new ol.style.Style({
     })
   })
 });
-var styles = [style];
 
 var vectorLayer = new ol.layer.Vector({
   source: new ol.source.Vector({
@@ -39,7 +38,7 @@ var vectorLayer = new ol.layer.Vector({
   }),
   style: function(feature, resolution) {
     style.getText().setText(resolution < 5000 ? feature.get('name') : '');
-    return styles;
+    return style;
   }
 });
 
@@ -65,7 +64,7 @@ var featureOverlay = new ol.layer.Vector({
   style: function(feature, resolution) {
     var text = resolution < 5000 ? feature.get('name') : '';
     if (!highlightStyleCache[text]) {
-      highlightStyleCache[text] = [new ol.style.Style({
+      highlightStyleCache[text] = new ol.style.Style({
         stroke: new ol.style.Stroke({
           color: '#f00',
           width: 1
@@ -84,7 +83,7 @@ var featureOverlay = new ol.layer.Vector({
             width: 3
           })
         })
-      })];
+      });
     }
     return highlightStyleCache[text];
   }

examples/vector-osm.js

@@ -15,75 +15,63 @@ goog.require('ol.style.Style');
 
 var styles = {
   'amenity': {
-    'parking': [
-      new ol.style.Style({
-        stroke: new ol.style.Stroke({
-          color: 'rgba(170, 170, 170, 1.0)',
-          width: 1
-        }),
-        fill: new ol.style.Fill({
-          color: 'rgba(170, 170, 170, 0.3)'
-        })
+    'parking': new ol.style.Style({
+      stroke: new ol.style.Stroke({
+        color: 'rgba(170, 170, 170, 1.0)',
+        width: 1
+      }),
+      fill: new ol.style.Fill({
+        color: 'rgba(170, 170, 170, 0.3)'
       })
-    ]
+    })
   },
   'building': {
-    '.*': [
-      new ol.style.Style({
-        zIndex: 100,
-        stroke: new ol.style.Stroke({
-          color: 'rgba(246, 99, 79, 1.0)',
-          width: 1
-        }),
-        fill: new ol.style.Fill({
-          color: 'rgba(246, 99, 79, 0.3)'
-        })
+    '.*': new ol.style.Style({
+      zIndex: 100,
+      stroke: new ol.style.Stroke({
+        color: 'rgba(246, 99, 79, 1.0)',
+        width: 1
+      }),
+      fill: new ol.style.Fill({
+        color: 'rgba(246, 99, 79, 0.3)'
       })
-    ]
+    })
   },
   'highway': {
-    'service': [
-      new ol.style.Style({
-        stroke: new ol.style.Stroke({
-          color: 'rgba(255, 255, 255, 1.0)',
-          width: 2
-        })
+    'service': new ol.style.Style({
+      stroke: new ol.style.Stroke({
+        color: 'rgba(255, 255, 255, 1.0)',
+        width: 2
       })
-    ],
-    '.*': [
-      new ol.style.Style({
-        stroke: new ol.style.Stroke({
-          color: 'rgba(255, 255, 255, 1.0)',
-          width: 3
-        })
+    }),
+    '.*': new ol.style.Style({
+      stroke: new ol.style.Stroke({
+        color: 'rgba(255, 255, 255, 1.0)',
+        width: 3
       })
-    ]
+    })
   },
   'landuse': {
-    'forest|grass|allotments': [
-      new ol.style.Style({
-        stroke: new ol.style.Stroke({
-          color: 'rgba(140, 208, 95, 1.0)',
-          width: 1
-        }),
-        fill: new ol.style.Fill({
-          color: 'rgba(140, 208, 95, 0.3)'
-        })
+    'forest|grass|allotments': new ol.style.Style({
+      stroke: new ol.style.Stroke({
+        color: 'rgba(140, 208, 95, 1.0)',
+        width: 1
+      }),
+      fill: new ol.style.Fill({
+        color: 'rgba(140, 208, 95, 0.3)'
       })
-    ]
+    })
   },
   'natural': {
-    'tree': [
-      new ol.style.Style({
-        image: new ol.style.Circle({
-          radius: 2,
-          fill: new ol.style.Fill({
-            color: 'rgba(140, 208, 95, 1.0)'
-          }),
-          stroke: null
-        })
+    'tree': new ol.style.Style({
+      image: new ol.style.Circle({
+        radius: 2,
+        fill: new ol.style.Fill({
+          color: 'rgba(140, 208, 95, 1.0)'
+        }),
+        stroke: null
       })
-    ]
+    })
   }
 };
 

src/ol/feature.js

@@ -290,7 +290,8 @@ ol.Feature.prototype.setGeometryName = function(name) {
  * resolution. The `this` keyword inside the function references the
  * {@link ol.Feature} to be styled.
  *
- * @typedef {function(this: ol.Feature, number): Array.<ol.style.Style>}
+ * @typedef {function(this: ol.Feature, number):
+ *     (ol.style.Style|Array.<ol.style.Style>)}
  * @api stable
  */
 ol.FeatureStyleFunction;

src/ol/renderer/canvas/canvasvectorlayerrenderer.js

@@ -321,7 +321,8 @@ ol.renderer.canvas.VectorLayer.prototype.prepareFrame =
  * @param {ol.Feature} feature Feature.
  * @param {number} resolution Resolution.
  * @param {number} pixelRatio Pixel ratio.
- * @param {Array.<ol.style.Style>} styles Array of styles
+ * @param {(ol.style.Style|Array.<ol.style.Style>)} styles The style or array of
+ *     styles.
  * @param {ol.render.canvas.ReplayGroup} replayGroup Replay group.
  * @return {boolean} `true` if an image is loading.
  */
@@ -330,10 +331,17 @@ ol.renderer.canvas.VectorLayer.prototype.renderFeature =
   if (!styles) {
     return false;
   }
-  var i, ii, loading = false;
-  for (i = 0, ii = styles.length; i < ii; ++i) {
+  var loading = false;
+  if (goog.isArray(styles)) {
+    for (var i = 0, ii = styles.length; i < ii; ++i) {
+      loading = ol.renderer.vector.renderFeature(
+          replayGroup, feature, styles[i],
+          ol.renderer.vector.getSquaredTolerance(resolution, pixelRatio),
+          this.handleStyleImageChange_, this) || loading;
+    }
+  } else {
     loading = ol.renderer.vector.renderFeature(
-        replayGroup, feature, styles[i],
+        replayGroup, feature, styles,
         ol.renderer.vector.getSquaredTolerance(resolution, pixelRatio),
         this.handleStyleImageChange_, this) || loading;
   }

src/ol/renderer/canvas/canvasvectortilelayerrenderer.js

@@ -201,13 +201,20 @@ ol.renderer.canvas.VectorTileLayer.prototype.createReplayGroup = function(tile,
    */
   function renderFeature(feature) {
     var styles;
-    if (feature.getStyleFunction()) {
+    var styleFunction = feature.getStyleFunction();
+    if (styleFunction) {
       goog.asserts.assertInstanceof(feature, ol.Feature, 'Got an ol.Feature');
-      styles = feature.getStyleFunction().call(feature, resolution);
-    } else if (layer.getStyleFunction()) {
-      styles = layer.getStyleFunction()(feature, resolution);
+      styles = styleFunction.call(feature, resolution);
+    } else {
+      styleFunction = layer.getStyleFunction();
+      if (styleFunction) {
+        styles = styleFunction(feature, resolution);
+      }
     }
     if (styles) {
+      if (!goog.isArray(styles)) {
+        styles = [styles];
+      }
       var dirty = this.renderFeature(feature, squaredTolerance, styles,
           replayGroup);
       this.dirty_ = this.dirty_ || dirty;
@@ -423,7 +430,8 @@ ol.renderer.canvas.VectorTileLayer.prototype.prepareFrame =
 /**
  * @param {ol.Feature|ol.render.Feature} feature Feature.
  * @param {number} squaredTolerance Squared tolerance.
- * @param {Array.<ol.style.Style>} styles Array of styles
+ * @param {(ol.style.Style|Array.<ol.style.Style>)} styles The style or array of
+ *     styles.
  * @param {ol.render.canvas.ReplayGroup} replayGroup Replay group.
  * @return {boolean} `true` if an image is loading.
  */
@@ -432,10 +440,16 @@ ol.renderer.canvas.VectorTileLayer.prototype.renderFeature =
   if (!styles) {
     return false;
   }
-  var i, ii, loading = false;
-  for (i = 0, ii = styles.length; i < ii; ++i) {
+  var loading = false;
+  if (goog.isArray(styles)) {
+    for (var i = 0, ii = styles.length; i < ii; ++i) {
+      loading = ol.renderer.vector.renderFeature(
+          replayGroup, feature, styles[i], squaredTolerance,
+          this.handleStyleImageChange_, this) || loading;
+    }
+  } else {
     loading = ol.renderer.vector.renderFeature(
-        replayGroup, feature, styles[i], squaredTolerance,
+        replayGroup, feature, styles, squaredTolerance,
         this.handleStyleImageChange_, this) || loading;
   }
   return loading;

src/ol/renderer/dom/domvectorlayerrenderer.js

@@ -329,7 +329,8 @@ ol.renderer.dom.VectorLayer.prototype.prepareFrame =
  * @param {ol.Feature} feature Feature.
  * @param {number} resolution Resolution.
  * @param {number} pixelRatio Pixel ratio.
- * @param {Array.<ol.style.Style>} styles Array of styles
+ * @param {(ol.style.Style|Array.<ol.style.Style>)} styles The style or array of
+ *     styles.
  * @param {ol.render.canvas.ReplayGroup} replayGroup Replay group.
  * @return {boolean} `true` if an image is loading.
  */
@@ -338,10 +339,17 @@ ol.renderer.dom.VectorLayer.prototype.renderFeature =
   if (!styles) {
     return false;
   }
-  var i, ii, loading = false;
-  for (i = 0, ii = styles.length; i < ii; ++i) {
+  var loading = false;
+  if (goog.isArray(styles)) {
+    for (var i = 0, ii = styles.length; i < ii; ++i) {
+      loading = ol.renderer.vector.renderFeature(
+          replayGroup, feature, styles[i],
+          ol.renderer.vector.getSquaredTolerance(resolution, pixelRatio),
+          this.handleStyleImageChange_, this) || loading;
+    }
+  } else {
     loading = ol.renderer.vector.renderFeature(
-        replayGroup, feature, styles[i],
+        replayGroup, feature, styles,
         ol.renderer.vector.getSquaredTolerance(resolution, pixelRatio),
         this.handleStyleImageChange_, this) || loading;
   }

src/ol/renderer/webgl/webglvectorlayerrenderer.js

@@ -297,7 +297,8 @@ ol.renderer.webgl.VectorLayer.prototype.prepareFrame =
  * @param {ol.Feature} feature Feature.
  * @param {number} resolution Resolution.
  * @param {number} pixelRatio Pixel ratio.
- * @param {Array.<ol.style.Style>} styles Array of styles
+ * @param {(ol.style.Style|Array.<ol.style.Style>)} styles The style or array of
+ *     styles.
  * @param {ol.render.webgl.ReplayGroup} replayGroup Replay group.
  * @return {boolean} `true` if an image is loading.
  */
@@ -306,10 +307,17 @@ ol.renderer.webgl.VectorLayer.prototype.renderFeature =
   if (!styles) {
     return false;
   }
-  var i, ii, loading = false;
-  for (i = 0, ii = styles.length; i < ii; ++i) {
+  var loading = false;
+  if (goog.isArray(styles)) {
+    for (var i = 0, ii = styles.length; i < ii; ++i) {
+      loading = ol.renderer.vector.renderFeature(
+          replayGroup, feature, styles[i],
+          ol.renderer.vector.getSquaredTolerance(resolution, pixelRatio),
+          this.handleStyleImageChange_, this) || loading;
+    }
+  } else {
     loading = ol.renderer.vector.renderFeature(
-        replayGroup, feature, styles[i],
+        replayGroup, feature, styles,
         ol.renderer.vector.getSquaredTolerance(resolution, pixelRatio),
         this.handleStyleImageChange_, this) || loading;
   }

src/ol/style/style.js

@@ -199,7 +199,7 @@ ol.style.Style.prototype.setZIndex = function(zIndex) {
  * {@link ol.style.Style}. This way e.g. a vector layer can be styled.
  *
  * @typedef {function((ol.Feature|ol.render.Feature), number):
- *     Array.<ol.style.Style>}
+ *     (ol.style.Style|Array.<ol.style.Style>)}
  * @api
  */
 ol.style.StyleFunction;