IE8 - Does Not Print map.graphics layer

JamesTrier

Good afternoon,

I'm building dynamic reports that pull tract data from our database.  I include a map of the location at the bottom of the page.  When I print the report in standard-compliant browsers, everything displays properly.  When using Internet Explorer 8, however, only the map itself prints - the map.graphics layer does not print.

Searched for a solution to this issue to no avail... this thread was the closest I found but had no resolution that seemed effective.  Tried selecting 'Print background images & colors' in IE preferences - no dice.

I don't believe I'm doing anything wrong with my function call to draw the graphics (they do display across all browsers on-screen), here it is for reference:

sendQuery = task.execute(query);
  sendQuery.then(function(loc) {
    symbol = new esri.symbol.SimpleFillSymbol();
    symbol.setColor(new dojo.Color([255,0,0,0.5]));
    gfx= loc.features[0].geometry;
    map.graphics.add(new esri.Graphic(gfx, symbol));
  });

The obvious answer, 'print from FF', unfortunately doesn't work because IE support is a requirement for the report.  Any thoughts or code snippets that can get me going in the right direction would be greatly appreciated!  Thanks in advance!

Jim

JamesTrier

I believe I solved this one, so I'll post what I did, hoping it helps someone else...

In addition to map highlights, the requirements called for a compass rose.  Decided to just add a DIV with a custom image, so I created one in PNG.  When I tested print layout, the compass rose didn't print, but the map highlights did!  To test further, I took the image out.  Sure enough, with the next print test, no highlights!

My theory at this point was that IE omitted the topmost graphics layer from printing.  I whipped up a 1x1 pixel #FFF PNG and added that to the top of the map and... voila!  The map printed properly, complete with highlight and compass rose. 

This solution is quite hackish, but then again, what IE code isn't?  🙂

I added two spans to the map DIV with the following CSS: 

#compass {   background : transparent url('../../../../images/compass.png') center no-repeat;   height:100px;   left:0;   position:absolute;   top:0;   width:100px;   z-index:10; } #onepixel {   background : transparent url('../../../../images/1by1.png') center no-repeat;   height:1px;   left:0;   position:absolute;   top:0;   width:1px;   z-index:9; }

Thanks jeff.pace for taking a look at the issue!