Density map tutorial—Prototype, Google Maps API and the HeatMapAPI
13 July 2008 | Posted by Jeffrey Barke | 10 comments
I created a tutorial that will step one through how to create a density map with Prototype, the Google Maps API and the HeatMapAPI. The final product, a density map of liquor licenses in Milwaukee, WI, is below. While this map is based on real data, one limitation of the free HeatMapAPI is that only 100 data points can be submitted per call. Since there are approximately 1,300 liquor licenses in Milwaukee, this map isn't even close to accurate!
Creating a map like this takes four simple steps:
Jeffrey Barke is senior developer and information architect at theMechanism - New York, a multimedia firm with offices in New York, London and Durban, South Africa.
Filed in APIs, JavaScript, Web mapping, miscellaneous, programming, reference | Tagged with google-maps-api, heatmapapi, prototype
July 15th, 2008 at 1:29 pm
Does this map actually work? I see no data points on the map of Milwaukee above.
July 15th, 2008 at 4:18 pm
Sorry about that, Chiatt—you're right, it's not rendering in IE. Even though I was sending just under the maximum 100 points, for some reason the URL was truncating (and therefore becoming malformed) in IE 6 and 7. It's been resolved now.
Thanks!
July 19th, 2008 at 10:12 am
[...] http://jeffreybarke.net/2008/07/density-map-tutorial/ [...]
August 4th, 2008 at 6:23 pm
Hi,
I came across your HeatMapAPI sample while I was attempting to implement a HeatMapAPI project of my own.
You got further along than I did, so I thought I might ask for your help.
I attempted to implement their sample on my site as a first step. Alas, the Google map renders perfectly, but the Heat Map does not. Do you have any ideas as to what is going on?
I have attempted to contact the folks at HeatMap, but have not received a reply to my query.
The URL is: http://repo-dev182.vigvid.com.
Thank you in advance.
August 5th, 2008 at 4:28 pm
Hello, Carey,
I followed the link in your comment, but only got an IIS error page. What's happening with your site?
How long ago did you contact the folks at Geospatial Analytics Inc? The reason I ask is that I contacted them with a question while doing my demo/tutorial and, though the initial contact took a bit, were quite responsive after that.
Jeffrey
September 23rd, 2008 at 4:38 am
Hi Jeffrey,
Yes, they eventually got back to me. There were some bugs that they very patiently fixed. I like their API, although I think the documentation is a tad scant. I never did get the school of thought that said the code speaks for itself.
Your demo went a long way towards getting a working demo up and running.
Carey
September 23rd, 2008 at 9:35 am
Hello Carey,
Glad to hear they got back to you and fixed any bugs. I'm also glad to hear that my demo helped!
Jeffrey
April 16th, 2009 at 7:56 pm
I have 2 issues.
1. The HeapMap Api doesn’t work in Firefox
2. In IE I have to refresh the page to see the overlay.
April 17th, 2009 at 8:16 am
I resolved the IE issue but in firefox it says “img is null”
Here is the URL http://1800travelbooking.com/maps/heatmap.html
I am using large data option.
April 17th, 2009 at 8:23 pm
Hello gpuri,
Regarding your first comment, I initially thought you were talking about my demo, which is working fine in Firefox 3 and IE 8 (the only browsers I have access to on this machine).
Based on your second comment, I see you're talking about your site, which, as you say, is not working in FF. I'm kind of surprised it's working in IE because IE throws the same error.
However, I'm not sure why the error is occurring in the first place nor why it works in IE. I might be able to figure it out, but I'd have to step through all of your code to do so and unfortunately I don't have the time to do that right now.
Sorry!
Jeffrey