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?


No correct solution


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

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

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.

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

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

Look at this project if you are looking for something that looks more like 'tv weather maps':

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


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!

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow