Printing issue with graphics layer and legend

JamesTanis · ‎05-11-2010

I am having some weird behavior with the print page. First, I am using ESRI's street maps as my base layer then I have a graphics layer on top of along with a legend. The problems that I am having are if I am zoomed out to the state level and launch the print page the base map is pu into four tiles down the page, while the graphics layer is centered in the page and not in the correct location and the legend does not show up (Picture 1). Second, if I am zoomed into the a county or tract I have the same problem but this time there are less tiles for the base map and the legend shows up but with no background (Picture 2). Fianlly, if you use firefox the graphics layer or the lengend never show up in the print page. Any help would be greatly appreciated.

function clickheretoprint(divId, title, right, top, w, h) {

    if (right == null) right = 100;
    if (top == null) top = 25;
    if (w == null) w = 1000;
    if (h == null) h = 1000;
    if (title == null) title = "Print Screen";

    var disp_setting = "toolbar=yes,location=no,directories=yes,menubar=yes,";
    disp_setting += "scrollbars=yes,width=" + w + ", height=" + h + ", right=" + right + ", top=" + top;

    //get the html of the div
    var content_vlue = dojo.byId('mapDiv').innerHTML;
    //strip out the link tags else we'll link back to the mapper page
    content_vlue = content_vlue.replace(/<a/g, "<span");
    content_vlue = content_vlue.replace(/<\/a/g, "</span");

    var docprint = window.open("", "", disp_setting);
    docprint.document.open();
    docprint.document.write('<html><head><title>' + title + '</title>');
    docprint.document.write('<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script>');
    docprint.document.write('</head><body onLoad="self.print()"><left>');
    docprint.document.write('<div id="position" style="position:absolute;margin-left:50px;margin-top:50px;">');
    docprint.document.write(content_vlue);
    docprint.document.write('</left></body></html>');
    docprint.document.close();
    docprint.focus();
}

JamesTanis · ‎05-13-2010

I was finalyl able to get the print page to work. My next problem is I want the user to be able to right click the print page and be able to save it as an image. Currently though if the user does that it creates a seperate image for each tile, graphics layer, and legend.

JoseMachado · ‎08-16-2010

I was finalyl able to get the print page to work. My next problem is I want the user to be able to right click the print page and be able to save it as an image. Currently though if the user does that it creates a seperate image for each tile, graphics layer, and legend.

Hi, How did you managed to print the map correctly?
Thanks in advance,
JM

AleksandrasKapitanovas · ‎08-17-2010

Most likely he fixed this by forcing IE7 document mode:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

JamesTanis · ‎08-18-2010

Hi, How did you managed to print the map correctly?
Thanks in advance,
JM

Here is some code that I was using that fixed some of my issues. I could never get to correctly work in Firefox the SVG tags are all messed up using innerHTML. What I finally did was just create a print CSS.

function clickheretoprint(divId, title, right, top, w, h) {

    if (right == null) right = 100;
    if (top == null) top = 25;
    if (w == null) w = 1000;
    if (h == null) h = 1000;
    if (title == null) title = "Print Screen";

    var disp_setting = "toolbar=yes,location=no,directories=yes,menubar=yes,";
    disp_setting += "scrollbars=yes,width=" + w + ", height=" + h + ", right=" + right + ", top=" + top;

    //get the html of the div
    var content_vlue = document.getElementById('print2').innerHTML;
    //window.alert(content_vlue);
    //strip out the link tags else we'll link back to the mapper page
    content_vlue = content_vlue.replace(/<a/g, "<span");
    content_vlue = content_vlue.replace(/<\/a/g, "</span");
    content_vlue = content_vlue.replace(/svg/, "svg:svg");

   // var html = '<html><head><style type="text\/css">\n' +
     //          'body,html { text-align: center; margin-top:50px; margin-left:50px; }\n' +
       //        '<\/style><\/head><body>\n' + content_vlue +
         //      '<form><input type="button" onClick="window.close();" value="Close Window"><\/form>\n' +
           //    '<\/body><\/html>';

    var docprint = window.open("", "", disp_setting);
    docprint.document.open();
    // docprint.document.write(html);
    // docprint.document.write('<?xml version="1.1" standalone="no"?> \n');
    // docprint.document.write('<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> \n');
    docprint.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">');
    docprint.document.write('<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">');

    docprint.document.write('<head><title>' + title + '</title> ');
    docprint.document.write('<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script>');
    docprint.document.write('</head><body onLoad="$(\'print2\').innerHTML = \'' + content_vlue + '\'; self.print()"><div>');
    docprint.document.write('<div id="position" style="position:absolute;margin-left:50px;margin-top:50px;">');
    docprint.document.write(content_vlue);
    docprint.document.write('</div></body></html>');

ViktoriaMagnis · ‎09-28-2010

Hi

I am trying to use the same code, but I am running into two problems

1) the esri street service is mis-aligned
2) I can not get the map to be smaller in the print page

Thanks

Vicki

BenSayers · ‎09-29-2010

Hello,
I am trying to make a quick print page, or a page that simply shows the current map view with the relevant layers switched on and at the correct zoom level, or ideally a PDF.

Can anyone here help me at all?

I have looked at the Map2PDF and am unable to get this working. I have also followed what has been posted here and I get an HTML page with tiles all over the place.

Can anyone post a quick dump of a print.css? Or anything useful at all.

Many

DeminHu · ‎09-30-2010

1. Create a usercontrol for printing or print preview, in this control, desgin your layout, you can put map, legend, whatever in this control
2. use PrintDocument, PageVisual etc.

It works fine for me. Hope the following link could help you a little:

http://www.markusegger.com/blog/Development.aspx?messageid=30f65164-2185-49d8-b65a-4ddd8c2e1380

MikeMartin · ‎09-30-2010

Hello,
I am trying to make a quick print page, or a page that simply shows the current map view with the relevant layers switched on and at the correct zoom level, or ideally a PDF.

Can anyone here help me at all?

I have looked at the Map2PDF and am unable to get this working. I have also followed what has been posted here and I get an HTML page with tiles all over the place.

Can anyone post a quick dump of a print.css? Or anything useful at all.

Many

I found this to work (so far) with the 2.1 api:
        function printscreen(text) {
             text = document
             print(text)
             }

It creates a print screen of the map with all layers (cached and dynamic) and graphics. It does not work with the 1.6 api.

Todd · ‎11-04-2010

Exploring the Map2PF also...

Curious about the new 2.1 and if you have any sample code written for this using the 2.1 you'd share? and did you use one namespace (pointing to 2.1) or two+ ?

thanks!

Regards,
Todd