Hide Table of Contents
Analysis
Data Reviewer
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Print
Explore in the sandbox
Open in CodePen
View live sample
Download as a zip file
Description
This sample shows how to create a print-friendly version of an ArcGIS API for JavaScript map. Note that this sample uses an ArcGIS Server export web map task.
The print widget is used in this sample. For more granular control over output from the ArcGIS Server 10.1 print service, use the printTask.
Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Print Dijit: Out of the Box Printing for the ArcGIS API for JavaScript</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.29/dijit/themes/nihilo/nihilo.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css">
<style>
html, body {
height: 100%; width: 100%;
margin: 0; padding: 0;
}
body{
background-color: #fff; overflow:hidden;
font-family: sans-serif;
}
label {
display: inline-block;
padding: 5px 5px 0 5px;
font-weight: 400;
font-size: 12pt;
}
.button {
width: 100%;
margin: 3px auto;
text-align: center;
}
#header {
padding-top: 4px;
padding-right: 15px;
color: #444;
font-size:16pt; text-align:right;font-weight:bold;
height:55px;
background: #fff;
border-bottom: 1px solid #444;
}
#subheader {
font-size:small;
color: #444;
text-align:right;
padding-right:20px;
}
#rightPane{
margin: 0;
padding: 10px;
background-color: #fff;
color: #421b14;
width: 180px;
}
.ds { background: #000; overflow: hidden; position: absolute; z-index: 2; }
#ds-h div { width: 100%; }
#ds-l div, #ds-r div { height: 100%; }
#ds-r div { right: 0; }
#ds .o1 { filter: alpha(opacity=10); opacity: .1; }
#ds .o2 { filter: alpha(opacity=8); opacity: .08; }
#ds .o3 { filter: alpha(opacity=6); opacity: .06; }
#ds .o4 { filter: alpha(opacity=4); opacity: .04; }
#ds .o5 { filter: alpha(opacity=2); opacity: .02; }
#ds .h1 { height: 1px; }
#ds .h2 { height: 2px; }
#ds .h3 { height: 3px; }
#ds .h4 { height: 4px; }
#ds .h5 { height: 5px; }
#ds .v1 { width: 1px; }
#ds .v2 { width: 2px; }
#ds .v3 { width: 3px; }
#ds .v4 { width: 4px; }
#ds .v5 { width: 5px; }
/* make all dijit buttons the same width */
.dijitButton .dijitButtonNode, #drawingWrapper, #printButton {
width: 160px;
}
.esriPrint {
padding: 0;
}
</style>
<script src="https://js.arcgis.com/3.29/"></script>
<script>
var app = {};
app.map = null; app.toolbar = null; app.tool = null; app.symbols = null; app.printer = null;
require([
"esri/map", "esri/toolbars/draw", "esri/dijit/Print",
"esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/LayerDrawingOptions",
"esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol", "esri/graphic",
"esri/renderers/ClassBreaksRenderer",
"esri/config",
"dojo/_base/array", "esri/Color", "dojo/parser",
"dojo/query", "dojo/dom", "dojo/dom-construct",
"dijit/form/CheckBox", "dijit/form/Button",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
], function(
Map, Draw, Print,
ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer,
LayerDrawingOptions,
SimpleMarkerSymbol, SimpleLineSymbol,
SimpleFillSymbol, Graphic,
ClassBreaksRenderer,
esriConfig,
arrayUtils, Color, parser,
query, dom, domConstruct,
CheckBox, Button
) {
parser.parse();
esriConfig.defaults.io.proxyUrl = "/proxy/";
app.map = new Map("map", {
center: [-90.733, 30.541],
zoom: 8
});
app.map.on("load", function() {
app.toolbar = new Draw(app.map);
app.toolbar.on("draw-end", addToMap);
});
// print dijit
app.printer = new Print({
map: app.map,
url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"
}, dom.byId("printButton"));
app.printer.startup();
var url = "https://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer";
var tiledLayer = new ArcGISTiledMapServiceLayer(url, { "id": "Ocean" });
app.map.addLayer(tiledLayer);
var layer = new ArcGISDynamicMapServiceLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer", {
id: "County Population",
opacity: 0.5
});
layer.setVisibleLayers([3]);
var layerDefs = [];
layerDefs[3] = "state_name = 'Louisiana'";
layer.setLayerDefinitions(layerDefs);
var renderer = new ClassBreaksRenderer(null, "pop2000");
var outline = new SimpleLineSymbol("solid", new Color([0,0,0,0.5]), 1);
var colors = [
new Color([255,255,178,0.5]),
new Color([254,204,92,0.5]),
new Color([253,141,60,0.5]),
new Color([240,59,32,0.5]),
new Color([189,0,38,0.5])
];
renderer.addBreak(0, 20000, new SimpleFillSymbol("solid", outline, colors[0]));
renderer.addBreak(20000, 50000, new SimpleFillSymbol("solid", outline, colors[1]));
renderer.addBreak(50000, 100000, new SimpleFillSymbol("solid", outline, colors[2]));
renderer.addBreak(10000, 1000000, new SimpleFillSymbol("solid", outline, colors[3]));
renderer.addBreak(1000000, 10000000, new SimpleFillSymbol("solid", outline, colors[4]));
var drawingOptions = new LayerDrawingOptions();
drawingOptions.renderer = renderer;
// set the drawing options for the relevant layer
// optionsArray index corresponds to layer index in the map service
var optionsArray = [];
optionsArray[3] = drawingOptions;
layer.setLayerDrawingOptions(optionsArray);
app.map.addLayer(layer);
// create a check box for each map layer
arrayUtils.forEach(["County Population", "Ocean"], function(id) {
new CheckBox({
id: "cb_" + id,
name: "cb_" + id,
checked: true,
onChange: function(bool) {
bool ?
app.map.getLayer(this.id.split("_")[1]).show() :
app.map.getLayer(this.id.split("_")[1]).hide();
}
}, domConstruct.create("input", {
id: "lyr_" + id
})).placeAt(dom.byId("layerToggle"));
// create a label for the check box
var label = domConstruct.create('label', {
"for": "cb_" + id,
"innerHTML": id
});
domConstruct.place(label, dom.byId("layerToggle"));
domConstruct.place(domConstruct.create("br"), dom.byId("layerToggle"));
});
// set up symbols for the various geometry types
app.symbols = {};
app.symbols.point = new SimpleMarkerSymbol("square", 10, new SimpleLineSymbol(), new Color([0, 255, 0, 0.75]));
app.symbols.polyline = new SimpleLineSymbol("solid", new Color([255, 128, 0]), 2);
app.symbols.polygon = new SimpleFillSymbol().setColor(new Color([255,255,0,0.25]));
app.symbols.circle = new SimpleFillSymbol().setColor(new Color([0, 0, 180, 0.25]));
// find the divs for buttons
query(".drawing").forEach(function(btn) {
var button = new Button({
label: btn.innerHTML,
onClick: function() {
activateTool(this.id);
}
}, btn);
});
function activateTool(type) {
app.tool = type.replace("freehand", "");
app.toolbar.activate(type);
app.map.hideZoomSlider();
}
function addToMap(evt) {
app.toolbar.deactivate();
app.map.showZoomSlider();
var graphic = new Graphic(evt.geometry, app.symbols[app.tool]);
app.map.graphics.add(graphic);
}
});
</script>
</head>
<body class="nihilo">
<div id="mainWindow"
data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline',gutters:false"
style="width: 100%; height: 100%; margin: 0;">
<div id="header"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'top'">
Print Dijit: Out of the Box Printing for the ArcGIS API for JavaScript
<div id="subheader">Requires ArcGIS Server 10.1</div>
</div>
<div id="map" class="shadow"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'center'">
<div id="ds">
<div id="ds-h">
<div class="ds h1 o1"></div>
<div class="ds h2 o2"></div>
<div class="ds h3 o3"></div>
<div class="ds h4 o4"></div>
<div class="ds h5 o5"></div>
</div>
<div id="ds-r">
<div class="ds v1 o1"></div>
<div class="ds v2 o2"></div>
<div class="ds v3 o3"></div>
<div class="ds v4 o4"></div>
<div class="ds v5 o5"></div>
</div>
</div>
</div>
<div id="rightPane"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'right'">
<div id="printButton"></div>
<hr />
<div id="drawingWrapper">
Add some graphics:
<div id="point" class="drawing">Point</div>
<div id="freehandpolyline" class="drawing">Freehand Polyline</div>
<div id="freehandpolygon" class="drawing">Freehand Polygon</div>
<div id="circle" class="drawing">Circle</div>
</div>
<hr />
<div id="layerToggle">
Toggle Layers: <br />
</div>
</div>
</div>
</body>
</html>