Basic Map Overlay

Step 2: Create an HTML file with the following code as a starting point:

Step 3: Change the values in mapOptions to configure the Google Map with options such as latitude, longitude, and zoom. Google describes the full list of options in the Google Maps API Documentation. In this example code, the zoom level is 4, the latitude is 38, and the longitude is -97. The map is being placed in the "map_canvas" div.

Step 4: Change the values in the heat map overlay constructor to tell HeatmapTool how to create your heat map overlay. The following two values are required:

key: Your registration key from Step 1

data: The URL to your comma separated values (CSV) data file

HeatmapTool will only read CSV data from the domain your registration key is associated with. Your CSV data should contain one data point per line, with latitude, longitude, and (optionally) amplitude separated by commas and in that order. For example:

The example HTML code also shows a few optional parameters being set: the gradient has been set to "fire," the scale dimming is at 0.5, and the spot radius is at 5. You can remove these options, adjust them, or add your own. All of the options are described here. Note that there is no trailing comma after the last options in both mapOptions and the heat map overlay constructor.

Multiple Overlays

HeatmapTool can add multiple overlays to a single Google Map, each with its own individual options. To do this, simply construct two different heat map overlays and use the addTo method on each overlay. For example:

This example creates two overlays: a "cobalt" heat map of Walmart store locations, and a "gold" heat map of McDonald's restaurant locations. When adding several overlays, we recommend adjusting the heatmap_opacity parameter to avoid covering one heat map with the other. Here is a live example of the code above.

Removing Overlays

Just as heat map overlays are added with the addTo method, they can be removed with the removeFrom method. When called, the heat map will be removed from the specified map. For example:

Radius Scaling

Sometimes, it is desirable to have the radius of heat map spots change to match the scale of the map as the user zooms in and out. By setting the optional radius_scale parameter to an integer between 0 and 22, the radius of heat map spots will be fixed at that zoom level. Zooming in and out from that zoom level results in the appropriate scaling up or down to match the map dimensions.

Standalone Image

HeatmapTool can also be used to create standalone heat map images, with no javascript required. The URL for generating individual heat map images is:

http://www.heatmaptool.com/heatmap/?key=yourkey&data=yourdata

Change yourkey to your registration key and yourdata to the URL of your CSV data file. In this mode, each line of your CSV data file should provide the x-coordinate and y-coordinate (measured in pixels from the top left of the image), and optionally the amplitude.

The image dimensions are 256 by 256 pixels by default, but you can choose to change the height and width of the image to any value between 1 and 1024 pixels. To change these options or any of the other standard options, add them to the URL. For example, this will create a 512 by 512 pixel image: