Merge pull request #3275 from fredj/heatmap-properties

Add ol.layer.Heatmap#blur getter and setter

examples/heatmap-earthquakes.html

@@ -45,6 +45,8 @@
           <form>
             <label>radius size</label>
             <input id="radius" type="range" min="1" max="50" step="1" value="5"/>
+            <label>blur size</label>
+            <input id="blur" type="range" min="1" max="50" step="1" value="15"/>
           </form>
         </div>
 

examples/heatmap-earthquakes.js

@@ -5,6 +5,7 @@ goog.require('ol.layer.Tile');
 goog.require('ol.source.KML');
 goog.require('ol.source.Stamen');
 
+var blur = $('#blur');
 var radius = $('#radius');
 
 var vector = new ol.layer.Heatmap({
@@ -13,6 +14,7 @@ var vector = new ol.layer.Heatmap({
     projection: 'EPSG:3857',
     url: 'data/kml/2012_Earthquakes_Mag5.kml'
   }),
+  blur: parseInt(blur.val(), 10),
   radius: parseInt(radius.val(), 10)
 });
 
@@ -41,6 +43,10 @@ var map = new ol.Map({
 });
 
 
+blur.on('input', function() {
+  vector.setBlur(parseInt(blur.val(), 10));
+});
+
 radius.on('input', function() {
   vector.setRadius(parseInt(radius.val(), 10));
 });

src/ol/layer/heatmaplayer.js

@@ -16,6 +16,7 @@ goog.require('ol.style.Style');
  * @enum {string}
  */
 ol.layer.HeatmapLayerProperty = {
+  BLUR: 'blur',
   GRADIENT: 'gradient',
   RADIUS: 'radius'
 };
@@ -53,12 +54,6 @@ ol.layer.Heatmap = function(opt_options) {
    */
   this.gradient_ = null;
 
-  /**
-   * @private
-   * @type {number}
-   */
-  this.blur_ = goog.isDef(options.blur) ? options.blur : 15;
-
   /**
    * @private
    * @type {number}
@@ -81,15 +76,20 @@ ol.layer.Heatmap = function(opt_options) {
       ol.Object.getChangeEventType(ol.layer.HeatmapLayerProperty.GRADIENT),
       this.handleGradientChanged_, false, this);
 
-  goog.events.listen(this,
-      ol.Object.getChangeEventType(ol.layer.HeatmapLayerProperty.RADIUS),
-      this.handleStyleChanged_, false, this);
-
   this.setGradient(goog.isDef(options.gradient) ?
       options.gradient : ol.layer.Heatmap.DEFAULT_GRADIENT);
 
+  this.setBlur(goog.isDef(options.blur) ? options.blur : 15);
+
   this.setRadius(goog.isDef(options.radius) ? options.radius : 8);
 
+  goog.events.listen(this, [
+    ol.Object.getChangeEventType(ol.layer.HeatmapLayerProperty.BLUR),
+    ol.Object.getChangeEventType(ol.layer.HeatmapLayerProperty.RADIUS)
+  ], this.handleStyleChanged_, false, this);
+
+  this.handleStyleChanged_();
+
   var weight = goog.isDef(options.weight) ? options.weight : 'weight';
   var weightFunction;
   if (goog.isString(weight)) {
@@ -102,6 +102,8 @@ ol.layer.Heatmap = function(opt_options) {
   goog.asserts.assert(goog.isFunction(weightFunction));
 
   this.setStyle(goog.bind(function(feature, resolution) {
+    goog.asserts.assert(!goog.isNull(this.styleCache_));
+    goog.asserts.assert(goog.isDef(this.circleImage_));
     var weight = weightFunction(feature);
     var opacity = goog.isDef(weight) ? goog.math.clamp(weight, 0, 1) : 1;
     // cast to 8 bits
@@ -168,11 +170,13 @@ ol.layer.Heatmap.createGradient_ = function(colors) {
  */
 ol.layer.Heatmap.prototype.createCircle_ = function() {
   var radius = this.getRadius();
-  var halfSize = radius + this.blur_ + 1;
+  var blur = this.getBlur();
+  goog.asserts.assert(goog.isDef(radius) && goog.isDef(blur));
+  var halfSize = radius + blur + 1;
   var size = 2 * halfSize;
   var context = ol.dom.createCanvasContext2D(size, size);
   context.shadowOffsetX = context.shadowOffsetY = this.shadow_;
-  context.shadowBlur = this.blur_;
+  context.shadowBlur = blur;
   context.shadowColor = '#000';
   context.beginPath();
   var center = halfSize - this.shadow_;
@@ -182,6 +186,20 @@ ol.layer.Heatmap.prototype.createCircle_ = function() {
 };
 
 
+/**
+ * @return {number} Blur size in pixels.
+ * @api
+ * @observable
+ */
+ol.layer.Heatmap.prototype.getBlur = function() {
+  return /** @type {number} */ (this.get(ol.layer.HeatmapLayerProperty.BLUR));
+};
+goog.exportProperty(
+    ol.layer.Heatmap.prototype,
+    'getBlur',
+    ol.layer.Heatmap.prototype.getBlur);
+
+
 /**
  * @return {Array.<string>} Colors.
  * @api
@@ -235,6 +253,7 @@ ol.layer.Heatmap.prototype.handleStyleChanged_ = function() {
  */
 ol.layer.Heatmap.prototype.handleRender_ = function(event) {
   goog.asserts.assert(event.type == ol.render.EventType.RENDER);
+  goog.asserts.assert(!goog.isNull(this.gradient_));
   var context = event.context;
   var canvas = context.canvas;
   var image = context.getImageData(0, 0, canvas.width, canvas.height);
@@ -252,6 +271,20 @@ ol.layer.Heatmap.prototype.handleRender_ = function(event) {
 };
 
 
+/**
+ * @param {number} blur Blur size in pixels.
+ * @api
+ * @observable
+ */
+ol.layer.Heatmap.prototype.setBlur = function(blur) {
+  this.set(ol.layer.HeatmapLayerProperty.BLUR, blur);
+};
+goog.exportProperty(
+    ol.layer.Heatmap.prototype,
+    'setBlur',
+    ol.layer.Heatmap.prototype.setBlur);
+
+
 /**
  * @param {Array.<string>} colors Gradient.
  * @api