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

There really isn't one single way to do it. The implementation depends on whether or not you want to be able to specify your own color maps on the fly, but basically all you need to do is:

• Either give or compute the minimum & maximum values. You have to choose (or be given, as I mentioned) what colors these two values will map to. If you want to get fancy, you can choose/receive intermediate colors as well.
• Then, given any intermediate value, map that to a color somewhere between your max and min colors. Again, how you choose this intermediate color is really up to you.

The easiest way to think about starting to write your own color mapping algorithm is to use monotone colors first. That way, assuming your numerical values are scalars, it's trivial to map intermediate values given the mapping from min/max value to min/max color (because monotone colors are essentially one-dimensional).

Off the top of my head, I know that matplotlib can do some pretty powerful color map generation. If you're at all familiar with Python (it reads a lot like pseudocode) you could try poking around in the source code.

Answer 2

The basic idea would be to create a grid and project every lat,lng coord to that grid. I would use a 2D array of ints.

The psuedo-code would be:

for each coord
  cell = coord projected to grid
  increment cell value
end

for 0 to # of passes
  for each row
   for each col
     if grid[row,cell] > 0 then
       grid[row,cell] += 1
       increment_adjacent_cells(row, cell)
     end
   end
  end
end

So, the idea is that the higher the int value, the hotter that cell is. increment_adjacent_cells should increment the values in all 8 adjacent cells.

Answer 3

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.