Algorithm for heat map?

Question

I have a list of values each with latitude and longitude. I'm looking to create a translucent heatmap image to overlay on Google Maps. I know there are server side and flash based solutions already, but I want to build this in javascript using the canvas tag.

However, I can't seem to find a concise description of the algorithm used to turn coordinates and values into a heatmap. Can anyone provide or link to one?

Thanks.

Answer 1

A faster way of building a heatmap could be to use a queue:

Pseudocode:

Add an element to queue (first in heatmap(x,y, val))
While (!queue.isEmpty())
{
    elem = queue.pop()
    queue.push(elem.x + 1, elem.y, val-1)
    queue.push(elem.x - 1, elem.y, val-1)
    queue.push(elem.x, elem.y + 1, val-1)
    queue.push(elem.x, elem.y - 1, val-1)
}

This saves on tons of iterations!

Answer 2

I have tried to solve this in javascript using the canvas element, here is my current result:

http://gist.github.com/346165

I have to fix the gaussian filter and the color mapping, because it doesn't give good results currently.