We have our own map server and I am trying to use the Print webmap example to create our print task, but it's not working. There is an error stating this is not a defined function:
map.then(function (resp) {
app.mapInfo = resp.itemInfo.item;
app.map = resp.map;
createPrintDijit(app.mapInfo.title);
});
I am using the example located at: Print webmap | ArcGIS API for JavaScript
The reason that I am using this code is that the print example does not show you how the code selects the type of printout: Print | ArcGIS API for JavaScript
Any ideas how I get this to work?
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Create a Map</title>
<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="http://js.arcgis.com/3.11/dijit/themes/soria/soria.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
<style>
html, body, #mapDiv
{
padding:0;
margin:0;
height:100%;
width:100%;
position:absolute;
z-index:0;
}
/* Printer CSS Begin */
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;
border: 2px solid #666;
border-radius: 5px;
bottom: 20px;
color: #666;
font-family: arial;
height: auto;
left: 20px;
top:50%;
margin: 5px;
padding: 10px;
position: absolute;
width: 300px;
z-index: 40;
}
#feedback a
{
border-bottom: 1px solid #888;
color: #666;
text-decoration: none;
}
#feedback a:hover, #feedback a:active, #feedback a:visited {
border: none;
color: #666;
text-decoration: none;
}
#note
{
padding: 0 0 10px 0;
}
#info, #information
{
padding: 10px 0 0 0;
}
/* Printer CSS End */
</style>
<script src="http://js.arcgis.com/3.11/"></script>
<script>
var map;
var app = {};
require(["esri/map", "esri/config",
"esri/dijit/Print",
"esri/geometry/Extent",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/FeatureLayer",
"esri/tasks/GeometryService",
"esri/tasks/PrintTemplate",
"dojo/_base/array",
"dojo/dom",
"dojo/on",
"dojo/parser",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"], function (Map, esriConfig, Print, Extent,
ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer,
FeatureLayer, GeometryService, PrintTemplate, arrayUtils, dom, on, parser
) {
/* The proxy comes before all references to web services */
/* Files required for security are proxy.config, web.config and proxy.ashx
- set security in Manager to Private, available to selected users and select Allow access to all users who are logged in
(Roles are not required)
/*
The proxy section is defined on the ESRI sample. I have included it as
part of the documentation reads that the measuring will not work.
I thought that might be important.
*/
// Proxy Definition Begin
//identify proxy page to use if the toJson payload to the geometry service is greater than 2000 characters.
//If this null or not available the project and lengths operation will not work.
// Otherwise it will do a http post to the proxy.
esriConfig.defaults.io.proxyUrl = "proxy.ashx";
esriConfig.defaults.io.alwaysUseProxy = false;
// Proxy Definition End
// set custom extent
var initialExtent = new Extent({
"xmin": 777229.03,
"ymin": 1133467.92,
"xmax": 848340.14,
"ymax": 1185634.58,
"spatialReference": {
"wkid": 3435
}
});
// create map and set slider style to small
var map = new Map("mapDiv", {
showAttribution: false,
sliderStyle: "small",
extent: initialExtent
});
// add imagery
var tiled = new ArcGISTiledMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Aerial_2014_Tiled/MapServer");
map.addLayer(tiled);
// set operational layers
var operationalLayer = new ArcGISDynamicMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Public/InternetVector/MapServer", { "opacity": 0.5 });
// add operational layers
map.addLayer(operationalLayer);
// declare geometry service
esriConfig.defaults.geometryService = new GeometryService("http://maps.decaturil.gov/arcgis/rest/services/Utilities/Geometry/GeometryServer");
map.then(function (resp) {
app.mapInfo = resp.itemInfo.item;
app.map = resp.map;
createPrintDijit(app.mapInfo.title);
});
function createPrintDijit(printTitle) {
var layoutTemplate, templateNames, mapOnlyIndex, tempplates;
// create an array of object that will be used to create print templates
var layouts = [{
name: "Letter ANSI A Landscape",
label: "Landscape (PDF)",
format: "pdf",
options: {
legendLayers: [], // empty array means no legend
scalebarUnit: "Miles",
titleText: printTitle + ", Landscape PDF"
}
}, {
name: "Letter ANSI A Portrait",
label: "Portrait (Image)",
format: "jpg",
options: {
legendLayers: [],
scalebarUnit: "Miles",
titleText: printTitle + ", Portrait JPG"
}
}];
// create print templates
var templates = arrayUtils.map(layouts, function (lo) {
var t = new PrintTemplate();
t.layout = lo.name;
t.label = lo.label;
t.format = lo.format;
t.layoutOptions = lo.options;
return t;
});
app.printer = new Print({
map: app.map,
templates: templates,
url: app.printUrl
}, dom.byId("print_button"));
app.print.startup();
}
}
);
</script>
</head>
<body class="soria">
<div id="mapDiv">
<!-- Feedback Begin -->
<div id="feeback">
<h3>
ArcGIS.com Webmap and the Print Dijit
</h3>
<!-- Info Begin -->
<div id="info">
<!-- Note Begin -->
<div id="note">
Note: This sample uses an ArcGIS Server version 10.1 export web map task.
</div>
<!-- Note End -->
<!-- Used for the print dijit -->
<div id="print_button"></div>
<!-- Info Begin -->
<div id="information">
The map is <a href="https://developers.arcgis.com/javascript/jsapi/esri.arcgis.utils-amd.html#createmap">created from an ArcGIS.com webmap</a> and
<a href="https://developers.arcgis.com/javascript/jsapi/printtemplate-amd.html">print templates</a> are
created manually. Refer to the documentation for more print template options (output formats, additional layouts, etc.).
</div>
<!-- Information End -->
</div>
<!-- Info End -->
</div>
<!-- Feeback End -->
</div>
</body>
</html>
