Aha … Printing made easy

This is a standard question I get whenever I teach or meet someone who works with ArcGIS Server Java ADF “How do I print the map in my web application”

Unfortunately at version 9.2 printing is not made available out-of-the-box either in the mapping template or as an configurable task. However this could be done using a custom task. I find this approach not suitable to most users since

  • You might have multiples resources in the map
  • You might have graphics on the map

I have this simple solution of implementing the same print functionality but using Javascript. Sounds easy right! Infact its really easy.

Here are the two simple steps involved

  • Add the JavaScript code to the jsp page
  • Create a html link (anchor) or input button which calls the JavaScript print function

Before I go further for folks using the .Net Web ADF there is a sample and article on how to add a print task to the web app on the ArcGIS Server Development blog. (Here is the link)

Lets look at the actual code

Step 1

    Below is the JavaScript code and you can insert this code within <head> or <body> part of the page. What this code essentially does is looks for the “div” element which contains the map images (which might contain any number of images or graphics or tiles) and creates a new window to print which has the image, a basic header and footer message. You can customize this as needed.

    <script type="text/javascript">
    function printmap() {
    var header = "<h3>Print page header</h3>"
    var footer = "<b>http://somecompany.com © 2007 somecompany inc</b>"
    var obj = document.getElementById("EsriMapCell_map1");
    //alert(obj.innerHTML);
    var pwin = window.open("","Print Window");
    pwin.document.writeln(header);
    pwin.document.writeln(obj.innerHTML);
    pwin.document.writeln(footer);
    pwin.document.close();
    pwin.print();
    }
    </script>

    Step 2 :

      Now lets add a link to call the above print function. You an do this in many ways such as using a url link or a button or a span tag. Lets look at all the alternatives

      <a href="javascript:void(0)" onclick="printmap()">Print</a>

      OR

      <input type="button" value="Print" onclick="printmap()"/>

      OR

      <span onclick="printmap()">Print Map</span>

      Sample Output :
      1. The Print link is shown. Clicking on the link will open up a new window.
      Print Link - Click to see full image
      2. This is the print window with the header, image and footer information.
      Print window - Click to see full image

      Advertisements

      16 Responses to “Aha … Printing made easy”

      1. Anu Says:

        I’m trying to use this code in .NET web application but getting the following error.

        Maps[Map1] undefined
        (Map1 is my Map control name)

      2. voloda Says:

        This example doesn’t work in internet explorer.

      3. sathyaprasad Says:

        Voloda, I just checked in both IE(6,7) and Firefox it works fine.

      4. Raju Says:

        Nice idea. Work very well.
        For the people who are complaining… I think the quotes in the script may be causing the problems. If you change it to regular quotes, it should work.
        Thanks .

      5. su Says:

        i am trying to create a print task for the arcgis server application? your code is giving me a javascript error

      6. Alic Says:

        The Javascript error is from the double-quotes (replace with standard ones” and from the new window name (remove space in new window name), like:
        var mapPrinter=window.open(”,’PrintMap’,’height=800,width=1024′);

      7. Alic Says:

        P.S.: the document element id differs on wintel, I guess:

        var obj = document.getElementById(“MapCell_Map1”);

      8. Alic Says:

        Random thoughts: What’s with WordPress and the (seemingly random) quote substitution? It looks like they get substituted for what the code feels like at the moment – e.g., observe my post above.

        ‘ ” ” ‘ ‘ ” “” ” – just a little test

      9. Si Says:

        Thanks, this is a good little trick. You can get this to work with the .Net web adf as well, just need to go through and debug all the javascript errors. Use “MapCell_Map1” instead of “EsriMapCell_map1”. You also have to do some javascript replace operations to remove any code which fires js errors on the print page. Here is some sample code that worked for me, but depending on your app you may need to change things.

        function printmap() {
        var header = “Map”;
        var footer = “Copyright 2008“;
        var obj = document.getElementById(“MapCell_Map1”);
        var s = obj.innerHTML;

        s = s.replace(/CURSOR: crosshair; /g, “”);
        s = s.replace(“Maps[‘Map1’].pendingTiles.remove”,”return;”);
        s = s.replace(“Maps[‘Map1’].pendingTiles.remove”,”return;”);
        s = s.replace(“Maps[‘Map1’].pendingTiles.remove”,”return;”);
        s = s.replace(“Maps[‘Map1’].pendingTiles.remove”,”return;”);
        s = s.replace(“Maps[‘Map1’].keyFocus=true;”,””);

        var pwin = window.open(“blank.htm”,”Print”);
        pwin.document.writeln(header);
        pwin.document.writeln(s);
        pwin.document.writeln(footer);
        pwin.document.close();
        //pwin.print();
        }

      10. Cuast Says:

        In that explorador run this code, because this do nothing

      11. Mike S Says:

        First of all…Great job! I’ve been looking for this for 3 days!
        Two problems I’m experiencing:
        1)
        (using IE6 & IE7 & firefox)I’m using this with a ArcGis Server map service. When the page opens with the google map image with my Map service overlayed the Google map extent is way out side of the extent shown the area of my webpage. Any suggestions for setting the extent of the resulting “google layer” (if you will)?

        2)
        Also, My maps service layer seems to overlay properly but when you go to print preview or print the map the back ground is White (not transparent) there for blocking all the good google stuff under my layer from printing. This happens in IE6 and IE 7 and firefox .

        Any suggestions?

        It almost works for me!

        Any help would be appreciated!

      12. Johny Says:

        Hi there.

        This function work’s just great.
        But, when i print my map, the print resolution isn’t good enough. Is there a way to control the print resolution of the map??

        Any help would be appreciated.
        Thanks

      13. sathyaprasad Says:

        @Johny

        This script just prints whats shown on the browser. So if you want to improve print quality you will have to goto the webmap business object (com.esri.adf.web.data.WebMap) and set the output type of the image and/or DPI (by editing the managed bean property inside of context-attributes.xml). By default its PNG8 and 96 dpi.

      14. Johny Says:

        Where do i change that value?
        I’ve tried to change in my map, in esri:MapResourceItem DisplaySettings, but the application shows the map in a diferent scale (more zoom).
        Can i change this values just in this javascript funcion?

      15. Johny Says:

        Can anyone help me?

      16. Tom Says:

        Is there a JQuery solution for this so I can window.open(); into a pre written HTML page?
        Thanks


      Leave a Reply

      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

      %d bloggers like this: