Use style option in vector layer examples

Providing a styleFunction option still works because the layer property is still named styleFunction.

examples/drag-and-drop.js

@@ -118,7 +118,7 @@ dragAndDropInteraction.on('addfeatures', function(event) {
   });
   map.getLayers().push(new ol.layer.Vector({
     source: vectorSource,
-    styleFunction: styleFunction
+    style: styleFunction
   }));
   var view2D = map.getView().getView2D();
   view2D.fitExtent(vectorSource.getExtent(), map.getSize());

examples/draw-features.js

@@ -15,29 +15,25 @@ var raster = new ol.layer.Tile({
   source: new ol.source.MapQuest({layer: 'sat'})
 });
 
-var styleArray = [new ol.style.Style({
-  fill: new ol.style.Fill({
-    color: 'rgba(255, 255, 255, 0.2)'
-  }),
-  stroke: new ol.style.Stroke({
-    color: '#ffcc33',
-    width: 2
-  }),
-  image: new ol.style.Circle({
-    radius: 7,
-    fill: new ol.style.Fill({
-      color: '#ffcc33'
-    })
-  })
-})];
-
 var source = new ol.source.Vector();
 
 var vector = new ol.layer.Vector({
   source: source,
-  styleFunction: function(feature, resolution) {
+  style: new ol.style.Style({
-    return styleArray;
+    fill: new ol.style.Fill({
-  }
+      color: 'rgba(255, 255, 255, 0.2)'
+    }),
+    stroke: new ol.style.Stroke({
+      color: '#ffcc33',
+      width: 2
+    }),
+    image: new ol.style.Circle({
+      radius: 7,
+      fill: new ol.style.Fill({
+        color: '#ffcc33'
+      })
+    })
+  })
 });
 
 var map = new ol.Map({

examples/geojson.js

@@ -177,7 +177,7 @@ vectorSource.addFeature(new ol.Feature(new ol.geom.Circle([5e6, 7e6], 1e6)));
 
 var vectorLayer = new ol.layer.Vector({
   source: vectorSource,
-  styleFunction: styleFunction
+  style: styleFunction
 });
 
 var map = new ol.Map({

examples/google-map.js

@@ -34,20 +34,15 @@ google.maps.event.addListenerOnce(gmap, 'tilesloaded', function() {
       url: 'data/geojson/countries.geojson',
       projection: 'EPSG:3857'
     }),
-    styleFunction: (function() {
+    style: new ol.style.Style({
-      var styleArray = [new ol.style.Style({
+      fill: new ol.style.Fill({
-        fill: new ol.style.Fill({
+        color: 'rgba(255, 255, 255, 0.6)'
-          color: 'rgba(255, 255, 255, 0.6)'
+      }),
-        }),
+      stroke: new ol.style.Stroke({
-        stroke: new ol.style.Stroke({
+        color: '#319FD3',
-          color: '#319FD3',
+        width: 1
-          width: 1
+      })
-        })
+    })
-      })];
-      return function(feature, resolution) {
-        return styleArray;
-      };
-    }())
   });
 
   var center = gmap.getCenter();

examples/gpx.js

@@ -48,7 +48,7 @@ var vector = new ol.layer.Vector({
     projection: 'EPSG:3857',
     url: 'data/gpx/fells_loop.gpx'
   }),
-  styleFunction: function(feature, resolution) {
+  style: function(feature, resolution) {
     return style[feature.getGeometry().getType()];
   }
 });

examples/igc.js

@@ -63,7 +63,7 @@ var map = new ol.Map({
     }),
     new ol.layer.Vector({
       source: vectorSource,
-      styleFunction: styleFunction
+      style: styleFunction
     })
   ],
   renderer: 'canvas',

examples/kml-earthquakes.html

@@ -55,7 +55,7 @@
           <p id="shortdesc">Demonstrates the use of a Shape symbolizer to render earthquake locations.</p>
           <div id="docs">
             <p>
-              This example parses a KML file and renders the features as a vector layer.  The layer is given a <code>styleFunction</code> that renders earthquake locations with a size relative to their magnitude.
+              This example parses a KML file and renders the features as a vector layer.  The layer is given a <code>style</code> that renders earthquake locations with a size relative to their magnitude.
             </p>
             <p>See the <a href="kml-earthquakes.js" target="_blank">kml-earthquakes.js source</a> to see how this is done.</p>
           </div>

examples/kml-earthquakes.js

@@ -42,7 +42,7 @@ var vector = new ol.layer.Vector({
     projection: 'EPSG:3857',
     url: 'data/kml/2012_Earthquakes_Mag5.kml'
   }),
-  styleFunction: styleFunction
+  style: styleFunction
 });
 
 var raster = new ol.layer.Tile({

examples/kml-timezones.js

@@ -49,7 +49,7 @@ var vector = new ol.layer.Vector({
     projection: 'EPSG:3857',
     url: 'data/kml/timezones.kml'
   }),
-  styleFunction: styleFunction
+  style: styleFunction
 });
 
 var raster = new ol.layer.Tile({

examples/modify-features.js

@@ -161,7 +161,7 @@ var vectorSource = new ol.source.GeoJSON(
 
 var vectorLayer = new ol.layer.Vector({
   source: vectorSource,
-  styleFunction: styleFunction
+  style: styleFunction
 });
 
 var overlayStyle = (function() {

examples/rtree.js

@@ -83,16 +83,14 @@ for (i = 0, ii = extentsByDepth.length; i < ii; ++i) {
 
 var vector = new ol.layer.Vector({
   source: vectorSource,
-  styleFunction: function(feature, resolution) {
+  style: styleArray
-    return styleArray;
-  }
 });
 
 var rtree = new ol.layer.Vector({
   source: new ol.source.Vector({
     features: rtreeExtentFeatures
   }),
-  styleFunction: function(feature, resolution) {
+  style: function(feature, resolution) {
     return feature.get('styleArray');
   }
 });

examples/select-features.js

@@ -35,9 +35,7 @@ var vector = new ol.layer.Vector({
     projection: 'EPSG:3857',
     url: 'data/geojson/countries.geojson'
   }),
-  styleFunction: function(feature, resolution) {
+  style: unselectedStyle
-    return unselectedStyle;
-  }
 });
 
 var select = new ol.interaction.Select({

examples/synthetic-lines.js

@@ -36,20 +36,16 @@ for (i = 0; i < count; ++i) {
   startPoint = endPoint;
 }
 
-var styleArray = [new ol.style.Style({
-  stroke: new ol.style.Stroke({
-    color: '#666666',
-    width: 1
-  })
-})];
-
 var vector = new ol.layer.Vector({
   source: new ol.source.Vector({
     features: features
   }),
-  styleFunction: function(feature, resolution) {
+  style: new ol.style.Style({
-    return styleArray;
+    stroke: new ol.style.Stroke({
-  }
+      color: '#666666',
+      width: 1
+    })
+  })
 });
 
 var view = new ol.View2D({

examples/synthetic-points.js

@@ -46,7 +46,7 @@ var vectorSource = new ol.source.Vector({
 });
 var vector = new ol.layer.Vector({
   source: vectorSource,
-  styleFunction: function(feature, resolution) {
+  style: function(feature, resolution) {
     return styles[feature.get('size')];
   }
 });

examples/topojson.js

@@ -30,7 +30,7 @@ var vector = new ol.layer.Vector({
     projection: 'EPSG:3857',
     url: 'data/topojson/world-110m.json'
   }),
-  styleFunction: function(feature, resolution) {
+  style: function(feature, resolution) {
     // don't want to render the full world polygon, which repeats all countries
     return feature.getId() !== undefined ? styleArray : null;
   }

examples/vector-layer.js

@@ -17,7 +17,7 @@ var vectorLayer = new ol.layer.Vector({
     projection: 'EPSG:3857',
     url: 'data/geojson/countries.geojson'
   }),
-  styleFunction: function(feature, resolution) {
+  style: function(feature, resolution) {
     var text = resolution < 5000 ? feature.get('name') : '';
     if (!styleCache[text]) {
       styleCache[text] = [new ol.style.Style({