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({