topic Re: Print Task examples? in ArcGIS JavaScript Maps SDK Questions

Print Task examples?

DavidMarquardt — Thu, 26 Dec 2013 21:54:58 GMT

Hello,

There don't seem to be too many examples of how to use the Print Task on the ESRI site. I'm curious to see what others have done.

Below is one I cobbled together based on some online resources (https://github.com/slead/jsapi/blob/master/printTask/printTask.html) . The script below has a drop down list that opens up a new window with the print result (not the most elegant, but does the job). I'm curious, though, to see what PrintTask is capable. Seems like the possibilities should be endless.

What have others done? What options have you been able to give the end user in designing the print result? Have you been able to avoid the popup blocker (pretty inherent in the example I give)?

Either sample scripts, or links to scripts that use print task would be appreciated. Just trying to see what is possible.

David

[HTML]<!doctype html>
<html>
<head>

<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=9" >
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Print Task Test</title>
<script>
    var dojoConfig = {
   async : true
    };
</script>
<link rel="Stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/tundra/tundra.css" />
<link rel = "stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css" />
<script src="http://js.arcgis.com/3.7/" type="text/javascript"></script>
<style>
    html, body, #window, #map {
     height: 100%;
     width: 100%;
     margin: 0;
     padding: 0;
     font-family:arial, helvetica, sans-serif;
    }

   #buttons{
    position: absolute;
    top: 10px;
    right: 18px;
    height: 20px;
    z-index:100;
    box-shadow: none;
    font-size:13px;
   }
</style>

</head>
<body class="tundra">
<div id="window">
     <div id="map" ></div>

     <div id="buttons">
    <button id="prnt" class="topButton" data-dojo-type="dijit/form/DropDownButton" ><span>Print</span>
     <div dojoType="dijit/Menu">
      <div id="png" data-dojo-type="dijit/MenuItem" label="Image(.png)" style='font-size: 13px;'></div>
      <div id="landscape" data-dojo-type="dijit/MenuItem" label="Landscape(PDF)" style='font-size: 13px;'></div>
      <div id="portrait" data-dojo-type="dijit/MenuItem" label="Portrait(PDF)" style='font-size: 13px;'></div>
     </div>
    </button>
     </div>
</div>
</body>
<script>
var map;
var PrintTask;
//var layerResults;

require ([
   "dojo/on",
   "dojo/_base/connect",
   "dojo/dom",
   "dojo/query",
   "dojo/parser",
   "esri/map",
    "esri/dijit/Scalebar",
   "esri/arcgis/utils",
   "esri/dijit/Print",
   "esri/tasks/PrintTask",
   "esri/tasks/PrintTemplate",
   "esri/dijit/Popup",
    "esri/dijit/Attribution",
   "dojo/dom-construct",
   "dojo/dom-class",
   "dojo/mouse",
   "dijit/form/Button",
   "dijit/Menu",
   "dijit/layout/BorderContainer",
   "dojo/domReady!"
   ],
   function (on, connect, dom, query, parser, Map, Scalebar, arcgisUtils, Print, PrintTask,
   PrintTemplate, Popup, esriConfig, Attribution,
   domConstruct, domClass, mouse, Button, Menu, BorderContainer){
    parser.parse();
    var ext = new esri.geometry.Extent({ "xmin": -17529487, "ymin": 1874364, "xmax": -5084316, "ymax": 7500129, "spatialReference": { "wkid": 102100} });
    map = new esri.Map("map", {
       extent: ext,
       showAttribution: false,
     });
    var tiled = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
    map.addLayer(tiled);
    // connect the dropdown list with options for the print template
    on(dom.byId("png"),'click', function () {
     printTaskSetup("MAP_ONLY", "png32");
    })
    on(dom.byId("landscape"),'click', function () {
     printTaskSetup("A4 Landscape", "PDF");
    })
    on(dom.byId("portrait"),'click', function () {
     printTaskSetup("A4 Portrait", "PDF");
    })
    // create print task
    function printTaskSetup(layout, format){
     var template = new esri.tasks.PrintTemplate();
     template.format = format;
     template.layout = layout;
     template.layoutOptions = {
       "scalebarUnit": "Miles",
       "copyrightText": "",
       "showAttribution": false
     }
     template.preserveScale = true;
     var params = new esri.tasks.PrintParameters();
     params.map = map;
     params.template = template;
     printTask = new esri.tasks.PrintTask("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task");
     printTask.execute(params, printResult);
    }
    function printResult(result) {
      window.open(result.url, "_blank")
    }
    function printError(error) {
      alert(error);
    }
   }
);
</script>
</html>[/HTML]

Re: Print Task examples?

Anonymous User — Mon, 30 Dec 2013 17:21:44 GMT

Hi, David. Take a look at the link below. Print Task was used for the tool farthest to the upper right. You're welcome to use whatever you need.

http://gisapps.fortsmithar.gov/javascript/ParcelMap.html

Re: Print Task examples?

GaneshSolai_Sambandam — Tue, 31 Dec 2013 10:00:06 GMT

[HTML]<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title></title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      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;
      }
      #map{ margin: 0; padding: 0; }
      #feedback {
        background: #fff;
        border: 2px solid #666;
        border-radius: 5px;
        bottom: 20px;
        color: #666;
        font-family: arial;
        height: auto;
        left: 20px;
        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 { padding: 10px 0 0 0; }
    </style>

    <script src="http://js.arcgis.com/3.7/"></script>
    <script>
      var app = {};
      require([
        "esri/arcgis/utils", "esri/dijit/Print",
        "esri/tasks/PrintTemplate", "esri/config",
        "dojo/_base/array", "dojo/dom", "dojo/parser",
        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
      ], function(
        arcgisUtils, Print,
        PrintTemplate, esriConfig,
        arrayUtils, dom, parser
      ) {
        parser.parse();

        app.webmapId = "8315cf7d20f0484e869c4791f70f4f15";
        app.printUrl = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task";

        esriConfig.defaults.io.proxyUrl = "/proxy";

        var webmap = arcgisUtils.createMap(app.webmapId, "map", {
          mapOptions: {
            center: [-85.673, 38.21],
            zoom: 10
          }
        });
        webmap.then(function(resp) {
          app.mapInfo = resp.itemInfo.item;
          app.map = resp.map;
          createPrintDijit(app.mapInfo.title);
          createPrint(dojo.byId('map_name').value);
        });

        function createPrint(printTitle) {
                var layoutTemplate, templateNames, mapOnlyIndex, templates;

                // create an array of objects 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"
          }
      }, {
          label: "Map Only (PNG)",
          format: "PNG32",
          layout: "MAP_ONLY",
          preserveScale: false,
          exportOptions: {
              width: 1024,
              height: 768,
              dpi: 96
          }
      }
    ];

                // create the print templates, could also use dojo.map
                var templates = [];
                dojo.forEach(layouts, function (lo) {
                    var t = new esri.tasks.PrintTemplate();
                    t.layout = lo.name;
                    t.label = lo.label;
                    t.format = lo.format;
                    t.layoutOptions = lo.options
                    templates.push(t);
                });

                printer = new esri.dijit.Print({
                    "map": app.map,
                    "templates": templates,
                    "asynch": false,
                    url: "http://argis.ualr.edu/ieagis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"
                }, dojo.byId("printButton"));
                printer.startup();

                dojo.connect(printer, "onPrintStart", function () {
                    this.templates[0].layoutOptions.titleText = dojo.byId("map_name").value;
                });
            }

        function createPrintDijit(printTitle) {
          var layoutTemplate, templateNames, mapOnlyIndex, templates;

          // create an array of objects 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 the 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.printer.startup();
        }

        function handleError(err) {
          console.log("Unable to get webmap from ArcGIS.com: ", err);
        }
      });
    </script>
</head>

<body class="tundra">
    <div data-dojo-type="dijit/layout/BorderContainer"
         data-dojo-props="design:'headline',gutters:false"
         style="width: 100%; height: 100%; margin: 0;">
      <div id="map"
           data-dojo-type="dijit/layout/ContentPane"
           data-dojo-props="region:'center'">

        <div id="feedback">
          <h3>
            ArcGIS.com Webmap and the Print Dijit
          </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>

            Map Title: <textarea rows=5 cols=30 id="map_name" name="map_name">AECAM</textarea><br /><br/>
      <span id="printButton"></span>

            <div id="info">
              The map is created from an <a href="http://help.arcgis.com/en/arcgisonline/help/#/Overview/010q00000042000000/">ArcGIS.com webmap</a> and
              <a href="http://help.arcgis.com/en/webapi/javascript/arcgis/help/jsapi/printtemplate.htm">print templates</a> are
              created manually. Refer to the documentation for more print template options (output formats, additional layouts, etc.).
            </div>

          </div>
        </div>
      </div>
    </div>
</body>
</html>
[/HTML]

Re: Print Task examples?

DavidMarquardt — Thu, 09 Jan 2014 19:13:59 GMT

Russell,

Thanks! I like the way you incorporate a user defined map title into the print result. I'll plan on incorporating that, thank you. Have you seen examples that use PrintTask, rather than Print dijit? I'm curious to see how others have used this tool.

David

Re: Print Task examples?

DavidMarquardt — Thu, 09 Jan 2014 19:16:32 GMT

Ganesh,

Thanks for the help! Have you done any work with PrintTask, instead of Print dijit?

David

Re: Print Task examples?

ReneRubalcava — Thu, 09 Jan 2014 21:50:01 GMT

I have standard print widget I use for all my apps.
https://github.com/odoe/esri-print-widget

It's meant to display a button you click and a print dialog shows up with dropdown menu for available templates.

It's used in this sample starter-kit here.
https://github.com/odoe/esri-js-starterkit

Re: Print Task examples?

DavidMarquardt — Fri, 10 Jan 2014 16:02:44 GMT

Thanks!

this is really helpful.

David

Re: Print Task examples?

ZhujingXia — Fri, 17 Jan 2014 13:02:23 GMT

Hi,

I download the packages for both Print_Widget_Master and the JS_Satert_Kit.
But when I try trun both application on my machine, they all got blank page.
Could some one let me know that how to use the code packages.
Thanks
Zhujing

Re: Print Task examples?

ReneRubalcava — Fri, 17 Jan 2014 13:40:26 GMT

I updated the README with some instructions and requirements for use.
https://github.com/odoe/esri-js-starterkit/blob/master/README.md

It requires having git, node, Grunt and bower installed.
http://git-scm.com/
http://nodejs.org/
http://gruntjs.com/
http://bower.io/