Printing Maps from Javascript Web Applications


I’ve recently been involved in developing  a web application using the ArcGIS Javascript API. I thought I’d share some of the things I learned on this project on printing, partly as catharsis but mostly so it might help someone else to speed up their development process.

One of the requirements for the application was to be able to create a print friendly layout of the map area. The map basically displayed two tiled map services: the MDS foundation map and another map service overlaid on top.

My initial thought was to create a new web page in the required layout which simply recreated the map object that was in the main app window. This appeared to work well until I actually printed the page, when I noticed that different browser types where handling the printing with varying degrees of accuracy. Take a look below to see what I mean. Firefox prints the overlying map service offset from the MDS base map service:

Leaving it up to the browser to understand how to print these ArcGIS objects clearly wasn’t going to work. The browser would have to be presented with one image to print instead of having to cope with two overlaying each other.

The next thought was to create a special printing map service that consumed the MDS map service and the overlying map service. This would leave the generation of the image down to the ArcGIS server, which would then present one image to the browser. This worked well until I remembered that of course you could not vary the transparency of individual layers within a map service, just the whole service. As the overlying map service transparency could be changed by the user on the main application window, this method would not work.

Finally we settled on a method that would work. A piece of javascript that does an export on the two map services to retrieve two images. The code then takes advantage of the canvas object in HTML to merge together the two images before presenting the combined image to the browser for display. There are some extra javascript files that needs to be included in the application to handle browsers that don’t natively recognise the canvas object but the advantage of this method is that it handles transparency on the two images well, even in IE6.

The extra javascript code comes from a site called fxcanvas:

http://code.google.com/p/fxcanvas/

The guts of the code is the following snippet:

var mdsImage = mdsurl + "/export?f=image" +
 "&bbox=" +
mapState.extent.xmin +
"," +
mapState.extent.ymin +
"," +
mapState.extent.xmax +
"," +
mapState.extent.ymax +
"&size=" + width + "," + height +
"&transparent=true" +
"&format=jpg";
var coverageImage = mapState.currentNetworkUrl + "/export?f=image" +
"&bbox=" +
mapState.extent.xmin +
"," +
mapState.extent.ymin +
"," +
mapState.extent.xmax +
"," +
mapState.extent.ymax +
"&size=" + width + "," + height +
"&transparent=true" +
"&format=png";
var c = document.getElementById("printCanvas");
var ctx = c.getContext("2d");
c.onload = function(img)
{
ctx.drawImage(img, 0, 0, c.width, c.height);
ctx.globalAlpha = mapState.opacity; // This is the transparency for the overlay
}
c.width  = 658;
c.height = 394;
c.loadImages(coverageImage, mdsImage);

supported by the following bit of html:

<canvas id=”printCanvas”></canvas>

I hope this helps.

Regards,

Mark D

2 thoughts on “Printing Maps from Javascript Web Applications

  1. BestValueCopy

    Thanks for sharing!!!
    After a long time I found that because I want to add this facility for users in my website now I will try it and give you reply back what happens actually.

    Reply

Got something to say?

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s