Community

Print widget generates blank output without error

149
2
Jump to solution
3 weeks ago
SamuelAG
by
New Contributor
3 weeks ago

Hello,

I am new to ArcGIS JavaScript API and trying to migrate from 3.X to 4.X. Have some problems with the print service in 4.X.

Try to add a MapImageLayer (esri/layers/MapImageLayer) into a Map (esri/Map) object then print into an image with this print API https://developers.arcgis.com/javascript/latest/api-reference/esri-rest-print.html . However I always got blank output image file without any http errors.  However, if I create the Map object with basemap like:

new Map({basemap: "topo-vector"});

then it can print something out. I tried the following code with the ArcGIS online sample website (https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=widgets-print) which uses print widget and got same blank output. 

Is there anything wrong with the code or miss anything? Any suggestions would be great.

Thanks a lot.

#########################Online testing code#########################

<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>Print widget | Sample | ArcGIS Maps SDK for JavaScript 4.29</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/light/main.css" />

<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
</style>

<script src="https://js.arcgis.com/4.28/"></script>
<script>
require(["esri/views/MapView", "esri/widgets/Print", "esri/WebMap", "esri/Map", "esri/rest/support/PrintParameters", "esri/rest/support/PrintTemplate","esri/layers/MapImageLayer", "esri/rest/support/ImageParameters"], (MapView, Print, WebMap, Map, PrintParameters, PrintTemplate, MapImageLayer,ImageParameters) => {
var map = new Map();
var imageParameters = new ImageParameters();
imageParameters.layerIds = [];
imageParameters.layerIds.push(0);
imageParameters.layerOption = ImageParameters.LAYER_OPTION_SHOW;
imageParameters.transparent = true;
var url = "https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer";
var layer = new MapImageLayer({ url: url, customParameters: imageParameters });
map.add(layer);
const view = new MapView({
container: "viewDiv",
map: map
});

view.when(() => {
const print = new Print({
view: view,
// specify your own print service
printServiceUrl:
"https://utility.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%..."
});

// Add widget to the top right corner of the view
view.ui.add(print, "top-right");
});
});
</script>
</head>

<body class="calcite">
<div id="viewDiv"></div>
</body>
</html>

Tags (1)
0 Kudos
2 Solutions

Accepted Solutions
MatthewDriscoll
by MVP Alum
MVP Alum
3 weeks ago

Not sure exactly why it's not working.  

However, I switched the MapImageLayer to TileLayer and it work.  Perhaps the large MapImageLayer is not rendering fast enough during the print/export?  A TileLayer will use a cache in order to render faster.

View solution in original post

SamuelAG
by
New Contributor
3 weeks ago

Hi Matthew,

Thanks a lot for your reply. Much appreciated for your thoughts! That is a good catch about cache difference between two types of layers. Maybe that is an alternative before MapImageLayer can be printed properly in future. 

Just repost the working version of the same print code below for others' reference in case encountering the similar issue.

#########################Online testing code#########################

<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>Print widget | Sample | ArcGIS Maps SDK for JavaScript 4.28</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.28/esri/themes/light/main.css" />

<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
</style>

<script src="https://js.arcgis.com/4.28/"></script>
<script>
require(["esri/views/MapView", "esri/widgets/Print", "esri/WebMap", "esri/Map", "esri/rest/support/PrintParameters", "esri/rest/support/PrintTemplate", "esri/rest/support/ImageParameters", "esri/layers/TileLayer"], (MapView, Print, WebMap, Map, PrintParameters, PrintTemplate, ImageParameters, TileLayer) => {
var map = new Map({});
var imageParameters = new ImageParameters();
imageParameters.layerIds = [];
imageParameters.layerIds.push(0);
imageParameters.layerOption = ImageParameters.LAYER_OPTION_SHOW;
imageParameters.transparent = true;
var url = "https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer";
var layer = new TileLayer({ url: url, customParameters: imageParameters });
map.add(layer);
const view = new MapView({
container: "viewDiv",
map: map,
});

view.when(() => {
const print = new Print({
view: view,
// specify your own print service
printServiceUrl:
"https://utility.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%..."
});

// Add widget to the top right corner of the view
view.ui.add(print, "top-right");
});
});
</script>
</head>

<body class="calcite">
<div id="viewDiv"></div>
</body>
</html>



View solution in original post

0 Kudos
2 Replies
MatthewDriscoll
by MVP Alum
MVP Alum
3 weeks ago

Not sure exactly why it's not working.  

However, I switched the MapImageLayer to TileLayer and it work.  Perhaps the large MapImageLayer is not rendering fast enough during the print/export?  A TileLayer will use a cache in order to render faster.

SamuelAG
by
New Contributor
3 weeks ago

Hi Matthew,

Thanks a lot for your reply. Much appreciated for your thoughts! That is a good catch about cache difference between two types of layers. Maybe that is an alternative before MapImageLayer can be printed properly in future. 

Just repost the working version of the same print code below for others' reference in case encountering the similar issue.

#########################Online testing code#########################

<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>Print widget | Sample | ArcGIS Maps SDK for JavaScript 4.28</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.28/esri/themes/light/main.css" />

<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
</style>

<script src="https://js.arcgis.com/4.28/"></script>
<script>
require(["esri/views/MapView", "esri/widgets/Print", "esri/WebMap", "esri/Map", "esri/rest/support/PrintParameters", "esri/rest/support/PrintTemplate", "esri/rest/support/ImageParameters", "esri/layers/TileLayer"], (MapView, Print, WebMap, Map, PrintParameters, PrintTemplate, ImageParameters, TileLayer) => {
var map = new Map({});
var imageParameters = new ImageParameters();
imageParameters.layerIds = [];
imageParameters.layerIds.push(0);
imageParameters.layerOption = ImageParameters.LAYER_OPTION_SHOW;
imageParameters.transparent = true;
var url = "https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer";
var layer = new TileLayer({ url: url, customParameters: imageParameters });
map.add(layer);
const view = new MapView({
container: "viewDiv",
map: map,
});

view.when(() => {
const print = new Print({
view: view,
// specify your own print service
printServiceUrl:
"https://utility.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%..."
});

// Add widget to the top right corner of the view
view.ui.add(print, "top-right");
});
});
</script>
</head>

<body class="calcite">
<div id="viewDiv"></div>
</body>
</html>



0 Kudos