diff --git a/src/objectliterals.jsdoc b/src/objectliterals.jsdoc
index 75fd408663..1963f7c7d5 100644
--- a/src/objectliterals.jsdoc
+++ b/src/objectliterals.jsdoc
@@ -595,6 +595,9 @@
  * @property {number|undefined} radius Radius size in pixels. Default is `8`.
  * @property {number|undefined} blur Blur size in pixels. Default is `15`.
  * @property {number|undefined} shadow Shadow size in pixels. Default is `250`.
+ * @property {string|function(ol.Feature):number|undefined} weight The feature attribute to use for the
+ *     weight or a function that returns a weight from a feature. Weight values should range from 0 to 1
+ *     (and values outside will be clamped to that range). Default is `weight`.
  * @property {number|undefined} minResolution The minimum resolution
  *      (inclusive) at which this layer will be visible.
  * @property {number|undefined} maxResolution The maximum resolution
diff --git a/src/ol/layer/heatmaplayer.js b/src/ol/layer/heatmaplayer.js
index 7cc999dab9..37f6752b2b 100644
--- a/src/ol/layer/heatmaplayer.js
+++ b/src/ol/layer/heatmaplayer.js
@@ -1,10 +1,10 @@
-// FIXME feature weight property
 goog.provide('ol.layer.Heatmap');
 
 goog.require('goog.asserts');
 goog.require('goog.dom');
 goog.require('goog.dom.TagName');
 goog.require('goog.events');
+goog.require('goog.math');
 goog.require('ol.Object');
 goog.require('ol.layer.Vector');
 goog.require('ol.render.EventType');
@@ -46,34 +46,47 @@ ol.layer.Heatmap = function(opt_options) {
   this.setGradient(goog.isDef(options.gradient) ?
       options.gradient : ol.layer.Heatmap.DEFAULT_GRADIENT);
 
-  var radius = goog.isDef(options.radius) ? options.radius : 8;
-  var blur = goog.isDef(options.blur) ? options.blur : 15;
-  var shadow = goog.isDef(options.shadow) ? options.shadow : 250;
+  var circle = ol.layer.Heatmap.createCircle_(
+      goog.isDef(options.radius) ? options.radius : 8,
+      goog.isDef(options.blur) ? options.blur : 15,
+      goog.isDef(options.shadow) ? options.shadow : 250);
 
-  var style = new ol.style.Style({
-    image: ol.layer.Heatmap.createIcon_(radius, blur, shadow)
+  /**
+   * @type {Array.<Array.<ol.style.Style>>}
+   */
+  var styleCache = new Array(256);
+
+  var weight = goog.isDef(options.weight) ? options.weight : 'weight';
+  var weightFunction;
+  if (goog.isString(weight)) {
+    weightFunction = function(feature) {
+      return feature.get(weight);
+    };
+  } else {
+    weightFunction = weight;
+  }
+  goog.asserts.assert(goog.isFunction(weightFunction));
+
+  this.setStyle(function(feature, resolution) {
+    var weight = weightFunction(feature);
+    var opacity = goog.math.clamp(goog.isDef(weight) ? weight : 1, 0, 1);
+    // cast to 8 bits
+    var index = (255 * opacity) | 0;
+    var style = styleCache[index];
+    if (!goog.isDef(style)) {
+      style = [
+        new ol.style.Style({
+          image: new ol.style.Icon({
+            opacity: opacity,
+            src: circle
+          })
+        })
+      ];
+      styleCache[index] = style;
+    }
+    return style;
   });
 
-  // FIXME: styles are immutable
-  // /**
-  //  * @param {ol.Feature} feature
-  //  * @param {number} resolution
-  //  * @return {number} weight
-  //  */
-  // var weightFunction = function(feature, resolution) {
-  //   var weight = /** @type {number} */ (feature.get('weight'));
-  //   return goog.isDef(weight) ? weight : 1;
-  // };
-  //
-  // var styleArray = [style];
-  // this.setStyle(function(feature, resolution) {
-  //   var image = style.getImage();
-  //   image.setOpacity(weightFunction(feature, resolution));
-  //   return styleArray;
-  // });
-
-  this.setStyle(style);
-
   goog.events.listen(this, ol.render.EventType.RENDER,
       this.handleRender_, false, this);
 
@@ -102,7 +115,7 @@ ol.layer.Heatmap.createGradient_ = function(colors) {
   canvas.height = height;
 
   var gradient = context.createLinearGradient(0, 0, width, height);
-  var step = 1 / colors.length;
+  var step = 1 / (colors.length - 1);
   for (var i = 0, ii = colors.length; i < ii; ++i) {
     gradient.addColorStop(i * step, colors[i]);
   }
@@ -118,10 +131,10 @@ ol.layer.Heatmap.createGradient_ = function(colors) {
  * @param {number} radius Radius size in pixel.
  * @param {number} blur Blur size in pixel.
  * @param {number} shadow Shadow offset size in pixel.
- * @return {ol.style.Icon} icon
+ * @return {string}
  * @private
  */
-ol.layer.Heatmap.createIcon_ = function(radius, blur, shadow) {
+ol.layer.Heatmap.createCircle_ = function(radius, blur, shadow) {
   var canvas =  /** @type {HTMLCanvasElement} */
       (goog.dom.createElement(goog.dom.TagName.CANVAS));
   var context = canvas.getContext('2d');
@@ -134,9 +147,7 @@ ol.layer.Heatmap.createIcon_ = function(radius, blur, shadow) {
   var center = halfSize - shadow;
   context.arc(center, center, radius, 0, Math.PI * 2, true);
   context.fill();
-  return new ol.style.Icon({
-    src: canvas.toDataURL()
-  });
+  return canvas.toDataURL();
 };