Posted by: edsyrett | 14 November 2008

Feel The Heat…

Heat Map

Heat Maps are basically an easy way to show a number of points on a map, and see where the points are most concentrated.  From the marketing perspective, you’d probably want to plot a bunch of possible clients, and concentrate your efforts on the areas that have most clients.

The points on the map represent the locations of service stations that sell LPG, apparently.  But you can see the point – from the map you can see that you’re OK in London and most of the rest of England, but go up to Scotland and you better have a full tank…

Click on the image to see my attempt at a Heat Map using Google Maps.

The whole thing relies on Google Maps, and the ability to add a GroundOverlay on top of the map.  The actual Heat Map is drawn using the standard graphics capability of Flex, onto a bitmap that is then managed by the GroundOverlay.

The map works by firstly drawing a rectangle centred around each location.  This rectangle has a radial gradient, with the Alpha value decreasing outwards.  The result is a circle that is darkest in the centre and lighter around the edges.  

The second pass processes these spots on the map and assigns a colour to an Alpha value.   For me, this is where it got interesting.   I looked for other examples of Heat Maps and they way they generated the colour gradient seemed a bit strange.   Then I started fiddling with colour picker tools, and it occurred to me that what I really wanted was a gradient that only varied in Hue.  In other words, I needed a Hue/Saturation/Luminance model instead of Red/Green/Blue.  But I still needed to convert back to RGB, so I ended up with the HSVtoRGB() function that converts Hue, Saturation and Luminance to RGB.  It’s all very theoretical and I ended up lifting the algorithm from here – don’t ask me how it works…

The end result was this little application.  

In here, you’ll see a bar showing a gradient of colours from red, through orange, yellow, green and blue.  This is actually showing the Hue going from 0 to 180, with unvarying Saturation and Luminance. You can right-click and then click on “View Source” to see my implementation of the HSL to RGB algorithm.

Once I had the colour gradient worked out, I then used the code from the little ColourTemperature app in my Heat Map application to create an array of 255 colours going from red to blue.  Then it was easy to take the alpha value of each pixel and convert it to a colour.

Of course, there’s a whole lot more stuff going on in the Heat Map prototype, so fire it up from the link above, right-click on it and select View Source…



  1. Hello,

    Great post, thanks!

    I downloaded the code to play around with, everything seems to be correct, data is loading, map is showing up, but no overlay…Any suggestions on why the code might not be working locally?

    Many thanks,

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: