From 3d78dd9cb40feeb284d0721029ad897a5a978219 Mon Sep 17 00:00:00 2001 From: Michael Salaverry Date: Mon, 1 Apr 2019 18:47:19 +0300 Subject: [PATCH] Fix: Update heatmap layer when heatmap positions prop changes (#728) * improvement: switched from defining API key in multiple places to one place * now generating random readings * fix: a change in heatmap positions now updates the map accordingly * docs: added comment to explain that the developer should use their own key --- develop/GMap.js | 3 +- develop/GMapHeatmap.js | 27 ++++++++++++++--- develop/GMapLayers.js | 3 +- develop/GMapOptim.js | 3 +- develop/GMapResizable.js | 3 +- develop/config/Google_API_key.js | 2 ++ develop/data/fakeData.js | 23 +++++++++++++++ develop/utils/withSafeInterval.js | 48 +++++++++++++++++++++++++++++++ src/google_map.js | 12 ++++++++ 9 files changed, 116 insertions(+), 8 deletions(-) create mode 100644 develop/config/Google_API_key.js create mode 100644 develop/utils/withSafeInterval.js diff --git a/develop/GMap.js b/develop/GMap.js index 75dde66..f7fde68 100644 --- a/develop/GMap.js +++ b/develop/GMap.js @@ -18,6 +18,7 @@ import GoogleMapReact from '../src'; import ptInBounds from './utils/ptInBounds'; import withStateSelector from './utils/withStateSelector'; +import { GOOGLE_API_KEY } from './config/Google_API_key'; export const gMap = ( { @@ -34,7 +35,7 @@ export const gMap = ( ) => ( ( {markers} @@ -76,11 +84,22 @@ export const gMapHOC = compose( )), withState('hoveredMarkerId', 'setHoveredMarkerId', -1), withState('mapParams', 'setMapParams', { center: susolvkaCoords, zoom: 6 }), + withSafeInterval, + withState('heatmap', 'setHeatmap', heatmapData), // describe events withHandlers({ - onChange: ({ setMapParams }) => + onChange: ({ setMapParams, setSafeInterval, setHeatmap, mapParams }) => ({ center, zoom, bounds }) => { setMapParams({ center, zoom, bounds }); + const boundSetHeatmap = setHeatmap.bind(this); + setSafeInterval( + () => { + boundSetHeatmap( + generateHeatmapData(mapParams.center.lat, mapParams.center.lng) + ); + }, + 3000 + ); }, onChildMouseEnter: ({ setHoveredMarkerId }) => (hoverKey, { id }) => { diff --git a/develop/GMapLayers.js b/develop/GMapLayers.js index 6ca08e7..424de42 100644 --- a/develop/GMapLayers.js +++ b/develop/GMapLayers.js @@ -18,6 +18,7 @@ import SimpleMarker from './markers/SimpleMarker'; import ptInBounds from './utils/ptInBounds'; import withStateSelector from './utils/withStateSelector'; +import { GOOGLE_API_KEY } from './config/Google_API_key'; export const gMap = ( { @@ -34,7 +35,7 @@ export const gMap = ( ) => ( ( ( { + const newFakeReadings = x => { + const newReadings = []; + + for (let i = 0; i <= x; i++) { + newReadings.push({ + weight: getRandomNumberBetween(0.1, 4), + lat: getRandomNumberBetween(lat - 1, lat + 1), + lng: getRandomNumberBetween(lng - 1, lng + 1), + }); + } + return newReadings; + }; + return { + positions: newFakeReadings(10), + options: heatmapData.options, + }; +}; diff --git a/develop/utils/withSafeInterval.js b/develop/utils/withSafeInterval.js new file mode 100644 index 0000000..a979425 --- /dev/null +++ b/develop/utils/withSafeInterval.js @@ -0,0 +1,48 @@ +import { createElement, Component } from 'react'; + +const safeTimerFactory = (setFn, clearFn, propName, hocName) => + Target => { + class SafeTimer extends Component { + constructor(props, context) { + super(props, context); + + this.unsubscribers = []; + this[propName] = this[propName].bind(this); + } + + componentWillUnmount() { + this.unsubscribers.forEach(unsubscribe => unsubscribe()); + + this.unsubscribers = []; + } + + [propName](...args) { + const id = setFn(...args); + const unsubscriber = () => clearFn(id); + + this.unsubscribers.push(unsubscriber); + + return unsubscriber; + } + + render() { + return createElement(Target, { + ...this.props, + [propName]: this[propName], + }); + } + } + + if (process.env.NODE_ENV !== 'production') { + SafeTimer.displayName = `${hocName}`; + } + + return SafeTimer; + }; + +export default safeTimerFactory( + global.setInterval, + global.clearInterval, + 'setSafeInterval', + 'withSafeInterval' +); diff --git a/src/google_map.js b/src/google_map.js index ad013e8..95e1d0f 100644 --- a/src/google_map.js +++ b/src/google_map.js @@ -386,6 +386,18 @@ export default class GoogleMap extends Component { }); this._setLayers(nextProps.layerTypes); } + + if ( + this.heatmap && + !shallowEqual(nextProps.heatmap.positions, this.props.heatmap.positions) + ) { + this.heatmap.setData( + nextProps.heatmap.positions.map(p => ({ + location: new this.maps_.LatLng(p.lat, p.lng), + weight: p.weight, + })) + ); + } } }