I'm trying to set up a print widget using the ArcGIS Javascript API 3.17. However, the print task is blocked before creating an output. The combobox properly retrieves the print task url, but before the PDF is created, the console shows "TypeError: b is undefined" for http://js.arcgis.com/3.17/esri/tasks/PrintTask.js:25:13.
Map is created in Map.js
var map;
var baseMapLayerWorld;
require([
"esri/map", "esri/dijit/Search", "esri/layers/ArcGISDynamicMapServiceLayer","esri/layers/FeatureLayer", "esri/InfoTemplate", "dojo/domReady!"
], function (Map, Search, DynamicMapServiceLayer, FeatureLayer, InfoTemplate) {
baseMapLayerWorld = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer");
map = new Map("map", {
center: [-150, -17], // lon, lat
zoom: 8
});
map.addLayers([baseMapLayerWorld);
});
The print widget is implemented in Print.js:
var app = {};
require([
"esri/map", "esri/layers/FeatureLayer",
"esri/dijit/Print", "esri/tasks/PrintTemplate",
"esri/request", "esri/config",
"dojo/_base/array", "dojo/dom", "dojo/parser",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
], function(
Map, FeatureLayer,
Print, PrintTemplate,
esriRequest, esriConfig,
arrayUtils, dom, parser
) {
parser.parse();
app.printUrl = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task";
esriConfig.defaults.io.proxyUrl = "http://our-server/Java/proxy.jsp";
// get print templates from the export web map task
var printInfo = esriRequest({
"url": app.printUrl,
"content": { "f": "json" }
});
printInfo.then(handlePrintInfo, handleError);
function handlePrintInfo(resp) {
var layoutTemplate, templateNames, mapOnlyIndex, templates;
layoutTemplate = arrayUtils.filter(resp.parameters, function(param, idx) {
return param.name === "Layout_Template";
});
if ( layoutTemplate.length === 0 ) {
console.log("print service parameters name for templates must be \"Layout_Template\"");
return;
}
templateNames = layoutTemplate[0].choiceList;
// remove the MAP_ONLY template then add it to the end of the list of templates
mapOnlyIndex = arrayUtils.indexOf(templateNames, "MAP_ONLY");
if ( mapOnlyIndex > -1 ) {
var mapOnly = templateNames.splice(mapOnlyIndex, mapOnlyIndex + 1)[0];
templateNames.push(mapOnly);
}
// create a print template for each choice
templates = arrayUtils.map(templateNames, function(ch) {
var plate = new PrintTemplate();
plate.layout = plate.label = ch;
plate.format = "PDF";
plate.layoutOptions = {
"authorText": "Made by: Esri's JS API Team",
"copyrightText": "<copyright info here>",
"legendLayers": [],
"titleText": "Pool Permits",
"scalebarUnit": "Miles"
};
return plate;
});
// create the print dijit
app.printer = new Print({
"map": app.map,
"templates": templates,
url: app.printUrl
}, dom.byId("print_button"));
app.printer.startup();
}
function handleError(err) {
console.log("Something broke: ", err);
}
});
They come together in the index.html:
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="https://js.arcgis.com/3.17/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.18/dojox/layout/resources/ExpandoPane.css">
<link rel="stylesheet" href="css/widget_styles.css">
<script src="https://js.arcgis.com/3.17/"></script>
<script type="text/javascript">
dojo.require("dojox.layout.ExpandoPane");
</script>
<script src="js/Map.js"></script>
<script src="js/Legend.js"></script>
<script src="js/Search.js"></script>
<script src="js/Print.js"></script>
</head>
<body class="claro">
<div id="content"
data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline', gutters:true"
style="width: 100%; height: 100%; margin: 0;">
<div id="rightPane"
data-dojo-type="dojox/layout/ExpandoPane"
data-dojo-props="region:'right',title:'Widgets',startExpanded:false">
<div data-dojo-type="dijit/layout/AccordionContainer">
<div data-dojo-type="dijit/layout/ContentPane" id="legendPane"
data-dojo-props="title:'Légende', selected:true">
<div id="legendDiv"></div>
</div>
<div data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="title:'Pane 2'">
</div>
</div>
</div>
<div id="map"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'center'"
style="overflow: hidden;width: 100%; height: 100%; margin: 0;">
<div id="feedback" class="shadow">
<h3>
Print Templates Created from Info Returned by the Print Service using
<a href="https://developers.arcgis.com/javascript/3/jsapi/esri.request-amd.html">esri.request</a>
</h3>
<div id="info">
<div id="note">
Note: This sample uses an ArcGIS Server version 10.1 export web map task.
</div>
<div id="print_button"></div>
<div id="info">
<a href="https://developers.arcgis.com/javascript/3/jsapi/printtemplate.html">Print templates</a> are generated
from the Export Web Map Task's <a href="https://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task">Layout_Template parameter</a>. This info is retrieved from the service
using <a href="https://developers.arcgis.com/javascript/3/jsapi/esri.request-amd.html">esri.request</a>.
</div>
</div>
</div>
</div>
<div id="search"></div>
</div>
</body>
</html>
Other parts of my app that may be involved:
Legend.js:
var toc, layerInfo;
require([
"esri/map", "esri/layers/ArcGISDynamicMapServiceLayer",
"dojo/_base/array", "dojo/parser", "agsjs/dijit/TOC",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dijit/layout/AccordionContainer", "dojo/domReady!"
], function (
Map, ArcGISDynamicMapServiceLayer,
arrayUtils, parser, TOC
) {
parser.parse();
map.on("layers-add-result", function (evt) {
toc = new TOC({
map: map,
layerInfos: [
{
layer: baseMapLayerWorld,
title: "FDP Esri",
collapsed: true
//layerList: layerInfo
}
]
}, 'legendDiv');
toc.startup();
});
});
Search.js:
require([
"esri/map", "esri/dijit/Search", "esri/layers/ArcGISDynamicMapServiceLayer","esri/layers/FeatureLayer", "esri/InfoTemplate", "dojo/domReady!"
], function (Map, Search, DynamicMapServiceLayer, FeatureLayer, InfoTemplate) {
var search = new Search({
enableButtonMode: true, //this enables the search widget to display as a single button
enableLabel: false,
enableInfoWindow: true,
showInfoWindowOnSelect: true,
map: map
}, "search");
var sources = search.get("sources");
//Push the sources used to search, by default the ArcGIS Online World geocoder is included. In addition there is a feature layer of US congressional districts. The districts search is set up to find the "DISTRICTID". Also, a feature layer of senator information is set up to find based on the senator name.
sources.push({
featureLayer: new FeatureLayer("http://ourserver:6080/arcgis/rest/services/Commune/WATER/MapServer/1"),
searchFields: ["NUMERO"],
displayField: "NUMERO",
exactMatch: true,
outFields: ["*"],
name: "A feature",
placeholder: "5000",
maxResults: 6,
maxSuggestions: 6,
//Create an InfoTemplate and include three fields
infoTemplate: new InfoTemplate("My info template", "Some Information: ${MYFIELD}"),
enableSuggestions: true,
minCharacters: 0
});
//Set the sources above to the search widget
search.set("sources", sources);
search.startup();
});
widget_styles.css:
html, body {
height: 97%;
width: 98%;
margin: 1%;
}
#search {
display: block;
position: absolute;
z-index: 2;
top: 20px;
left: 74px;
}
#rightPane {
width: 20%;
}
#map {
width: 75%;
}
#legendPane {
border: solid #97DCF2 1px;
}
h3 { margin: 0 0 5px 0; border-bottom: 1px solid #444; padding: 0 0 5px 0; text-align: center; }
.shadow {
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px #888;
box-shadow: 0 0 5px #888;
}
#feedback {
background: #fff;
color: #000;
position: absolute;
font-family: arial;
height: auto;
right: 20px;
margin: 5px;
padding: 10px;
top: 20px;
width: 300px;
z-index: 40;
}
#feedback a {
border-bottom: 1px solid #888;
color: #444;
text-decoration: none;
}
#feedback a:hover, #feedback a:active, #feedback a:visited {
border: none;
color: #444;
text-decoration: none;
}
#note { font-size: 80%; font-weight: 700; padding: 0 0 10px 0; }
#info { padding: 10px 0 0 0; }