Select to view content in your preferred language

Print output differences- 3.X vs 4.X

703
8
Jump to solution
09-04-2024 08:09 AM
SteveCole
Honored Contributor

As I keep working on migrating my 3.X app to 4.X, I keep hitting issues. Now, it's print output. The same basic code block, adjusted for 4.X differences, produces a vastly different output. The final part of a custom report generating tool is to produce a JPEG map and insert it into a HTML report output. The output from 3.X produces this:

3X_api_print_output_ex.jpg

The 4.X API output results in this:

4X_js_api_print_ex.jpg

It's almost as if there's a "reference scale" setting that I haven't adjusted but, from looking over the API reference, I can't see any. Is there one? There really isn't much to the code side of things so I'm kinda flummoxed but this.

FWIW, the relevant 3.X code:

			tractsShown = theTractLayer.visible;
			bgsShown = theBlockgroupLayer.visible;

			//Switch the labelling class for Tracts/Block Groups temporarily for proper print sizes
			theTractLayer.setLabelingInfo([ app.tractPrintClass ]);
			theBlockgroupLayer.setLabelingInfo([ app.bgPrintClass ]);
			
			if (!tractsShown) {
				theTractLayer.setVisibility(true);
			}
			
			if (!bgsShown) {
				theBlockgroupLayer.setVisibility(true);
			}

			if (highlightGeom != null) {				
				highlightSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_FORWARD_DIAGONAL,
				  new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
				  new Color([255,255,0.1]), 4),new Color([255,255,0,0.1]));
				
				highlightGraphic = new Graphic(highlightGeom, highlightSymbol,null,null);
				app.map.graphics.add(highlightGraphic);
				
			}
			
			pTemplate = new PrintTemplate();
			pTemplate.exportOptions = {
				width: 600,
				height: 400,
				dpi: 150
			};
			pTemplate.format = "jpg";
			pTemplate.layout = "MAP_ONLY";
			pTemplate.preserveScale = false;
			pTemplate.showAttribution = false;

			var params = new PrintParameters();
			params.map = app.map;
            params.async = false;            
			params.template = pTemplate;

			jpgMapDiv = theDocument.getElementById("jpegMap");
				
			thePrintTask = new PrintTask(url);
            window.setTimeout(function() {            
                thePrintTask.execute(params, function(result) {
                    jpgMapDiv.innerHTML = "<img src=\"" + result.url + "\" style=\"border:2px solid black;left:25%\"\>";
                    var oldExtent = app.preRptExtent;                    
                    app.map.setExtent(curExtent);
					//Restore the screen-centric label sizes for Tracts/Block Groups
					theTractLayer.setLabelingInfo([ app.tractScreenClass ]);
					theBlockgroupLayer.setLabelingInfo([ app.bgScreenClass ]);
					
					if (highlightGeom != null) {
						app.map.graphics.remove(highlightGraphic);
						highlightGraphic = null;
						highlightGeometry = null;		
					}					
                }, function(err) {
                    //Print task failed
                    app.map.graphics.remove(highlightGraphic);
					theTractLayer.setLabelingInfo([ app.tractScreenClass ]);
					theBlockgroupLayer.setLabelingInfo([ app.bgScreenClass ]);						
                    highlightGraphic = null;
                    highlightGeometry = null;                   
                });

                //Reset the current viewing status of the census tract / blockgroup layers
                if (!tractsShown) {
                    theTractLayer.setVisibility(false);
                }
                
                if (!bgsShown) {
                    theBlockgroupLayer.setVisibility(false);
                }                  
            },1000);

 

