how to create a map layer legend graphics from the print function arcgis server 10.1

ErmanTriutomo2 · ‎04-22-2013

Dear All Expert

I want to print the graphics layer of a web application API javascript into a layout that I have set myself and then can display the map legend.

I attached the html source code that can be run in a web browser chrome which can be done to printing graphical layers and prints inPDF format.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title></title>
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/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: 30px;
        margin: 5px;
        padding: 10px;
        top: 30px;
        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>var dojoConfig = { parseOnLoad: true };</script>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>

    <script>
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
   dojo.require("esri.layers.wms");
      dojo.require("esri.layers.FeatureLayer");
      dojo.require("esri.dijit.Print");

      var app = {};
      app.printUrl = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task";
   
   function init() {
        esri.config.defaults.io.proxyUrl = "/proxy/proxy.ashx"; 
        esri.config.defaults.io.corsEnabledServers.push("http://sampleserver6.arcgisonline.com");
        esri.config.defaults.io.corsEnabledServers.push("http://sampleserver1.arcgisonline.com");  
  
        app.map = new esri.Map("map", {
          basemap: "hybrid",
         center: [-98.215, 38.382],
          zoom: 7,
        });
    
        // get print templates from the export web map task
        var printInfo = esri.request({
          "url": app.printUrl,
          "content": { "f": "json" }
        });
 
        
  printInfo.then(handlePrintInfo, handleError);
  
      }

   function doQueries() {
   esri.config.defaults.io.proxyUrl = "/proxy/proxy.ashx";
   esri.config.defaults.io.corsEnabledServers.push("http://sampleserver6.arcgisonline.com");
    esri.config.defaults.io.corsEnabledServers.push("http://sampleserver1.arcgisonline.com");
        //Query all counties in Kansas
        var countyQueryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3");
        var countyQuery = new esri.tasks.Query();
        countyQuery.outFields = ["*"];
        countyQuery.returnGeometry = true;
        countyQuery.outSpatialReference = app.map.spatialReference;
        countyQuery.where = "STATE_NAME = 'Kansas'";
        countyQueryTask.execute(countyQuery, addCountyFeatureSetToMap);

        //Query all cities in Kansas
        var cityQueryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0/");
        var cityQuery = new esri.tasks.Query();
        cityQuery.outFields = ["*"];
        cityQuery.returnGeometry = true;
        cityQuery.outSpatialReference = app.map.spatialReference;
        cityQuery.where = "STATE_NAME = 'Kansas'";
        cityQueryTask.execute(cityQuery, addCityFeatureSetToMap);
      }

      function addCountyFeatureSetToMap(featureSet) {
        var symbol = new esri.symbol.SimpleFillSymbol();
        symbol.setColor(new dojo.Color([150,150,150,0.5]));

        //Create graphics layer for counties
        resultTemplate = new esri.InfoTemplate("${NAME}","${*}");
     
        //Add counties to the graphics layer
        dojo.forEach(featureSet.features, function(feature) {
          app.map.graphics.add(feature.setSymbol(symbol).setInfoTemplate(resultTemplate));
    //app.map.graphics.add(feature.setSymbol(symbol));
        });
      }

      function addCityFeatureSetToMap(featureSet) {
        var symbol = new esri.symbol.SimpleMarkerSymbol();
        symbol.setColor(new dojo.Color([0,0,255]));

        //Create graphics layer for cities
        resultTemplate2 = new esri.InfoTemplate("${CITY_NAME}","${*}");
        
       
        //Add cities to the graphics layer
        dojo.forEach(featureSet.features, function(feature) {
          app.map.graphics.add(feature.setSymbol(symbol).setInfoTemplate(resultTemplate2));
    //app.map.graphics.add(feature.setSymbol(symbol));
        });
      }
   
      function handlePrintInfo(resp) {
        var layoutTemplate, templateNames, mapOnlyIndex, templates;

        layoutTemplate = dojo.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 = dojo.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 = dojo.map(templateNames, function(ch) {
          var plate = new esri.tasks.PrintTemplate();
          plate.layout = plate.label = ch;
          plate.format = "PDF";
          plate.layoutOptions = { 
            "authorText": "May 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 esri.dijit.Print({
          "map": app.map,
          "templates": templates,
          url: app.printUrl
        }, dojo.byId("print_button"));
        app.printer.startup();
      }

      function handleError(err) {
        console.log("Something broke: ", err);
      }

      dojo.ready(init);
    </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 Using Layer WMS
           
          </h3>
      <button data-dojo-type="dijit.form.Button" onclick="doQueries()">Layer graphic</button>
   <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>
        </div>
      </div>
    </div>
  </body>
</html>

hopefully there are experts who can help me

Rgds

--Erman Triutomo--