Create custom “temperature” map with front-end JavaScript

Question

I want to create a map similar to this one:

This example shows world-wide temperature levels. But I need to use my own, non temperature data, to represent pollution level.

I have tried "Heatmap" layer, but it didn't work for me, because it is mostly used to represent population level:

How can I create such "Temperature map" using Bing or Google maps api?
If there is no native solution using Google or Bing api, is there a thing-party library that can help me?

Answer 1

Instead of using heat maps you will want to do data binning, which is like a combination of clustering and heat maps. What you would do is break the map up into equal size geometric shapes that fit together nicely, like triangles, squares or hexagons. Then you would color code each based on a metric for any data that intersects a shape. Now this won't give you a gradual gradient heat map like you have above, but it will create a heat map that is based on metrics and not density/population of data points. Now, you might be representing a single city as a point in your data. To color a city, what you can do is get the boundaries for a city using something like the GeoData API in Bing Maps and then do an intersection test against all shapes in the area and set the intersecting ones to the same metric value. This will prevent you ending up with a single small shape representing a large area like a city. If you run into a situation where more than one data point is in a bin you can then take the average metric value which will help with blending data together. Finally you can color the bins based on the metric value for each bin.

A good example of a website that does this today is http://mouseprice.com Note that they don't color empty areas, but you might want to color those with your lowest color value (i.e. blue).

Here are a bunch of resources to point you in the right direction:

http://indiemaps.com/blog/2011/10/hexbins/

http://www.visualcinnamon.com/2013/07/self-organizing-maps-creating-hexagonal.html

http://build-failed.blogspot.pt/2014/08/game-development-log-iteration-1-webapi.html

http://build-failed.blogspot.pt/2013/07/dynamically-creating-hexagons-from-real.html

http://awkwardcoder.blogspot.com/2011/11/how-many-pins-can-bing-maps-handle-in.html?q=maps

http://awkwardcoder.blogspot.com/2011/10/tessellating-shapes-on-top-of-bing-maps.html