Give feature overlays a style option

examples/image-vector-layer.js

@@ -42,21 +42,17 @@ var map = new ol.Map({
   })
 });
 
-var highlightStyleArray = [new ol.style.Style({
-  stroke: new ol.style.Stroke({
-    color: '#f00',
-    width: 1
-  }),
-  fill: new ol.style.Fill({
-    color: 'rgba(255,0,0,0.1)'
-  })
-})];
-
 var featureOverlay = new ol.FeatureOverlay({
   map: map,
-  styleFunction: function(feature, resolution) {
-    return highlightStyleArray;
-  }
+  style: new ol.style.Style({
+    stroke: new ol.style.Stroke({
+      color: '#f00',
+      width: 1
+    }),
+    fill: new ol.style.Fill({
+      color: 'rgba(255,0,0,0.1)'
+    })
+  })
 });
 
 var highlight;

examples/modify-features.js

@@ -228,7 +228,7 @@ var overlayStyle = (function() {
 })();
 
 var overlay = new ol.FeatureOverlay({
-  styleFunction: overlayStyle
+  style: overlayStyle
 });
 
 var modify = new ol.interaction.Modify({ featureOverlay: overlay });

examples/select-features.js

@@ -15,34 +15,28 @@ var raster = new ol.layer.Tile({
   source: new ol.source.MapQuest({layer: 'sat'})
 });
 
-var unselectedStyle = [new ol.style.Style({
-  fill: new ol.style.Fill({
-    color: 'rgba(255,255,255,0.25)'
-  }),
-  stroke: new ol.style.Stroke({
-    color: '#6666ff'
-  })
-})];
-
-var selectedStyle = [new ol.style.Style({
-  fill: new ol.style.Fill({
-    color: 'rgba(255,255,255,0.5)'
-  })
-})];
-
 var vector = new ol.layer.Vector({
   source: new ol.source.GeoJSON({
     projection: 'EPSG:3857',
     url: 'data/geojson/countries.geojson'
   }),
-  style: unselectedStyle
+  style: new ol.style.Style({
+    fill: new ol.style.Fill({
+      color: 'rgba(255,255,255,0.25)'
+    }),
+    stroke: new ol.style.Stroke({
+      color: '#6666ff'
+    })
+  })
 });
 
 var select = new ol.interaction.Select({
   featureOverlay: new ol.FeatureOverlay({
-    styleFunction: function(feature, resolution) {
-      return selectedStyle;
-    }
+    style: new ol.style.Style({
+      fill: new ol.style.Fill({
+        color: 'rgba(255,255,255,0.5)'
+      })
+    })
   })
 });
 

examples/vector-layer.js

@@ -64,7 +64,7 @@ var highlightStyleCache = {};
 
 var featureOverlay = new ol.FeatureOverlay({
   map: map,
-  styleFunction: function(feature, resolution) {
+  style: function(feature, resolution) {
     var text = resolution < 5000 ? feature.get('name') : '';
     if (!highlightStyleCache[text]) {
       highlightStyleCache[text] = [new ol.style.Style({

src/objectliterals.jsdoc

@@ -566,7 +566,7 @@
  * @typedef {Object} olx.FeatureOverlayOptions
  * @property {Array.<ol.Feature>|ol.Collection|undefined} features Features.
  * @property {ol.Map|undefined} map Map.
- * @property {ol.feature.StyleFunction|undefined} styleFunction Style function.
+ * @property {ol.style.Style|Array.<ol.style.Style>|ol.feature.StyleFunction|undefined} style Feature style.
  */
 
 /**

src/ol/featureoverlay.js

@@ -10,6 +10,7 @@ goog.require('ol.CollectionEventType');
 goog.require('ol.Feature');
 goog.require('ol.feature');
 goog.require('ol.render.EventType');
+goog.require('ol.style.Style');
 
 
 
@@ -52,11 +53,35 @@ ol.FeatureOverlay = function(opt_options) {
    */
   this.postComposeListenerKey_ = null;
 
+  /**
+   * @type {ol.feature.StyleFunction}
+   */
+  var styleFunction;
+  if (goog.isDef(options.style)) {
+    if (goog.isFunction(options.style)) {
+      styleFunction = /** @type {ol.feature.StyleFunction} */ (options.style);
+    } else {
+      /**
+       * @type {Array.<ol.style.Style>}
+       */
+      var styles;
+      if (goog.isArray(options.style)) {
+        styles = options.style;
+      } else {
+        goog.asserts.assertInstanceof(options.style, ol.style.Style);
+        styles = [options.style];
+      }
+      styleFunction = function(feature, resolution) {
+        return styles;
+      };
+    }
+  }
+
   /**
    * @private
    * @type {ol.feature.StyleFunction|undefined}
    */
-  this.styleFunction_ = undefined;
+  this.styleFunction_ = styleFunction;
 
   if (goog.isDef(options.features)) {
     if (goog.isArray(options.features)) {
@@ -69,10 +94,6 @@ ol.FeatureOverlay = function(opt_options) {
     this.setFeatures(new ol.Collection());
   }
 
-  if (goog.isDef(options.styleFunction)) {
-    this.setStyleFunction(options.styleFunction);
-  }
-
   if (goog.isDef(options.map)) {
     this.setMap(options.map);
   }