Skip to content
Branch: master
Go to file
Code

Latest commit

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 

README.md

heatmap-js-google

Heatmap utility for google maps that provides users with a greater control.

When working with google map's builtin heatmap utility, I found I wanted greater control over how points were drawn. This project provides users with built-ins for a standard heatmap as well as a contour map (see the examples below). If you find yourself wanting greater control than that, you may provide your own functions to deal with how points are handled. You have all the control you could want.

Examples

Using heatmap-js-google

To use heatmap-js-google, you will need to include both heatmap.js and CanvasLayer.js. CanvasLayer must be included first.

<script src="path/to/CanvasLayer.js"></script>
<script src="path/to/heatmap.js"></script>

Once you have created a google maps object, (see https://developers.google.com/maps/documentation/javascript/examples/map-simple), create a heatmap object and pass it options. Below will generate a standard heatmap like the one you would get using google's heatmap api.

heatmap = new Heatmap({map: map, 
                       radius: 3});

Finally, pass in the points you want to render and you are done! Remember, you may call addPoint(...) or addPoints(...) whenever you like. Each point must be either a 2-tuple or a 3-tuple where the first two elements are the latitude and longitude of the point and the third element is the value of the point.

data = [[40, -75, 5], [40, -74], [39,-75, 2]];
heatmap.addPoints(data);

There are plenty of options so that you can customize the heatmap to your liking. To see the full list, see our extended docs.

About

Highly customizable heatmap built for google maps

Resources

Releases

No releases published
You can’t perform that action at this time.