Heatmap (density map) on GWT

Question

I want to create a a heatmap (density map) on images. The examples like the one in http://www.heatmapapi.com/Sample_Google.aspx are good examples of what I try to do.

Is there a GWT way of achieving this? Or any good (flash or js) solution you can suggest (other then the ones mentioned Heatmap Tools For Web Apps)?

Answer 1

I implemented something similar for my final year university project. I used the same approach as HeatMap API, overlaying a generated image on the map when it is repositioned.

I wrote a custom Java web server accepting the bounding box co-ordinates in the querystring to produce a semi-transparent PNG image that looked somewhat like a heat-map, but it was by no means a proper statistically correct algorithm. At the time I wasn't able to find any algorithms for creating the heatmap and many of the algorithms found online or in journals were actually for cluster heat-maps/tree-maps rather than density heatmaps.

I generated a 2D array for the data, using a function to map each co-ordinate with a value. Adding to the array increased the values, so the array needed to be normalised to a value between 0-255, which can then be easily colored and output onto a canvas. I'm afraid I can't find the source code for this, and the algorithm was very approximate.

A year or so ago when the members list of the BNP (racist British political party) was leaked I came across another (simpler, but probably even less accurate) solution that placed a PNG heat spot at each pin point, creating the effect of a heat-map. There is a screenshot of this here, although I can't find the original map http://www.labourlist.org/revealed_the_bnps_social_media_strategy_mark_hanson

Answer 2

As far as I know there is nothing in GWT that is designed to do heatmaps, at least not in the official SDK. I'd say the quickest thing for you would be to integrate an existing JS solution as a native function and use it from your current GWT code.

Answer 3

There are two ways essentially. One is a "hacky" and not very elegant way directly from within GWT, the other makes use of the Google Visualisation API.

The hacky way involves constructing a table and placing your data in it. Furthermore, you need to decide how to "bin" your data values into ranges and then you assign colours to the bins (which you specify in your CSS file). Subsequently you attach the the appropriate CSS to a table cell using the column/row formatter. I have actually done heatmaps in this way within GWT and it works....

The non-hacky way is to go to the Google Visualisations API and to wrap the heatmap that is there already in GWT using JSNI.