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.