Density map tutorial—Prototype, Google Maps API and the HeatMapAPI

13 July 2008 | Posted by Jeffrey Barke |

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:

  1. Getting everything ready
  2. Create the Google map
  3. Add the data
  4. Create the density map

To step one!

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 , ,

Share and Enjoy:

  • Facebook
  • description
  • Digg
  • Ma.gnolia
  • del.icio.us
  • Technorati
  • StumbleUpon
  • Reddit
  • Google

7 Responses to “Density map tutorial—Prototype, Google Maps API and the HeatMapAPI”

  1. Chiatt Price Says:
    July 15th, 2008 at 1:29 pm

    Does this map actually work? I see no data points on the map of Milwaukee above.

  2. Jeffrey Barke Says:
    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!

  3. Weekend Links - Google Maps API, HeatMap API, googleDrive, MooTools Forms, jQuery Sparklines, Firebug Says:
    July 19th, 2008 at 10:12 am

    [...] http://jeffreybarke.net/2008/07/density-map-tutorial/ [...]

  4. Carey Gister Says:
    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.

  5. Jeffrey Barke Says:
    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

  6. Carey Gister Says:
    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

  7. Jeffrey Barke Says:
    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

Leave a Reply