Add HeatmapLayer Component #248

zolrath · 2016-05-07T22:33:10Z

Allows a HeatmapLayer to be created. Takes an array of
google.maps.LatLng objects to the prop data.

I'm not sure what events this should really be listening for so if you have any suggestions or things I need to change please let me know!

Allows a HeatmapLayer to be created. Takes an array of `google.maps.LatLng` objects to the prop `data`.

cristiandley · 2016-05-16T14:23:33Z

@zolrath Matt, why are you not using /lib/ for this addon ?

were you able to compile those files and execute these pr ?

im getting Uncaught TypeError: Cannot read property 'HeatmapLayer' of undefined

cristiandley · 2016-05-24T13:53:52Z

@zolrath i put your heatmaplayer on my own repo https://www.npmjs.com/package/react-gl-maps just check the /lib/ its missing the babel compilation

tomchentw · 2016-05-29T09:38:57Z

@cristiandley for PRs, it should be clean enough for anyone to see the changes. lib are automatically generated by the release script during publish process.

tomchentw · 2016-05-29T09:40:14Z

src/addons/HeatmapLayer.js

+  // https://developers.google.com/maps/documentation/javascript/3.exp/reference#HeatmapLayer
+  //
+  // [].map.call($0.querySelectorAll("tr>td>code"), function(it){ return it.textContent; }).filter(function(it){ return it.match(/^get/) && !it.match(/^getMap/); })
+  getData() { return this.state.directionsRenderer.getDirections(); }


Should this be removed?

tomchentw · 2016-05-29T09:41:24Z

@zolrath Just left one code review comment. Also, I'd like this component to be under visualization folder instead of addons. addons should be used only for 3rd party components.

Other than that, great work!

zolrath · 2016-06-06T20:58:25Z

I will make the requested changes right now, thanks!
Would you like me to add a visualization folder or put this with the other map overlays such as Markers in src?

cristiandley · 2016-06-15T16:11:26Z

@zolrath

Can you add also the radius and opacity properties ?

Thanks and i make my final review

zolrath · 2016-06-15T21:43:19Z

@cristiandley In the ControlledPropTypes function of the other components I see:

// NOTICE!!!!!!
//
// Only expose those with getters & setters in the table as controlled props.
//
// https://developers.google.com/maps/documentation/javascript/3.exp/reference#HeatmapLayer

From what I can tell that means I should not expose radius and opacity as they are set in the Options object, not via a getter/setter in the Heatmap?

tomchentw · 2016-06-17T04:07:17Z

@cristiandley let's hold this on for 5.0.0 first?

cristiandley · 2016-06-17T15:43:32Z

@tomchentw yes! :)

ghost · 2016-07-05T09:22:19Z

Any progress on this?

zolrath · 2016-08-19T00:24:42Z

What changes need to be done to get this into the new version of react-google-maps?

@zolrath

* Original author: @zolrath * Ref commits: b8d8623, 21dbb77, 8b16ea4, 08abfb5

@zolrath

* Original author: @zolrath * Ref commits: b8d8623, 21dbb77, 8b16ea4, 08abfb5 * Remove decorator usage in HeatmapLayerCreator

tomchentw · 2016-09-30T03:03:18Z

Released v5.1.0 on npm next tag.

farhan687 · 2016-11-29T04:33:27Z

Hello everyone,
I am using @beta tag, and I want to use heatmaplayer. I have already tried by wrapping it inside withGoogleMap and also without it, but it's really strange that console shows following error Uncaught TypeError: google.maps.HeatmapLayer is not a constructor.

Here is my implementation:

import { withGoogleMap, GoogleMap, Marker, HeatmapLayer } from "react-google-maps";

<HeatmapLayer
    data = {[
      37.782, -122.447,
     37.782, -122.445
    ]}
  />

Can anyone tell me if I am missing anything?

matthill1 · 2016-12-11T17:17:19Z

Seconded farhan here, if anybody has successfully implemented the heatmap layer, would you mind posting an example of syntax? The documentation is scarce. Thank you.

