mleahyesri-ca-esridist

Printing web maps - rectangular PictureMarkerSymbol graphics incorrectly scaled....

Discussion created by mleahyesri-ca-esridist Employee on Feb 7, 2013
Latest reply on Feb 15, 2013 by jmoulds-esristaff
Hello all,

I think this is a Python issue, because I believe it occurs at the point when the arcpy.mapping.ConvertWebMapToMapDocument() function is used to translate Web_Map_as_JSON data submitted by web applications into map documents.  The problem I have encountered (using server 10.1 SP1), is that if a graphic has a picture marker symbol using an image that is wider than it is tall, the same graphic in a printed copy of the web map will appear to be scaled up in size.  It looks like it gets scaled by a factor equal to the ratio of the width to the height.

It's easier to explain with samples: Open the print task web map from the help documentation (http://help.arcgis.com/en/webapi/javascript/arcgis/samples/widget_print_esri_request/index.html), then open the browser's developer console in (chrome/IE) or Firebug in Firefox, and execute this code:

with (app.map.graphics)
{
    clear();
    add(new esri.Graphic(
        new esri.geometry.Point(-13074375.841524666,4016210.98226017,app.map.spatialReference),
        new esri.symbol.PictureMarkerSymbol("http://i48.tinypic.com/jzjid.png",43,11))); // src img size: 43x11
    add(new esri.Graphic(
        new esri.geometry.Point(-13074075.841524666,4016210.98226017,app.map.spatialReference),
        new esri.symbol.PictureMarkerSymbol("http://i50.tinypic.com/33uq242.png",43,43))); // src img size: 43x43
    add(new esri.Graphic(
        new esri.geometry.Point(-13073775.841524666,4016210.98226017,app.map.spatialReference),
        new esri.symbol.PictureMarkerSymbol("http://i46.tinypic.com/123midj.png",11,43))); // src img size: 11x43
}


You should see three icons on the map with varying dimensions.  Now try printing a map...you will see the problem I described with the first icon on the left, that is originally 43px wide and 11px high.  The resulting size I believe works out to more or less the equivalent of: 43px high, and (43*(43/11))px wide.

Now try the following:

with (app.map.graphics)
{
    clear();
    add(new esri.Graphic(
        new esri.geometry.Point(-13074375.841524666,4016210.98226017,app.map.spatialReference),
        new esri.symbol.PictureMarkerSymbol("http://i48.tinypic.com/jzjid.png",43/(43/11),11/(43/11)))); // src img size: 43x11
    add(new esri.Graphic(
        new esri.geometry.Point(-13074075.841524666,4016210.98226017,app.map.spatialReference),
        new esri.symbol.PictureMarkerSymbol("http://i50.tinypic.com/33uq242.png",11,43))); // src img size: 43x43
    add(new esri.Graphic(
        new esri.geometry.Point(-13073775.841524666,4016210.98226017,app.map.spatialReference),
        new esri.symbol.PictureMarkerSymbol("http://i46.tinypic.com/123midj.png",22,43))); // src img size: 11x43
    add(new esri.Graphic(
        new esri.geometry.Point(-13074375.841524666,4015910.98226017,app.map.spatialReference),
        new esri.symbol.PictureMarkerSymbol("http://i50.tinypic.com/33uq242.png",11,11))); // src img size: 43x43
    add(new esri.Graphic(
        new esri.geometry.Point(-13074075.841524666,4015910.98226017,app.map.spatialReference),
        new esri.symbol.PictureMarkerSymbol("http://i50.tinypic.com/33uq242.png",43,11))); // src img size: 43x43
    add(new esri.Graphic(
        new esri.geometry.Point(-13073775.841524666,4015910.98226017,app.map.spatialReference),
        new esri.symbol.PictureMarkerSymbol("http://i46.tinypic.com/123midj.png",11,86))); // src img size: 11x43
}


The top-left icon is now much smaller - I have shrunk the icon by the same factor that it appears to be expanded by when printed.  I've also tried a few other variations with the other graphics (with source images that have 43x43 and 11x43 dimensions).  Now print another map...it appears now that the top-left icon has been scaled back to its original size.  With the remaining examples, you'll see that the dimensions are not the same in the output PDF, unless the size of the graphic is the same aspect ratio of the source image graphic (e.g., the bottom-left graphic).

I could try to avoid this problem by ensuring that I use square graphics in my application, with transparent backgrounds for rectangular symbols.  However, that will result in relatively large areas in the web-map display that will resolve mouse click/move events to the corresponding point graphic.

Alternatively, I could work around this in client-side code to alter the symbols before calling a print task...or I could create a custom print task that parses Web_Map_as_JSON text and scales symbol that I know will be affected by this before using the JSON text to create a map document.

Would anyone else here know of this problem, and/or have any suggestions?

Outcomes