And the rewritten 4.X-

		var theTractLayer = app.map.findLayerById("censusTracts");
		var tractsShown = theTractLayer.visible;
		var theBlockgroupLayer = app.map.findLayerById("censusBlockGroups");
		var bgsShown = theBlockgroupLayer.visible;

		//Switch the labelling class for Tracts/Block Groups temporarily for proper print sizes
		theTractLayer.labelingInfo = [ app.tractPrintClass ];		
		theBlockgroupLayer.labelingInfo = [ app.bgPrintClass ];
		
		if (!tractsShown) {
			theTractLayer.visible = true;
		}
		
		if (!bgsShown) {
			theBlockgroupLayer.visible = true;
		}

		if (app.highlightGeom != null) {
			var highlightSymbol = new SimpleFillSymbol({
				  color: new Color([255,255,0,1]),
				  outline: new SimpleLineSymbol({
					cap: "round",
					color: new Color([255,255,0,1]),
					join: "round",
					miterLimit: 1,
					style: "solid",
					width: 2
				  }),
				  style: "forward-diagonal"
			});
			
			var highlightGraphic = new Graphic({geometry: app.highlightGeom, symbol: highlightSymbol});
			app.theView.graphics.add(highlightGraphic);
		}
		
		var pTemplate = new PrintTemplate();
		pTemplate.exportOptions = {
			width: 600,
			height: 400,
			dpi: 300
		};
		pTemplate.format = "jpg";
		pTemplate.layout = "map-only";
		pTemplate.scalePreserved = false;
		pTemplate.attributionVisible = false;

		var params = new PrintParameters();
		params.view = app.theView;           
		params.template = pTemplate;

		var jpgMapDiv = theDocument.getElementById("jpegMap");
		var oldExtent = app.preRptExtent;
		//app.theView.goTo(app.curExtent);	
			
		print.execute(app.printUrl, params).then(function(printResult) {
			jpgMapDiv.innerHTML = "<img src=\"" + printResult.url + "\" style=\"border:2px solid black;left:25%\"\>";		
			//Restore the screen-centric label sizes for Tracts/Block Groups
			theTractLayer.labelingInfo = [ app.tractScreenClass ];
			theBlockgroupLayer.labelingInfo = [ app.bgScreenClass ];
			
			if (app.highlightGeom != null) {
				app.theView.graphics.remove(highlightGraphic);
				highlightGraphic = null;
				app.highlightGeom = null;
				app.theView.goTo(oldExtent);				
			}							
		}).catch(function(printError) {
			//Print task failed
			app.theView.graphics.remove(highlightGraphic);
			theTractLayer.labelingInfo = [ app.tractScreenClass ];
			theBlockgroupLayer.labelingInfo = [ app.bgScreenClass ];						
			highlightGraphic = null;
			app.highlightGeom = null;
			app.theView.goTo(oldExtent);				
		});
0 Kudos
1 Solution

Accepted Solutions
Raleigh_GISGIS
Occasional Contributor

Did you try using the same DPI?  You have 150 in your 3.x code and 300 in your 4.x code.  Try setting it to 150 in 4.x.

View solution in original post

0 Kudos
8 Replies
JoelBennett
MVP Regular Contributor

This "should" be handled by the scalePreserved property of the PrintTemplate, in which case line 44 of your 4.x code should probably be set to true.

0 Kudos
SteveCole
Honored Contributor

Hey Joel, I have been playing with that setting but I don't think that's the way to go. The physical dimensions of the JPEG map export are different than the mapView's extent on screen so if you try to use scalePreserved (in concert with outScale), the resulting JPEG map won't accurately show the feature with the buffer I apply to it. Example-

scalePreservedOutputEx.jpg

I was getting inconsistent print map extents, which was super frustrating. I finally re-read the API docs and the goTo() method returns a promise so I think my code was behaving more async than sync. I added a when() after using goTo and wrapped the map export process inside that function at the map extents are behaving more like I would expect.

The thing I really want to resolve is the symbology and labels which get blown up out of proportion. Again, the print output is similar to what you experience inside desktop if you alter the Reference Scale property of the Data Frame. It's just that the layer & label symbology is not correctly scaling with map scale.

Export output vs onscreen map example-

export_vs_onscreen_ex.jpg

0 Kudos
JoelBennett
MVP Regular Contributor

If you examine the contents of the request to generate the printout, does it appear to be sending the graphics (i.e from app.theView.graphics) as JSON, or is it sending a screenshot of them?  It seems to me this problem could occur if it's doing the latter.

SteveCole
Honored Contributor

I hadn't considered looking at the request..

From what I can tell, it appears to be sending the request as JSON. I looked at the print request in the 3.X API for the same print area and the header sizes are similar (37k in 3.X vs 41k in 4.X). I'm guessing I'll have to submit an ESRI support ticket to figure this out.

The issues I've been describing are using the print.execute() option for printing rather than using the Print widget. I do use the Print widget in a different part of my app and that output is what I would expect-

PrintWidgetOutput.jpg

0 Kudos
BryanMc
Frequent Contributor

We had a similar experience with printing and JPG. However, when we changed to PNG32 the issue goes away. I went into the ArcGIS Server print task API endpoint and noticed this issue is in our ArcGIS Server software (10.9.1) and not in the JS API. Might be worth checking if a similar issue for you by changing to PNG to see if the issue persists. As well, without imagery, PNG might be a better output option than JPG.

SteveCole
Honored Contributor

Hey Bryan, thanks for the suggestion; it was something I had not tried. Unfortunately, it did not make a difference with my output. We're running v11.1 of Portal so I don't know if is changing things in terms of our situation vs yours.

0 Kudos
Raleigh_GISGIS
Occasional Contributor

Did you try using the same DPI?  You have 150 in your 3.x code and 300 in your 4.x code.  Try setting it to 150 in 4.x.

0 Kudos
SteveCole
Honored Contributor

Ugh. You know, changing the DPI parameter was a conscious decision when I migrated the code but the manner in which it's implemented was unexpected. Changing it back to 50 yielded the same print results so thanks for pointing to that.

My intent with bumping up the DPI was to increase the sharpness of the output image, much like when you bump up the DPI when exporting to a PDF. In reality, the export map function seems to have ended up just zooming into the map since the dpi I specified was doubled. Anyways, thanks again. Glad that my remaining migration issue is now solved.

0 Kudos