ribeiroguilherme · 2016-12-14T20:52:12Z

+1 looking for the syntax example as well

ribeiroguilherme · 2016-12-16T22:03:18Z

@farhan687 did you figure out how to use? I'm with the same problem here

ribeiroguilherme · 2016-12-16T23:03:20Z

Hi guys.
I figured out the problem. In the HeatmapLayer file, is being created the heatmap using:
new google.maps.HeatmapLayer , but this path is incorrect.
It should be
new google.maps.visualization.HeatmapLayer

ZephD · 2016-12-19T15:29:08Z

Even with this change, I get "b.lat() is not a function".
Internally, the visualization library seems to require a google.maps.LatLng, a simple {lat: 0, lng: 0} object does not suffice.
Since google is loaded async, creating new latlngs is very hard. Maybe the HeatmapLayer should convert the data to a LatLng object?

ribeiroguilherme · 2016-12-19T17:45:44Z

ZephD, you can create an array like
array.push(new google.maps.LatLng(lat, long)); and pass it to 'data' property in HeatmapLayer.

If you load the google maps script in your index html file, should work fine. Here is working fine.. But we need to fix this bug. When we deploy to production, the node will download the lib with the wrong path.

ZephD · 2016-12-19T22:22:59Z

But I do not have google maps in the index file, because that'll be too easy. Google maps is loaded Async, so I do not have access to new google.maps.LatLng, hence the problem.

See #409.

GustavoMantuan · 2017-07-12T19:23:27Z

Hello, I am using this way:

import HeatmapLayer from "react-google-maps/lib/visualization/HeatmapLayer";
const MapaPerfilW = withGoogleMap(props => (
    <GoogleMap
        defaultZoom={15}
        center={props.defaultCenter}
    >
        <HeatmapLayer
            data={[
                new google.maps.LatLng(37.782551, -122.445368),
                new google.maps.LatLng(37.782745, -122.444586),
                new google.maps.LatLng(37.782842, -122.443688),
                new google.maps.LatLng(37.782919, -122.442815),
                new google.maps.LatLng(37.782992, -122.442112),
                new google.maps.LatLng(37.783100, -122.441461)
            ]}
        />
    </GoogleMap>
));

Version 7.1.0 working great.

malindap92 · 2017-07-19T20:46:40Z

@GustavoMantuan could you tell me how you were able to access google.maps.LatLng? it gives me 'google' is undefined. Is there any library to import?

mtpython · 2017-07-20T16:55:20Z

@malindap92 add /*global google*/ at the top of your .js file, and the next thing you know - use <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=YOUR_KEY&libraries=visualization"></script> to get the other questions out of the way

Add HeatmapLayer Addon

b8d8623

Allows a HeatmapLayer to be created. Takes an array of `google.maps.LatLng` objects to the prop `data`.

cristiandley mentioned this pull request May 13, 2016

Is this repo dead ? #256

Closed

tomchentw mentioned this pull request May 29, 2016

Add Heatmap Component #231

Closed

tomchentw reviewed May 29, 2016
View reviewed changes

tomchentw added the For_maintainers label May 29, 2016

cristiandley mentioned this pull request Jun 3, 2016

5.0.0 #267

Closed

8 tasks

zolrath added 2 commits June 6, 2016 14:34

Move HeatmapLayer files

21dbb77

Export HeatmapLayer in index

8b16ea4

zolrath force-pushed the master branch from a3f10e6 to 488ce9b Compare June 7, 2016 00:13

Shorten long lines

08abfb5

zolrath force-pushed the master branch from 488ce9b to 08abfb5 Compare June 7, 2016 00:21

zolrath changed the title ~~Add HeatmapLayer Addon~~ Add HeatmapLayer Component Jun 7, 2016

tomchentw merged commit a1a7b73 into tomchentw:master Sep 29, 2016

tomchentw removed the Maintainers_please_review label Sep 29, 2016

