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

[JeffPace]

what function are you using to print? This is more than likely due to the wonderful fact the IE does not support svg and therefore using a vml graphics renderer.

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]

jeff.pace
what function are you using to print? This is more than likely due to the wonderful fact the IE does not support svg and therefore using a vml graphics renderer.

I'm using good ol' CTRL+P, which is what my users would most likely do as well.  Any way to convert the graphics from SVG to VML?

Thanks for taking a look,

Jim

EDIT:  Did some Googling, looks like VML is IE proprietary (of course).  Found some info on converting from SVG to VML with XSLT but I don't know if that can be done with the ESRI graphics?  I'm not all that familiar with XSLT...

[JamesTrier · Accepted solution]

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!

[JeffChapin]

I tried adding a topmost graphic like you said but it didn't help.  Luckily for me I found another way to solve it.  Try adding the IE compatibility meta tag to your page.  At a minimum make sure it includes the "IE=7" because "IE=edge" alone isn't enough.

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

[JeffPace]

that is great!!