AnsweredAssumed Answered

ArcGIS JavaScript API Print Templates

Question asked by Geohab on Sep 10, 2014
Latest reply on Jan 20, 2015 by gschiopu

Hi All,

 

I'm using the "Print templates with esri.request" by replacing the "app.printUrl" and "var permitUrl" values with my ArcGIS server 10.1 PrintTask and FeatureLayer services respectively. However, this is not working at all. I think one of the reasons is to do with the "esriConfig.defaults.io.proxyUrl = "/proxy";" (line 65). I have pasted the complete code of the "Print templates with esri.request" from Print templates with esri.request | ArcGIS API for JavaScript. Can anyone show me which parts of the code I need to change with my own values in order for it to work properly?

 

<!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.10/js/dojo/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/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;
        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; }
    </style>
    <script src="http://js.arcgis.com/3.10/"></script>
    <script>
      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 = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task";


        esriConfig.defaults.io.proxyUrl = "/proxy";
        
        app.map = new esri.Map("map", {
          basemap: "hybrid",
          center: [-117.447, 33.906],
          zoom: 17,
          slider: false
        });


        // add graphics for pools with permits
        var permitUrl = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/PoolPermits/MapServer/1";
        var poolFeatureLayer = new FeatureLayer(permitUrl, {
          "mode": FeatureLayer.MODE_SNAPSHOT
        });
        app.map.addLayer(poolFeatureLayer);


        // 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);
        }
      });
    </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" class="shadow">
          <h3>
            Print Templates Created from Info Returned by the Print Service using 
            <a href="https://developers.arcgis.com/javascript/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>
            
            <!-- that will be used for the print dijit -->
            <div id="print_button"></div>


            <div id="info">
              <a href="https://developers.arcgis.com/javascript/jsapi/printtemplate.html">Print templates</a> are generated 
              from the Export Web Map Task's <a href="http://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/jsapi/esri.request-amd.html">esri.request</a>. 
            </div>


          </div>
        </div>
      </div>
    </div>
  </body>
</html>

 

 

Outcomes