Heat map using Bing and Windows Azure Web Role

Today I will explain how Azure web role can be used with Bing Maps to draw Heat map based on the input file. The input file data is as follows –

I have state name of USA, latitude and longitude, number of units sold of a product (typical sales data) in the particular state sorted in ascending order.

38.34,-121.29,100,California    

30.26,-84.17,200,Florida         

44.26,-72.57,300,Vermont       

33.26,-112.04,400,Arizona      

39.09,-119.45,500,Nevada       

42.73,-84.55,600,Michigan     

38.19,-84.87,700,Kentucky      

35.28,-97.30,800,Oklahoma    

32.80,-96.76,900,Texas          

46.35,-112.02,1000,Montana    

44.57,-123.02,1100,Oregon      

21.18,-157.51,1200,Hawaii        

38.98,-76.48,1300,Maryland   

35.41,-105.56,1400,New Mexico          

44.22,-100.21,1500,South Dakota        

38.53,-77.02,1600,Washington

39.74,-104.99,1700,Colorado   

I have downloaded heatmap.js javascript file to plot heat map on Bing map using HTML 5 canvas element. The complete code of heatmap.js is here. We need to add this file in Scripts folder of web role.

Now let’s create a web role. I will have my input file added in the web role. In the page load I will read input text file and plot heat map.

Add a page in the project named as BingHeatMap.aspx and copy paste the code mentioned here on aspx and code behind side. Don’t forget to replace string YourBing Map Key with key of your windows live account.

In my code behind, I actually read the input file in variable which declared as public and then I use this variable of c# code behind in Javascript code of plotting heat map point.

So my solution structure is as follows –

Now download and install Mozilla latest version. The HTML 5 canvas element is supported in IE9 (and above) and latest version of Mozilla. I don’t have IE9 therefore here I am using Mozilla.

Run the project. Final heat map plotted as shown below –

From the diagram it is apparent that, California, Florida and Vermont region has less number of sales so these regions are in red and somewhat yellow in Heat Map. Whereas Washington and Colorado has maximum number of sales so these regions are in Green on Heat Map. If you drilldown (zoom in on the map), the color difference becomes more vivid as shown below –

Cheers…

Happy Heating!!!