HeatMapAPI and the Google Maps API Step 3: Add the data

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

In step three of our tutorial, we'll add the liquor license data to our jbWebmap object using Prototype's Ajax object.

Loading map…

Prior to adding the liquor license data to our JbWebmap object, we need to acquire and process the data. While doing this is outside of the scope of this tutorial, I'll summarize the process below.

Milwaukee's liquor license data can be downloaded from the City Clerk License Division in CSV format. While the data contain addresses, they do not have geographical coordinates. Because I know the free HeatMapAPI only allows 100 points per call, the first thing I did was delete everything from the CSV file except the first 100 rows. Then I imported the truncated CSV file into a MySQL database and, using Google's geocoding service, added the appropriate coordinates.

Since the necessary data were now ready, I created heat-maps-data.php to read the contents of the database and output the liquor license data in JSON format. The resulting output looks similar to:

{
"result":true,
"points":[ 43.028477,-88.000664,1,
43.099991,-88.011520,1,
43.103542,-88.014435,1 ]
}

This is a JSON object with two properties: result which is set to the Boolean value true and points, which is an array. The points array (truncated above) contains a series of values which conceptually repeat after every third value. These values represent the latitude, longitude and weight of each liquor license. The latitude and longitude come from the geocoding process described above and I assigned each a weight of 1, since no one license is more important than another. The format of this array was determined by what the HeatMapAPI expects to receive.

For the purpose of this tutorial, download heat-maps-data.php and save it as heat-maps-data.js in the same directory as the page where you're creating your map. After this is done, replace the existing getData method of jbWebmap with the following code:

getData: function() {
new Ajax.Request('heat-maps-data.js', {
onSuccess: function(data) {
var obj = data.responseText.evalJSON(true);
if (obj.result) {
jbWebmap.data = obj.points;
jbWebmap.addHeatMap();
}
},
onFailure: function(){ alert('Something went wrong...'); }
} );
},

The first line of this method creates a new instance of Prototype's Ajax.Request object. The first parameter is the URL of the request and the second is an options hash. The URL of our request is heat-maps-data.js.

Our options hash includes three options: method and two callback methods, onSuccess and onFailure. The method option refers to the HTTP method to be used, which can either be get or post. Since we're not modifying data and it is appropriate for the browser to cache the response, the GET method is appropriate.

Since Ajax requests are by default asynchronous, we must have callbacks that will handle the data (our liquor license JSON object) from a response. The onFailure method is called if the Ajax.Request object fails to retrieve heat-maps-data.js. If it does, we fire a standard JavaScript alert with the message "Something went wrong...."

The onSuccess method is called if the Ajax.Request object retrieves heat-maps-data.js. If it does, the method is passed the native xmlHttpRequest object as a parameter (here named data). The xmlHttpRequest has a property named responseText which contains all of the output contents of heat-maps-data.js. (If this seems confusing, add alert(data.responseText); prior to the line var obj = data.responseText.evalJSON(true);).)

Since we know our response is in JSON format, we call the evalJSON method to convert our response from a string representation of a JavaScript object into an actual object in memory (here named obj). When we do, we supply the optional sanitize parameter of evalJSON with the value true to check the responseText string for malicious code.

Since obj is our liquor license JSON object, we first test the result property to see if it is true. If it is true, we store the points array in the data property of jbWebmap. Since obj is a locally scoped variable, we need to store our license data in a way that it will be available to the other jbWebmap methods.

Finally, we call the addHeatMap method of jbWebmap, which currently does nothing. In our next step, we'll add the density overlay to our map using the HeatMapAPI and by finishing the addHeatMap method.

Back to Step 2: Create the Google map | Step 4: Create the density map

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.