tomchentw mentioned this pull request Sep 29, 2016

6.0.0 #318

Closed

6 tasks

tomchentw added a commit that referenced this pull request Sep 30, 2016

feat(HeatmapLayer): add HeatmapLayer component (#248)

55e7c81

* Original author: @zolrath * Ref commits: b8d8623, 21dbb77, 8b16ea4, 08abfb5

tomchentw added a commit that referenced this pull request Sep 30, 2016

feat(HeatmapLayer): add HeatmapLayer component (#248)

2863cdd

* Original author: @zolrath * Ref commits: b8d8623, 21dbb77, 8b16ea4, 08abfb5 * Remove decorator usage in HeatmapLayerCreator

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add HeatmapLayer Component #248

Add HeatmapLayer Component #248

zolrath commented May 7, 2016 •

edited

Loading

cristiandley commented May 16, 2016 •

edited

Loading

cristiandley commented May 24, 2016

tomchentw commented May 29, 2016

tomchentw May 29, 2016

tomchentw commented May 29, 2016

zolrath commented Jun 6, 2016 •

edited

Loading

cristiandley commented Jun 15, 2016

zolrath commented Jun 15, 2016 •

edited

Loading

tomchentw commented Jun 17, 2016

cristiandley commented Jun 17, 2016

ghost commented Jul 5, 2016

zolrath commented Aug 19, 2016

tomchentw commented Sep 30, 2016

farhan687 commented Nov 29, 2016

matthill1 commented Dec 11, 2016

ribeiroguilherme commented Dec 14, 2016

ribeiroguilherme commented Dec 16, 2016

ribeiroguilherme commented Dec 16, 2016 •

edited

Loading

ZephD commented Dec 19, 2016

ribeiroguilherme commented Dec 19, 2016

ZephD commented Dec 19, 2016 •

edited

Loading

GustavoMantuan commented Jul 12, 2017 •

edited

Loading

malindap92 commented Jul 19, 2017 •

edited

Loading

mtpython commented Jul 20, 2017 •

edited

Loading

Add HeatmapLayer Component #248

Add HeatmapLayer Component #248

Conversation

zolrath commented May 7, 2016 • edited Loading

cristiandley commented May 16, 2016 • edited Loading

cristiandley commented May 24, 2016

tomchentw commented May 29, 2016

tomchentw May 29, 2016

Choose a reason for hiding this comment

tomchentw commented May 29, 2016

zolrath commented Jun 6, 2016 • edited Loading

cristiandley commented Jun 15, 2016

zolrath commented Jun 15, 2016 • edited Loading

tomchentw commented Jun 17, 2016

cristiandley commented Jun 17, 2016

ghost commented Jul 5, 2016

zolrath commented Aug 19, 2016

tomchentw commented Sep 30, 2016

farhan687 commented Nov 29, 2016

matthill1 commented Dec 11, 2016

ribeiroguilherme commented Dec 14, 2016

ribeiroguilherme commented Dec 16, 2016

ribeiroguilherme commented Dec 16, 2016 • edited Loading

ZephD commented Dec 19, 2016

ribeiroguilherme commented Dec 19, 2016

ZephD commented Dec 19, 2016 • edited Loading

GustavoMantuan commented Jul 12, 2017 • edited Loading

malindap92 commented Jul 19, 2017 • edited Loading

mtpython commented Jul 20, 2017 • edited Loading

zolrath commented May 7, 2016 •

edited

Loading

cristiandley commented May 16, 2016 •

edited

Loading

zolrath commented Jun 6, 2016 •

edited

Loading

zolrath commented Jun 15, 2016 •

edited

Loading

ribeiroguilherme commented Dec 16, 2016 •

edited

Loading

ZephD commented Dec 19, 2016 •

edited

Loading

GustavoMantuan commented Jul 12, 2017 •

edited

Loading

malindap92 commented Jul 19, 2017 •

edited

Loading

mtpython commented Jul 20, 2017 •

edited

Loading