Merge pull request #21 from fcwheat/fix_heapmap_props

Fix bug where radius, blur, and max were not being used when passed i…

CHANGELOG.md

@@ -1,3 +1,6 @@
+# 1.0.2 Release
+- Fix bug where radius, blur, and max were not being used when passed in as props.
+
 # 1.0.1 Release
 - Fix bug in componentWillUnmount->safeRemoveLayer where getPanes doesn't return anything so .contains is called on undefined. 
 

example/index.js

@@ -9,13 +9,22 @@ class MapExample extends React.Component {
   state = {
     mapHidden: false,
     layerHidden: false,
-    addressPoints
+    addressPoints,
+    radius: 4,
+    blur: 8,
+    max: 0.5,
+    limitAddressPoints: true,
   };
 
-  componentDidMount() {
-    setTimeout(() => {
-      this.setState({ addressPoints: addressPoints.slice(500, 1000) });
-    }, 5000);
+  /**
+   * Toggle limiting the address points to test behavior with refocusing/zooming when data points change
+   */
+  toggleLimitedAddressPoints() {
+    if (this.state.limitAddressPoints) {
+      this.setState({ addressPoints: addressPoints.slice(500, 1000), limitAddressPoints: false });
+    } else {
+      this.setState({ addressPoints, limitAddressPoints: true });
+    }
   }
 
   render() {
@@ -48,6 +57,9 @@ class MapExample extends React.Component {
                 latitudeExtractor={m => m[0]}
                 gradient={gradient}
                 intensityExtractor={m => parseFloat(m[2])}
+                radius={Number(this.state.radius)}
+                blur={Number(this.state.blur)}
+                max={Number.parseFloat(this.state.max)}
               />
             }
           <TileLayer
@@ -65,6 +77,45 @@ class MapExample extends React.Component {
           value="Toggle Layer"
           onClick={() => this.setState({ layerHidden: !this.state.layerHidden })}
         />
+        <input
+          type="button"
+          value="Toggle Limited Data"
+          onClick={this.toggleLimitedAddressPoints.bind(this)}
+        />
+
+        <div>
+          Radius
+          <input
+            type="range"
+            min={1}
+            max={40}
+            value={this.state.radius}
+            onChange={(e) => this.setState({ radius: e.currentTarget.value })}
+          /> {this.state.radius}
+        </div>
+
+        <div>
+          Blur
+          <input
+            type="range"
+            min={1}
+            max={20}
+            value={this.state.blur}
+            onChange={(e) => this.setState({ blur: e.currentTarget.value })}
+          /> {this.state.blur}
+        </div>
+
+        <div>
+          Max
+          <input
+            type="range"
+            min={0.1}
+            max={3}
+            step={0.1}
+            value={this.state.max}
+            onChange={(e) => this.setState({ max: e.currentTarget.value })}
+          /> {this.state.max}
+        </div>
       </div>
     );
   }

lib/HeatmapLayer.js

@@ -126,7 +126,6 @@ var HeatmapLayer = function (_MapLayer) {
     if (this.props.fitBoundsOnLoad) {
       this.fitBounds();
     }
-
     this.attachEvents();
     this.updateHeatmapProps(this.getHeatmapProps(this.props));
   };
@@ -163,20 +162,64 @@ var HeatmapLayer = function (_MapLayer) {
   };
 
   HeatmapLayer.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
-    this.updateHeatmapProps(this.getHeatmapProps(nextProps));
+    var currentProps = this.props;
+    var nextHeatmapProps = this.getHeatmapProps(nextProps);
+
+    this.updateHeatmapGradient(nextHeatmapProps.gradient);
+
+    var hasRadiusUpdated = nextHeatmapProps.radius !== currentProps.radius;
+    var hasBlurUpdated = nextHeatmapProps.blur !== currentProps.blur;
+
+    if (hasRadiusUpdated || hasBlurUpdated) {
+      this.updateHeatmapRadius(nextHeatmapProps.radius, nextHeatmapProps.blur);
+    }
+
+    if (nextHeatmapProps.max !== currentProps.max) {
+      this.updateHeatmapMax(nextHeatmapProps.max);
+    }
   };
 
-  HeatmapLayer.prototype.updateHeatmapProps = function updateHeatmapProps(nextProps) {
-    if (nextProps.radius && (!this.props || nextProps.radius !== this.props.radius)) {
-      this._heatmap.radius(nextProps.radius);
+  /**
+   * Update various heatmap properties like radius, gradient, and max
+   */
+
+
+  HeatmapLayer.prototype.updateHeatmapProps = function updateHeatmapProps(props) {
+    this.updateHeatmapRadius(props.radius, props.blur);
+    this.updateHeatmapGradient(props.gradient);
+    this.updateHeatmapMax(props.max);
+  };
+
+  /**
+   * Update the heatmap's radius and blur (blur is optional)
+   */
+
+
+  HeatmapLayer.prototype.updateHeatmapRadius = function updateHeatmapRadius(radius, blur) {
+    if (radius) {
+      this._heatmap.radius(radius, blur);
     }
+  };
+
+  /**
+   * Update the heatmap's gradient
+   */
 
-    if (nextProps.gradient) {
-      this._heatmap.gradient(nextProps.gradient);
+
+  HeatmapLayer.prototype.updateHeatmapGradient = function updateHeatmapGradient(gradient) {
+    if (gradient) {
+      this._heatmap.gradient(gradient);
     }
+  };
+
+  /**
+   * Update the heatmap's maximum
+   */
+
 
-    if (nextProps.max && (!this.props || nextProps.max !== this.props.max)) {
-      this._heatmap.max(nextProps.max);
+  HeatmapLayer.prototype.updateHeatmapMax = function updateHeatmapMax(maximum) {
+    if (maximum) {
+      this._heatmap.max(maximum);
     }
   };
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-leaflet-heatmap-layer",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A custom layer for heatmaps in react-leaflet",
   "main": "lib/HeatmapLayer.js",
   "scripts": {

src/HeatmapLayer.js

@@ -127,7 +127,6 @@ export default class HeatmapLayer extends MapLayer {
     if (this.props.fitBoundsOnLoad) {
       this.fitBounds();
     }
-
     this.attachEvents();
     this.updateHeatmapProps(this.getHeatmapProps(this.props));
   }
@@ -164,22 +163,57 @@ export default class HeatmapLayer extends MapLayer {
   }
 
   componentWillReceiveProps(nextProps: Object): void {
-    this.updateHeatmapProps(this.getHeatmapProps(nextProps));
+    const currentProps = this.props;
+    const nextHeatmapProps = this.getHeatmapProps(nextProps);
+
+    this.updateHeatmapGradient(nextHeatmapProps.gradient);
+
+    const hasRadiusUpdated = nextHeatmapProps.radius !== currentProps.radius;
+    const hasBlurUpdated = nextHeatmapProps.blur !== currentProps.blur;
+
+    if (hasRadiusUpdated || hasBlurUpdated) {
+      this.updateHeatmapRadius(nextHeatmapProps.radius, nextHeatmapProps.blur);
+    }
+
+    if (nextHeatmapProps.max !== currentProps.max) {
+      this.updateHeatmapMax(nextHeatmapProps.max);
+    }
+
+  }
+
+  /**
+   * Update various heatmap properties like radius, gradient, and max
+   */
+  updateHeatmapProps(props: Object) {
+    this.updateHeatmapRadius(props.radius, props.blur);
+    this.updateHeatmapGradient(props.gradient);
+    this.updateHeatmapMax(props.max);
   }
 
-  updateHeatmapProps(nextProps: Object) {
-    if (nextProps.radius
-      && (!this.props || nextProps.radius !== this.props.radius)) {
-      this._heatmap.radius(nextProps.radius);
+  /**
+   * Update the heatmap's radius and blur (blur is optional)
+   */
+  updateHeatmapRadius(radius: number, blur: ?number): void {
+    if (radius) {
+      this._heatmap.radius(radius, blur);
     }
+  }
 
-    if (nextProps.gradient) {
-      this._heatmap.gradient(nextProps.gradient);
+  /**
+   * Update the heatmap's gradient
+   */
+  updateHeatmapGradient(gradient: Object): void {
+    if (gradient) {
+      this._heatmap.gradient(gradient);
     }
+  }
 
-    if (nextProps.max
-      && (!this.props || nextProps.max !== this.props.max)) {
-      this._heatmap.max(nextProps.max);
+  /**
+   * Update the heatmap's maximum
+   */
+  updateHeatmapMax(maximum: number): void {
+    if (maximum) {
+      this._heatmap.max(maximum);
     }
   }