HeatMapAPI and the Google Maps API Step 4: Create the density map

Demo and tutorial of how to use the HeatMapAPI with the Google Maps API and the Prototype JavaScript library.

In the final step of our tutorial, we'll create the density map overlay using the HeatMapAPI.

Loading map…

Before we work with the HeatMapAPI, you'll need to get a free API key from http://heatmapapi.com/Register.aspx. Once you have your key, add the following lines to the bottom of your document prior the script element that calls the Google Maps API and prior to the script element that defines jbWebmap (replace "your-key-here" with your key first!):

<script type="text/javascript" src="http://www.heatmapapi.com/javascript/HeatmapAPI.aspx?k=your-key-here"></script>
<script type="text/javascript" src="http://www.heatmapapi.com/javascript/HeatmapAPIGoogle.js"></script>

This loads the HeatMapAPI.

Now that the API is loaded, replace the existing addHeatMap method of jbWebmap with the following code:

addHeatMap: function() {
var heatMap = new GEOHeatmap();
heatMap.Init(this.width, this.height);
heatMap.SetData(this.data);
var preUrl = heatMap.GetURL();
var heatmapOverlay = new HMGoogleOverlay(preUrl);
this.map.addOverlay(heatmapOverlay);
},

The first line of this method creates a GEOHeatmap object and stores it in a locally scoped variable named heatMap.

The next line calls the Init method of GEOHeatMap. This method takes two required parameters: the width and height of our map. Here we supply it with the width and height properties of the jbWebmap object.

Next, we send our liquor license data to the density map by using the SetData method of GEOHeatMap with the parameter set to the data property of jbWebmap (discussed in step three).

Then we retrieve the URL of the density map image generated by the HeatMapAPI using the GetURL method of GEOHeatmap and store it in a local variable. The density map image is the density map (including the HeatMapAPI logo when using the free API), but it's not ready to be added to our Google map until it's been implemented as an overlay (a georeferenced image with the ability to receive events).

The next line uses the undocumented HMGoogleOverlay method of GEOHeatmap. Since it's not documented, I'm guessing that it takes one required parameter, the URL of the density map image, and returns a proper GOverlay object (note—I've documented HMGoogleOverlay here). We store it in the local var heatmapOverlay.

Finally, we call the addOverlay method of the GMap2 object which has been stored in the map property of jbWebmap (discussed in step two). This method takes one required parameter: a GOverlay object. We pass heatmapOverlay variable created in the previous line of code.

And that's it—at this point, you should have a completed density map and be able to implement your own density maps. If you have any questions, please post them as comments to the original blog post. Thanks!

Back to Step 3: Add the data

Last update—12 July 2008

barKode logo

Upcoming events

Recent Blog Posts

View all posts by Jeffrey

Feeds
Want to work with us yet? We’re ready when you are.