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.
