Hide Table of Contents
View Print sample in sandbox
Print

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.21/dijit/themes/nihilo/nihilo.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.21/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.21/"></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>