Added heatmap functionality #441

ZAKdev · 2017-09-10T12:01:21Z

Hi, I have added heatmap functionality which is from default google map api.

How it works
Just need to pass prop of heatmap with GoogleMapReact component and all heatmap options are available like radius, opacity and gradient.

Example

<GoogleMapComp
  lat={this.props.lat}
  lng={this.props.lng}
  zoom={this.props.zoom}
  products={this.props.products}
  heatmap={{
    positions: [{
        lat: 24.075,
        lng: 54.947,
      },
      {
        lat: 24.075,
        lng: 54.940,
      },
      {
        lat: 24.075,
        lng: 54.943,
      },
      {
        lat: 24.075,
        lng: 54.933,
      },
      {
        lat: 24.075,
        lng: 54.923,
      }],
      options: {
        radius: 20,
        opacity: 0.7,
        gradient: [
          'rgba(0, 255, 255, 0)',
          'rgba(0, 255, 255, 1)',
          'rgba(0, 191, 255, 1)',
          'rgba(0, 127, 255, 1)',
          'rgba(0, 63, 255, 1)',
          'rgba(0, 0, 255, 1)',
          'rgba(0, 0, 223, 1)',
          'rgba(0, 0, 191, 1)',
          'rgba(0, 0, 159, 1)',
          'rgba(0, 0, 127, 1)',
          'rgba(63, 0, 91, 1)',
          'rgba(127, 0, 63, 1)',
          'rgba(191, 0, 31, 1)',
          'rgba(255, 0, 0, 1)'
        ]
      }
    }
  }
</GoogleMapComp>

itsmichaeldiego

This is great, would you mind creating tests and adding an example?

ZAKdev · 2017-12-21T09:54:58Z

No problem @itsmichaeldiego, i will write tests and add example asap.

itsmichaeldiego

Looking good generally, I left a couple of comments

itsmichaeldiego · 2017-12-21T15:13:55Z

develop/GMapHeatmap.js

@@ -0,0 +1,103 @@
+/* eslint-disable */


Could we enable eslint here and fix the errors?

itsmichaeldiego · 2017-12-21T15:14:10Z

develop/GMapHeatmap.js

@@ -0,0 +1,103 @@
+/* eslint-disable */
+import React, { PropTypes } from 'react';
+import compose from 'recompose/compose';


Lets put everything from recompose in one import as:

import { compose, defaultProps, withHandlers, withState, withContext, withProps, withPropsOnChange, } from 'recompose';

itsmichaeldiego · 2017-12-21T15:15:17Z

develop/GMapHeatmap.js

+import GoogleMapReact from '../src';
+import SimpleMarker from './markers/SimpleMarker';
+import { createSelector } from 'reselect';
+import { susolvkaCoords, generateMarkers, heatmapData } from './data/fakeData';


Lets put first global imports and then local imports, meaning that we should have something like:

import React, { PropTypes } from 'react'; import { blablabla } from 'recompose'; import { createSelector } from 'reselect'; import GoogleMapReact from '../src'; import SimpleMarker from './markers/SimpleMarker'; import withStateSelector from './utils/withStateSelector'; import ptInBounds from './utils/ptInBounds'; import { susolvkaCoords, generateMarkers, heatmapData } from './data/fakeData';

itsmichaeldiego · 2017-12-21T15:16:53Z

src/google_map.js

@@ -10,6 +10,7 @@ import MarkerDispatcher from './marker_dispatcher';
 import GoogleMapMap from './google_map_map';
 import GoogleMapMarkers from './google_map_markers';
 import GoogleMapMarkersPrerender from './google_map_markers_prerender';
+import * as GoogleHeatmap from './google_heatmap';


Lets specify what we want to import, instead of importing everything, just to be sure.

itsmichaeldiego · 2017-12-21T15:17:16Z

src/utils/loaders/google_map_loader.js

@@ -63,7 +63,7 @@ export default function googleMapLoader(bootstrapURLKeys) {
    );

    $script_(
-      `https://maps.googleapis.com/maps/api/js?callback=_$_google_map_initialize_$_${queryString}`,
+      `https://maps.googleapis.com/maps/api/js?callback=_$_google_map_initialize_$_${queryString}&libraries=visualization`,


Could you add information of why this change?

visualization library includes the HeatmapLayer
Here is the reference https://developers.google.com/maps/documentation/javascript/visualization

@ZAKdev That is good, but shouldn't we add this optional if the user sets heatmap as true? Sorry if I am getting it wrong.

@itsmichaeldiego, I can check heatmap prop if its not defined then no need to load visualization library, but this approach will work only if user has single map on a page because google map api load once for all maps so user may can face some problem.

@ZAKdev That is a good catch. I am wondering if adding visualization that includes the HeatmapLayer if we don't want Heatmap would make the performance worse 🤔

@ZAKdev Let me take a look, but what about if the user just set the library when using bootstrapURLKeys? This is called only once when the map is loaded as it contains the key for it, there you can set for example heatmap: true and it won't be initialized twice.

@itsmichaeldiego, this is what i was doing before, but i am assuming a scenario where user has more then one map and any of the map has heatmap at this point it will throw exception because we are initializing map based on user first map.

If first map is the heatmap then every map will work smoothly.

@ZAKdev Oh right, so unless we find a workaround we could request the users to set heatmap: true to every map if they want at least one of the maps to have this functionality. But should we written in the docs for sure.

Otherwise we would have to force the user to share the same bootstrapURLKeys in all the maps, and that is something we wouldn't want to lose.

@itsmichaeldiego i will commit soon for this.

@ZAKdev You rock!

…y for components

ZAKdev · 2018-01-09T17:41:36Z

@itsmichaeldiego, i have added prop called heatmapLibrary it can be true and false for enable and disable visualization library.

if everything works fine for you so i can add prop heatmapLibrary={true} with every component.

itsmichaeldiego · 2018-01-18T00:49:33Z

@ZAKdev Great work man! So the outcome is that we should pass heatmapLibrary={true} to all the maps if at least one of them is using heatmap, right?

In that case, adding that to the docs would be great, then I will merge this and we can make a new release!

ZAKdev · 2018-01-18T07:10:11Z

@itsmichaeldiego i am going to add heatmapLibrary={true} for all our demo maps because we have demo for heatmap as well.

itsmichaeldiego · 2018-01-18T20:53:47Z

@ZAKdev Awesome dude, let me know and I will merge and make a release! Keep in mind we've some little conflicts with the last PR I merged

…tmap

ZAKdev · 2018-01-18T22:40:31Z

@itsmichaeldiego, i found some issues in master

itsmichaeldiego · 2018-01-24T01:32:16Z

@ZAKdev Good catch, that has already been fixed, do you mind pulling the latest version and checking again?

ZAKdev · 2018-01-24T08:18:14Z

@itsmichaeldiego now we are good to go, you can add heatmapLibrary={true} in README

itsmichaeldiego · 2018-01-24T22:53:49Z

@ZAKdev Awesome! Thanks!! Changes are looking good, would you mind including that in the README? So that PR handles all the work? LMK and I will merge it asap and publish a new version!

ZAKdev · 2018-01-26T11:24:36Z

@itsmichaeldiego, i have added it in README with example code, please let me know if i needs to change something.

itsmichaeldiego · 2018-01-26T20:37:27Z

develop/GMapHeatmap.js

+    onChildMouseEnter={onChildMouseEnter}
+    onChildMouseLeave={onChildMouseLeave}
+    resetBoundsOnResize={true}
+    apiKey={'AIzaSyC-BebC7ChnHPzxQm7DAHYFMCqR5H3Jlps'}


@ZAKdev What is this apiKey here for?

@itsmichaeldiego, we can remove it, its not doing anything.

@itsmichaeldiego, i removed.

@ZAKdev If I am not mistaken I believe there are a few more lines that could be removed

@itsmichaeldiego i removed unnecessary props

Great dude! Thanks

calvintychan · 2018-02-10T06:25:54Z

Hey guys, any chance we can merge this feature soon? :)

itsmichaeldiego · 2018-02-12T21:42:27Z

Yes @calvintychan I am merging it but we will have to test with your heatmaps

itsmichaeldiego · 2018-02-12T22:28:14Z

@calvintychan @ZAKdev Merged, could you guys test it out with your heatmaps and let me know?

ZAKdev · 2018-02-13T07:14:30Z

Thanks @itsmichaeldiego, I will check everything soon and update you here.

Hi @calvintychan, if you need any of guidance for using this feature please feel free to ask, i am available here for help.

itsmichaeldiego · 2018-02-14T01:09:06Z

Thanks @ZAKdev, looking forward to it

ZAKdev · 2018-02-14T14:31:54Z

@itsmichaeldiego, Heatmap is working as expected 💯
Now lets wait for @calvintychan feedback.

ribeiroguilherme · 2018-04-07T12:10:40Z

@ZAKdev @itsmichaeldiego And what about support locations with weight? Is there any plans to implement it?
e.g.
var heatMapData = [ {location: new google.maps.LatLng(37.782, -122.447), weight: 0.5}, ....

ZAKdev · 2018-04-11T15:53:29Z

@ribeiroguilherme, Good idea, i didn't really know we can define weight as well, i will add it soon :)

lock · 2019-12-01T11:14:51Z

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

ZAKdev added 5 commits September 9, 2017 06:14

Added functionality of heatmap

1d37650

Added options for heatmap

47380b4

default heatmap prop change to object

e70333c

resolve linting issues

548f7c0

resolve linting

85ebf8a

itsmichaeldiego reviewed Dec 20, 2017

View reviewed changes

Added demo for heatmap

63ef3d1

itsmichaeldiego reviewed Dec 21, 2017

View reviewed changes

ZAKdev added 2 commits December 24, 2017 02:18

Fixed eslint

32eeba4

Added heatmapLibrary prop for enable and disable visualization librar…

87c0288

…y for components

Fixed linting

1eccb12

ZAKdev added 3 commits January 19, 2018 02:15

Merge branch 'master' into Heatmap

2529478

Added heatmapLibrary={true} in all map components

66299e1

Merge branch 'Heatmap' of github.com:ZAKdev/google-map-react into Hea…

acc036e

…tmap

ZAKdev added 2 commits January 24, 2018 10:46

Merge branch 'master' into Heatmap

458b0b2

Fixed proptypes error

bb358f3

Added heatmap in README with example code

4e634a9

itsmichaeldiego approved these changes Jan 26, 2018

View reviewed changes

itsmichaeldiego reviewed Jan 26, 2018

View reviewed changes

removed api key from heatmap component

977c12d

Removed unnecessary props from heatmap component

605e6d6

itsmichaeldiego merged commit e50f1d8 into google-map-react:master Feb 12, 2018

This was referenced Mar 11, 2018

Use specific packages from lodash instead of whole library #534

Closed

Remove lodash and use our own utils #535

Merged

lock bot locked as resolved and limited conversation to collaborators Dec 1, 2019

Added heatmap functionality #441

Added heatmap functionality #441

Conversation

ZAKdev commented Sep 10, 2017 • edited

itsmichaeldiego left a comment

Choose a reason for hiding this comment

ZAKdev commented Dec 21, 2017

itsmichaeldiego left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

itsmichaeldiego Jan 8, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ZAKdev commented Jan 9, 2018 • edited

itsmichaeldiego commented Jan 18, 2018

ZAKdev commented Jan 18, 2018

itsmichaeldiego commented Jan 18, 2018

ZAKdev commented Jan 18, 2018

itsmichaeldiego commented Jan 24, 2018

ZAKdev commented Jan 24, 2018

itsmichaeldiego commented Jan 24, 2018

ZAKdev commented Jan 26, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

calvintychan commented Feb 10, 2018

itsmichaeldiego commented Feb 12, 2018 • edited

itsmichaeldiego commented Feb 12, 2018

ZAKdev commented Feb 13, 2018

itsmichaeldiego commented Feb 14, 2018 • edited

ZAKdev commented Feb 14, 2018

ribeiroguilherme commented Apr 7, 2018

ZAKdev commented Apr 11, 2018

lock bot commented Dec 1, 2019

ZAKdev commented Sep 10, 2017 •

edited

itsmichaeldiego Jan 8, 2018 •

edited

ZAKdev commented Jan 9, 2018 •

edited

itsmichaeldiego commented Feb 12, 2018 •

edited

itsmichaeldiego commented Feb 14, 2018 •

edited