Select to view content in your preferred language

Printing issue with graphics layer and legend

3276
16
05-11-2010 12:46 PM
JamesTanis
Emerging Contributor
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();
}
0 Kudos
16 Replies
JamesTanis
Emerging Contributor
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.
0 Kudos
JoseMachado
New Contributor
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
0 Kudos
AleksandrasKapitanovas
Deactivated User
Most likely he fixed this by forcing IE7 document mode:
<meta http-equiv="X-UA-Compatible" content="IE=7" />
0 Kudos
JamesTanis
Emerging Contributor
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>');
0 Kudos
ViktoriaMagnis
Emerging Contributor
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
0 Kudos
BenSayers
Emerging Contributor
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
0 Kudos
DeminHu
Deactivated User
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
0 Kudos
MikeMartin
Occasional Contributor
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.
0 Kudos
Todd
by
Regular Contributor
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
0 Kudos