Show how to use ol.Feature#setStyleFunction in the icon example

examples/icon.js

@@ -1,18 +1,21 @@
+goog.require('ol.Feature');
 goog.require('ol.Map');
 goog.require('ol.Overlay');
 goog.require('ol.View2D');
+goog.require('ol.geom.Point');
 goog.require('ol.layer.Tile');
 goog.require('ol.layer.Vector');
-goog.require('ol.source.GeoJSON');
 goog.require('ol.source.TileJSON');
+goog.require('ol.source.Vector');
 goog.require('ol.style.Icon');
 goog.require('ol.style.Style');
 
 
-var raster = new ol.layer.Tile({
-  source: new ol.source.TileJSON({
-    url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.jsonp'
-  })
+var iconFeature = new ol.Feature({
+  geometry: new ol.geom.Point([0, 0]),
+  name: 'Null Island',
+  population: 4000,
+  rainfall: 500
 });
 
 var styleArray = [new ol.style.Style({
@@ -24,31 +27,26 @@ var styleArray = [new ol.style.Style({
   }))
 })];
 
-var vector = new ol.layer.Vector({
-  source: new ol.source.GeoJSON(/** @type {olx.source.GeoJSONOptions} */ ({
-    object: {
-      'type': 'FeatureCollection',
-      'features': [{
-        'type': 'Feature',
-        'properties': {
-          'name': 'Null Island',
-          'population': 4000,
-          'rainfall': 500
-        },
-        'geometry': {
-          'type': 'Point',
-          'coordinates': [0, 0]
-        }
-      }]
-    }
-  })),
-  styleFunction: function(feature, resolution) {
-    return styleArray;
-  }
+iconFeature.setStyleFunction(function(resolution) {
+  return styleArray;
+});
+
+var vectorSource = new ol.source.Vector({
+  features: [iconFeature]
+});
+
+var vectorLayer = new ol.layer.Vector({
+  source: vectorSource
+});
+
+var rasterLayer = new ol.layer.Tile({
+  source: new ol.source.TileJSON({
+    url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.jsonp'
+  })
 });
 
 var map = new ol.Map({
-  layers: [raster, vector],
+  layers: [rasterLayer, vectorLayer],
   renderer: 'canvas',
   target: document.getElementById('map'),
   view: new ol.View2D({