Create density / heat maps such as SpatialKey

Question

SpatialKey generates some really nice color maps, and we are exploring how to do this for an internal project to visualize large scores. I am looking for feedback on some ideas on where to start (and this is just an interesting problem).

Heat map SpatialKey http://img697.imageshack.us/img697/7964/resolutiondays508x17550.jpg

We know that they use Flash, and from what we can say, heatmaps are interactive and not output from the tile server. Our first assumption about how this is implemented is that the server provides its client with a Flash grid - each cell has an account calculated by the server. Then, the Flash client performs some interpolation based on the values ​​of the cells in the grid to draw the pretty output you see above.

At this stage, I'm just interested in how they could efficiently generate a server-side grid (if our assumption about their implementation is even correct). It looks like this will include:

• Fulfilling a query for what is currently displayed on the map
• Execution of an aggregation subquery for each cell within these boundaries (execution of an account, amount, or average value, as in the example above).

Throw this at several zoom levels at a reasonable grid resolution, and you think you need a custom spatial index to make it effective.

Do any participants explain an alternative route? If that matters, we're used to storing our data in PostgreSQL using PostGIS for a spatial index, but I'm open to trying something.

Answer 1

As an assumption, I would suggest that they implement the GIS library in Flash on the client side and use this to design latitude and longitude coordinates in pixel space. Then they are combined by pixels to determine the "height" of each pixel and render it the same as you would a circle, but using a gradient fill with transparency, with the start and end colors of the gradient fill determined by the height of the pixels. Multiple circles superimposed on each other will create brighter pixels.

An alternative could be to do this in shades of gray, then match the brightness value to the color scale. This may be the most effective.

We sell more traditional treemap heatmaps for integration in visual analytics applications (like heatmap SDKs), and now there are heatmaps that colorize areas. We read standard ESRI Shapefile maps and do all projections and rendering on the client side (in Java, not in Flash, but in the same concept). I think SpatialKey does the same, since they support area-fill rendering, which cannot really be done if you use a server like Google Maps.

We do not yet make heat density maps like this, but we did a couple of tests using static images as the background. If you need more information, let me know and I can ask my developer how we did it. I know that we are currently developing more point-based functions, although I do not know where the heat density plots are still located.

SpatialKey actually wrote a good post on different between heat maps with filling in the area (i.e. thematic maps) and heat map density. You can check this out at http://blog.spatialkey.com/2010/02/comparing-thematic-maps-with-density-heatmaps/ .

If you correctly identified heat density maps, I would be interested to know how you did it, as this would be a valuable addition to our visual analysis SDK. Good luck.

Answer 2

MapReduce for your actual map totals and something with Geospatial Indexing for the database - to submit these MapReduce jobs. I am exploring the implementation of this exact same approach, but for interfaces instead of maps :) MongoDB seems to work well at the moment.