diff --git a/CHANGELOG.md b/CHANGELOG.md index 35dfbdf..6f3bc9f 100644 --- a/CHANGELOG.md +++ b/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. diff --git a/example/index.js b/example/index.js index 4d80616..e417e4f 100644 --- a/example/index.js +++ b/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)} /> } this.setState({ layerHidden: !this.state.layerHidden })} /> + + +
+ Radius + this.setState({ radius: e.currentTarget.value })} + /> {this.state.radius} +
+ +
+ Blur + this.setState({ blur: e.currentTarget.value })} + /> {this.state.blur} +
+ +
+ Max + this.setState({ max: e.currentTarget.value })} + /> {this.state.max} +
); } diff --git a/lib/HeatmapLayer.js b/lib/HeatmapLayer.js index 4402908..ec33e98 100644 --- a/lib/HeatmapLayer.js +++ b/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); } }; diff --git a/package.json b/package.json index 8b327f8..e10c195 100644 --- a/package.json +++ b/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": { diff --git a/src/HeatmapLayer.js b/src/HeatmapLayer.js index c1164b3..62071f2 100644 --- a/src/HeatmapLayer.js +++ b/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); } }