Bing Maps AJAX v7 HeatMap Library

My intention had originally been to package up my heatmap code and put it up on codeplex. However, I’m not sure that I can be bothered now to create a brand new codeplex project for what is essentially a single 6kb 150-line javascript file, so I’ve decided to just upload it here instead. If anybody wants to contribute improvements or additions to the code, please feel free to add them to the comments here and I’ll create new versions as I feel like it.

It’s completely unsupported, comes with no warranties whatsoever, but you’re free to use it in any projects you like. All I ask is that, if you find it helpful, please let me know (commenting on this post will do).

You can download the library itself, some sample data, and a few HTML pages illustrating different sample usage in this zip archive. Note that, since the heatmap is created using a element, it is only supported by browsers than support HTML5 (IE9, Firefox 3.5+, Chrome, etc.).

Basic Usage

To add a new heatmap layer to a map, use the syntax as follows:

HeatMapLayer( map, locations );

  • map is the Microsoft.Maps.Map object on which to overlay the heatmap
  • locations is an array of Microsoft.Maps.Location elements

The code archive includes a set of data from Norfolk Police constabulary, which is shown below:

image

Advanced Usage

The constructor method also accepts an optional parameter in which you can specify the radius and intensity of each heat spot, as well as the colour gradient that should be applied. This is demonstrated in the following listing:

HeatMapLayer( map, locations,
{ intensity: 0.25,
radius: 25,
colourgradient: {
0.0: ‘green’,
0.5: ‘yellow’,
1.0: ‘red’
}
});

This specifies that each heat spot should have a radius of 25 pixels, with a central opacity of 0.25. The temperature gradient is such that the hottest areas appear red, the coolest areas are green, with a mid-gradient of yellow. When applied to a set of data showing the location of Morrisons supermarkets in the UK, this creates the following heatmap:

image

Compare this to a heatmap based on the same settings plotting the location of Waitrose stores (for anybody reading this from outside the UK, Waitrose is a posh, southern supermarket!). Pretty effective comparison, no?:

image

The Replacement for the Bing Maps 3D Control

 

So at the end of this year, on December 1st 2011, the Bing Maps 3D control is being retired. This is rather a shame – I kinda liked being able to visualise geography data from SQL Server on a round earth rather than having to project it onto a flat 2d map. And no more will I be able to enjoy this beautiful vista from the top of Mount Snowdon from the comfort of my own chair:

image

Fortunately, there is an alternative.

Given the recent announcement that Silverlight 5 beta will be released at Mix11, you might think that I’ve got some insider information on a new Silverlight 3d Bing Maps control, but no.

And you can do some pretty cool stuff with HTML5 and CSS 3D transforms (like this Katamari Damacy hack), but that’s not it either.

I’m thinking of something much more modest, requiring only a single cross-platform plugin that almost every user already has installed on their system….

Flash? Nope…. Adobe Acrobat.

Using some STRM topography data, an image from the Bing Maps imagery service, and a splash of Safe FME, you can create fully zoomable, rotatable terrain models in PDF format. Now, ok, this doesn’t quite provide the ability to navigate the whole world in 3D – it works best for only certain limited areas of geographic interest. But look at the advantages: you can distribute interactive 3d spatial data to anyone with Adobe Acrobat reader installed – no other software required, no special licences needed, no internet connection….

Here’s the Safe FME workflow I used (inspired largely by one of Don Murray’s demos at the Safe FME world tour last week):

SafeFME_workflow

And here’s a screenshot from the Adobe 3D PDF output, showing the Bing Maps imagery for Snowdonia national park in Wales overlaid on a STRM height map model. Download the PDF file and try it yourself.

BingMaps3DTile

There are several navigation tools in Adobe PDF reader allowing you to pan, rotate, and zoom around the model. There’s even a ‘Fly’ navigation mode that allows you to re-enact the 3D control style of Ricky’ Brundritt’s VE3D flight simulator.

image

And now I can once again enjoy views like this on my monitor:

BingMaps3DTile2

(Note – there is a known bug with Adobe Reader 9.3 that might produce a “3D data parsing error has occurred” message – see http://forums.adobe.com/message/2651682 . This error can be resolved by upgrading to Adobe Reader X.)

Bing Maps v7: The OnScriptLoad parameter

One positive thing that seems to have come out of the confusion regarding the recent Bing Maps v7 AJAX update has just been mentioned in a forum post by Chris Pendleton, in which he suggests a possible resolution to the lazy-loading errors (“xxx is undefined” / “yyy is not a Constructor function” etc.) is to make use of the OnScriptLoad parameter.

This parameter, which had been present throughout the v6.x versions of Bing Maps, was conspicuous by its absence in v7 and, despite several comments regarding its whereabouts, did not appear anywhere in the documentation for the v7 API. Based on Chris’ comments, it appears that this parameter has in fact always been present in v7, but accidentally omitted from the documentation. So, until that gets corrected, you can refer to the v6.3 documentation, taken from here: http://msdn.microsoft.com/en-us/library/cc980837.aspx

“onScriptLoad is a string parameter that specifies the name of a JavaScript function to call when the map control script is loaded. The name must contain only alphanumeric characters. The CSS and tiles will not be loaded when this function is called. (This parameter is useful for loading the map control script from an UpdatePanel in ASP.NET Ajax. Users can call Sys.Application.notifyScriptLoaded from their callback to tell ASP.NET Ajax the script has loaded.)”

Not only does this parameter provide an apparent workaround for some of the issues currently being experienced with the v7 control, but it also provides a useful method for any other functions in the future that you want to execute only after you are certain that the library has been loaded (note that this is not the same as when the map has been loaded into the page). To take the example from my last post, you can therefore safely create an instance of the Microsoft.Maps.Location class by calling the tryCreateLocation function from onScriptLoad callback, as follows:

[php]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Bing Maps v7 Initialisation Bugs</title>
<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&amp;onscriptload=tryCreateLocation" type="text/javascript"></script>
<script type="text/javascript">
function tryCreateLocation() {
try {
var MyLocation = new Microsoft.Maps.Location(51, -0.15);
alert(MyLocation);
}
catch (e) {
alert(e);
}
}
</script>
</head>
<body></body>
</html>

[/php]