Code was donated to the developer community, it was not written by the author of this article and is unsupported.
The Virtual Earth map is a complex set of DOM elements layered together to produce the interactive experience you are familiar with. Although the map is used as an interactive experience a very common request is "how do I print the map". Lets see how.
This code is not supported by Microsoft in way and should be used as a “work around” until a fully supported version is available. It was developed based on the current structure of the VE map in Version 6 and will change over time.
Currently the code supports Internet Explorer 6 and 7 and Firefox 2. A friendly error message is provided for Safari at this time.
There are two components to this, firstly a JavaScript file that provides all the logic to render base elements in all browsers and tile layers in Firefox. And for Internet Explorer the second component is some server side code (ASP.NET 2.0) that renders tile layers to properly support transparent GIF and PNG tile layers.
How do we use it?
In your website you need to add the JavaScript file, in this example in a sub folder called “scripts”, and reference it in your map page like you would any other JavaScript file:
<script src="/Portals/0/scripts/veprintfix.js" type="text/javascript"></script>
The solution creates a printable map in specified <div>. You instantiate the new VEPrintableMap class passing the source Map div ID, the div ID to print to and the map object itself. You then call the "Print()" method:
var printMap = new VEPrintableMap("sourceMap", "printableMap", map);
printMap.Print();
(where "sourcemap" is the name of original map div, "printableMap" is the name of printable map div and map is name of the current instance of the VEMap class)
This means you need to add a simple div to your page like so:
<div id="printableMap"></div>
A basic page would look like this:
<!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>VE Test Print</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript"
src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6"></script>
<script src="/Portals/0/scripts/veprintfix.js" type="text/javascript"></script>
<script type="text/javascript">
var map = null;
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap(new VELatLong(48.05169,-122.45156),14);
}
function PrintMap()
{
var printMap = new VEPrintableMap("myMap", "printableMap", map);
printMap.Print();
}
</script>
</head>
<body onload="GetMap();">
<div id='myMap' style="position:relative;width:600px;height:400px;"></div>
<a href="#" onclick="PrintMap()">Print me</a>
<div id="printableMap"></div>
</body>
</html>
Server Side Logic
As mentioned, to support tile layers in Internet explorer we need to create a handler that can transform the tiles into a supported format. The code supplied has two formats, a fully compiled version ready to simple add into your IIS website running ASP.NET 2.0 and a full source version. The handler “MergeLayers.ashx” is designed to be in the same folder as the map page.
I don’t use tile layers.
If your site doesn’t use custom tile layers then you only need to use the JavaScript file and you can remove the whole server side component of this solution. You will need to make one change in order to remove this dependency.
Simply remove the below call from CloneMap method on line 254 and remove the TileLayerFix method as it will never be called. All files excluding veprintfix.js can be removed as well.
TileLayerFix(targetDiv.id);
Whats next?
The code presented here gives you the ability to create a printable version of the map in a separate div. The follow up to this article will show how a typical website with a VE map could use this to provide the printable page in a real world situation.