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?

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?

• javascript
• google-maps
• google-maps-api-3
• bing-maps

• Unless you plan on writing your own tile generator, Heatmaps seem to me to be the correct solution. What exactly "didn't work" about it? – Chad Killingsworth Commented May 6, 2015 at 14:20

2 Answers 2

Instead of using heat maps you will want to do data binning, which is like a bination 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. 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./blog/2011/10/hexbins/

http://www.visualcinnamon./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./2011/11/how-many-pins-can-bing-maps-handle-in.html?q=maps

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

I think @brundritt explained how to approach this problem by gridding the map first, calculating data points and why heatmap wouldn't work for you well. On top of that, I was able find some pointers that actually does data binning, coloring and displaying maps on-the-fly.

This is a javascript library that creates temperature maps using a canvas. This library goes through the data points, calculates weighted values and sets the colors.

This is a WebGL repository to display weather maps using leaflet.