Density Mapping in Google Maps with HeatMapAPI

Posted on March 11, 2009. Filed under: Google Maps |

In the GIS world heat maps are a graphical representation of point data on a map through the use of colors that indicate the density of some variable such as crime incidents or traffic accidents.  Heat maps let users quickly visualize the density of locations. Being able to understand the density of point locations makes it much easier to see patterns in your data, especially when using colors. In this post we’re going to examine the HeatMapAPI, a JavaScript API for creating heat maps in Google Maps.


2009 Starbucks Store Closures

Introduction
HeatMapAPI can be used over the Internet or as a .NET DLL that runs in a local environment and allows you to integrate heat map images into Google Maps or other GIS systems.  In this post we’re going to use HeatMapAPI to visualize the density of recent Starbucks store closures.  In a recent statement, Starbucks announced the closure of 600+ stores in the United States due to economic conditions.

Preparing the Data
The list of store closures was not geocoded so I copied and pasted the data into the Internet geocoding application Batch Geocode as tab delimited data.  The data contains address, city, and state information in addition to the store number and store name.  After validating the source data the geocoder was run, producing latitude, longitude coordinates for each store location.  For the purposes of a heat map the only information I was really interested in were the latitude, longitude coordinates which I then imported into an XML file that would be read by my simple Google Maps application.

Google Maps API and HeatMapAPI Code
My Google Maps application code is divided into three distinct functions including an initialization function for creating the Google Map, a function for reading the data from the XML file, and finally a function to plot the heat map on top of the Google Map using the store points read from the XML file.  However, before we examine the functions we need to add a reference to the HeatMapAPI and take care of a few other house-keeping details.  At the top of the page we add the following references to the HeatMapAPI.  You can generate a key here for your own evaluation.

In addition, you need to add two hidden fields to your page as seen below.

The initialize() function seen below simply creates an instance of GMap2 (Google Map), centers and scales the map, sets the interface to the new Google Maps interface, and calls the initHeatmap() function.

The initHeatMap() function creates a new instance of GEOHeatmap and sets the size in pixels which is equal to the size of our Google Map (500 x500).  Next, a call to addMarkersFromXML() loads the Starbucks stores from our XML file into a global variable called ‘batch’.  The ‘batch’ variable is then assigned to the HMMapdata hidden variable that we defined earlier.  The setBoost() and setDecay() methods on GEOHeatmap are then called.  In this case we simply use the default values, but you may want to check the documentation for more details on how these methods can be used to alter the results of your heat map.  Finally, we call the GEOHeatmap.getURL method and render the map through a call to the HMGoogleOverlay constructor.  This new heat map is then placed on top of the Google Map through the GMap2.addOverlay method.

The results can be seen in the figures below.

See more information on the HeatMapAPI.

More Information
To obtain additional information on the Google Maps API please see our e-learning course, “Introduction to the Google Maps API“.  In addition, GeoSpatial Training Services also provides a full set of Google Earth and ESRI  e-learning courses.  Please see our website for more details.

About these ads

Make a Comment

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

6 Responses to “Density Mapping in Google Maps with HeatMapAPI”

RSS Feed for GeoChalkboard Comments RSS Feed

[...] Density Mapping in Google Maps with HeatMapAPI « GeoChalkboard "In the GIS world heat maps are a graphical representation of point data on a map through the use of colors that indicate the density of some variable such as crime incidents or traffic accidents. Heat maps let users quickly visualize the density of locations. Being able to understand the density of point locations makes it much easier to see patterns in your data, especially when using colors. In this post we’re going to examine the HeatMapAPI, a JavaScript API for creating heat maps in Google Maps." (tags: maps api programming gis google+maps heatmap) « links for 2009-03-12 [...]

[...] beberapa artikel lainnya diantaranya  “Reading XML Files with the Google Maps API“, “Density Mapping with the HeatMap API“, serta “Enhancing Your Google Maps Applications with MarkerManager and ProgressBar [...]

[...] via Density Mapping in Google Maps with HeatMapAPI « GeoChalkboard. [...]

Thanks for blogging, I’m the author of HeatMapAPI. I want to see us support this API more.. please forward any comments to me.


Where's The Comment Form?

Liked it here?
Why not try sites on the blogroll...

Follow

Get every new post delivered to your Inbox.

Join 47 other followers

%d bloggers like this: