topic Tutorial: Advanced web map printing/exporting using arcpy.mapping in ArcGIS JavaScript Maps SDK Questions

Tutorial: Advanced web map printing/exporting using arcpy.mapping

HabG_ — Fri, 24 Oct 2014 09:53:31 GMT

Hi All,

I have followed the step-by-step instructions of the (

Tutorial: Advanced web map printing/exporting using arcpy.mapping

) tutorial in ArcGIS Resources and it all works well. I have tested the geoprocessing service in ArcMap using a GIS server connection to my ArcGIS for Server and it works well. I copied and pasted the ArcGIS API for JavaScript code to the sandbox and changed the URLs of the map service and geoprocessing service to my server and run it. The results show that everything displayed well, however when I clicked on the print button it doesn't print anything. I know the HTML version used in this example is HTML 4.01 and JavaScript API version is 3.0. Can anyone please help me fix the print problem and change the code to the current version of JavaScript API 11 (or 10) and HTML 5?

Thanks

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; 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"/>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dijit/themes/claro/claro.css">  
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/"></script>
    <script type="text/javascript" language="Javascript">
      dojo.require("esri.map");
      dojo.require("esri.tasks.PrintTask");
      dojo.require("dijit.form.Button");
      dojo.require("dijit.form.CheckBox");      
      dojo.require("dijit.form.ComboBox");
      
      var layer, map, visible = [];
      var printTask, params;
      
      function init() {
        var startExtent = new esri.geometry.Extent({"xmin":-2260000,"ymin":-1500000,"xmax":2250000,"ymax":1220000,"spatialReference":{"wkid":102008}});
        map = new esri.Map("map", {extent:startExtent});
        
        var dynUrl = "http://myserver:6080/arcgis/rest/services/USA/ConterminousUSA/MapServer";
        layer = new esri.layers.ArcGISDynamicMapServiceLayer(dynUrl, { "id": "ConterminousUSA" });
        
        if (layer.loaded) { 
          buildLayerList(layer); 
        } 
        else { 
          dojo.connect(layer, "onLoad", buildLayerList); 
        }
        
        
  var printUrl = "http://myserver:6080/arcgis/rest/services/USA/AdvancedHighQualityPrinting/GPServer/AdvancedHighQualityPrinting";
  printTask = new esri.tasks.PrintTask(printUrl, {async: true});
  params = new esri.tasks.PrintParameters();
        params.map = map;     
      }
      
      
      function buildLayerList(layer) { 
        var items = dojo.map(layer.layerInfos,function(info,index){ 
          if (info.defaultVisibility) { 
            visible.push(info.id); 
          } 
          return "<input type='checkbox' class='list_item' checked='" + (info.defaultVisibility ? "checked" : "") + "' id='" + info.id + "' onclick='updateLayerVisibility();' /><label for='" + info.id + "'>" + info.name + "</label>"; 
        }); 

        dojo.byId("layer_list").innerHTML = items.join(); 

        layer.setVisibleLayers(visible); 
        map.addLayer(layer); 

      } 

      function updateLayerVisibility() { 
        var inputs = dojo.query(".list_item"), input; 
     
        visible = []; 

        dojo.forEach(inputs,function(input){ 
          if (input.checked) { 
              visible.push(input.id); 
          } 
          }); 
        //if there aren't any layers visible set the array to be -1 
        if(visible.length === 0){ 
          visible.push(-1); 
        } 
        layer.setVisibleLayers(visible); 
      } 
      
      
      
      function print(){
        var layout = dojo.byId("layout");
        var index = layout.selectedIndex;
  var selectedValue_layout = layout.options[index].value;
  var format = dojo.byId("format");
        var index = format.selectedIndex;
  var selectedValue_format = format.options[index].value;
  var georef_info = dojo.byId("georef_info");
        var index = georef_info.selectedIndex;
  var selectedValue_georef_info = georef_info.options[index].value;

  var legendLayer = new esri.tasks.LegendLayer();
  legendLayer.layerId = "ConterminousUSA";
  legendLayer.subLayerIds = [];
  if (CapitalCities.checked == true)
      {
      legendLayer.subLayerIds.push(0);
      }
  if (InterstateHighways.checked == true)
      {
      legendLayer.subLayerIds.push(1);
      }
      if (Rivers.checked == true)
      {
      legendLayer.subLayerIds.push(2);
      }
      if (Lakes.checked == true)
      {
      legendLayer.subLayerIds.push(3);
      }
      if (StateBoundaries.checked == true)
      {
      legendLayer.subLayerIds.push(4);
      }

        params.template = {layout: selectedValue_layout, format: selectedValue_format, layoutOptions: {legendLayers:[legendLayer]}};
        params.extraParameters = {Georef_info: selectedValue_georef_info};
        printTask.execute(params, printComplete);
      }
      
      function printComplete(result){
        window.open(result.url);
      }


      dojo.addOnLoad(init);


    </script>


  </head>


  <body class="claro">
    <div id="map" style="width:1000px; height:600px; border:1px solid #000;"></div>
    <br />
    Layout Template: 
    <select id="layout" >
      <OPTION value="CentralUSA">CentralUSA</OPTION> 
  <OPTION value="ConterminuousUSA">ConterminuousUSA</OPTION>     
  <OPTION value="NortheasternUSA">NortheasternUSA</OPTION>
  <OPTION value="NorthwesternUSA">NorthwesternUSA</OPTION>
  <OPTION value="SouthernUSA">SouthernUSA</OPTION>
  <OPTION value="SouthwesternUSA">SouthwesternUSA</OPTION>
    </select>
      Format:
    <select id="format">
      <OPTION value="PDF">PDF</OPTION> 
  <OPTION value="PNG">PNG</OPTION>     
    </select>
      Include Georef info?
    <select id="georef_info">
      <OPTION value="True">True</OPTION> 
  <OPTION value="False">False</OPTION>     
    </select>
    <br /><br />
    Table of Contents: <br /><span id="layer_list"></span>
    <br /><br />
    Include in Legend: <br />
    <label><input type="checkbox" name="CapitalCities" checked="checked">Capital Cities</label>
  <label><input type="checkbox" name="InterstateHighways" checked="checked">Interstate Highways</label>
  <label><input type="checkbox" name="Rivers" checked="checked">Rivers</label>
  <label><input type="checkbox" name="Lakes" checked="checked">Lakes</label>
  <label><input type="checkbox" name="StateBoundaries" checked="checked">State Boundaries</label>
  <br /><br />
  <input type="button" id="print" value="Print" onclick="print();"/>
  </body>
</html>

Re: Tutorial: Advanced web map printing/exporting using arcpy.mapping

HabG_ — Fri, 24 Oct 2014 10:19:43 GMT

I have changed the codes similar to the one below (please note I have changed the name of my server to "myserver") and it printed a PDF like the image below, but I want to print only the image area not the text information.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Simple Map</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
    <script src="http://js.arcgis.com/3.11/"></script>
    <script>
  require(["esri/map", "esri/tasks/PrintTask", "dijit/form/Button", "dijit/form/CheckBox", "dijit/form/ComboBox"],
    function(Map, PrintTask, Button, CheckBox, ComboBox) {
      
      var layer, map, visible = [];
      var printTask, params;
      
      function init() {
        var startExtent = new esri.geometry.Extent({"xmin":-2260000,"ymin":-1500000,"xmax":2250000,"ymax":1220000,"spatialReference":{"wkid":102008}});
        map = new esri.Map("map", {extent:startExtent});
        
        var dynUrl = "http://myserver:6080/arcgis/rest/services/USA/ConterminousUSA/MapServer";
        layer = new esri.layers.ArcGISDynamicMapServiceLayer(dynUrl, { "id": "ConterminousUSA" });
        
        if (layer.loaded) { 
          buildLayerList(layer); 
        } 
        else { 
          dojo.connect(layer, "onLoad", buildLayerList); 
        }
        
        
  var printUrl = "http://myserver:6080/arcgis/rest/services/USA/AdvancedHighQualityPrinting/GPServer/AdvancedHighQualityPrinting";
  printTask = new esri.tasks.PrintTask(printUrl, {async: true});
  params = new esri.tasks.PrintParameters();
        params.map = map;     
      }
      
      
      function buildLayerList(layer) { 
        var items = dojo.map(layer.layerInfos,function(info,index){ 
          if (info.defaultVisibility) { 
            visible.push(info.id); 
          } 
          return "<input type='checkbox' class='list_item' checked='" + (info.defaultVisibility ? "checked" : "") + "' id='" + info.id + "' onclick='updateLayerVisibility();' /><label for='" + info.id + "'>" + info.name + "</label>"; 
        }); 

        dojo.byId("layer_list").innerHTML = items.join(); 

        layer.setVisibleLayers(visible); 
        map.addLayer(layer); 

      } 

      function updateLayerVisibility() { 
        var inputs = dojo.query(".list_item"), input; 
     
        visible = []; 

        dojo.forEach(inputs,function(input){ 
          if (input.checked) { 
              visible.push(input.id); 
          } 
          }); 
        //if there aren't any layers visible set the array to be -1 
        if(visible.length === 0){ 
          visible.push(-1); 
        } 
        layer.setVisibleLayers(visible); 
      } 
      
      
      
      function print(){
        var layout = dojo.byId("layout");
        var index = layout.selectedIndex;
  var selectedValue_layout = layout.options[index].value;
  var format = dojo.byId("format");
        var index = format.selectedIndex;
  var selectedValue_format = format.options[index].value;
  var georef_info = dojo.byId("georef_info");
        var index = georef_info.selectedIndex;
  var selectedValue_georef_info = georef_info.options[index].value;

  var legendLayer = new esri.tasks.LegendLayer();
  legendLayer.layerId = "ConterminousUSA";
  legendLayer.subLayerIds = [];
  if (CapitalCities.checked == true)
      {
      legendLayer.subLayerIds.push(0);
      }
  if (InterstateHighways.checked == true)
      {
      legendLayer.subLayerIds.push(1);
      }
      if (Rivers.checked == true)
      {
      legendLayer.subLayerIds.push(2);
      }
      if (Lakes.checked == true)
      {
      legendLayer.subLayerIds.push(3);
      }
      if (StateBoundaries.checked == true)
      {
      legendLayer.subLayerIds.push(4);
      }

        params.template = {layout: selectedValue_layout, format: selectedValue_format, layoutOptions: {legendLayers:[legendLayer]}};
        params.extraParameters = {Georef_info: selectedValue_georef_info};
        printTask.execute(params, printComplete);
      }
      
      function printComplete(result){
        window.open(result.url);
      }


      dojo.addOnLoad(init);
      
    });


    </script>


  </head>


  <body class="claro">
    <div id="map" style="width:1000px; height:600px; border:1px solid #000;"></div>
    <br />
    Layout Template: 
    <select id="layout" >
      <OPTION value="CentralUSA">CentralUSA</OPTION> 
  <OPTION value="ConterminuousUSA">ConterminuousUSA</OPTION>     
  <OPTION value="NortheasternUSA">NortheasternUSA</OPTION>
  <OPTION value="NorthwesternUSA">NorthwesternUSA</OPTION>
  <OPTION value="SouthernUSA">SouthernUSA</OPTION>
  <OPTION value="SouthwesternUSA">SouthwesternUSA</OPTION>
    </select>
      Format:
    <select id="format">
      <OPTION value="PDF">PDF</OPTION> 
  <OPTION value="PNG">PNG</OPTION>     
    </select>
      Include Georef info?
    <select id="georef_info">
      <OPTION value="True">True</OPTION> 
  <OPTION value="False">False</OPTION>     
    </select>
    <br /><br />
    Table of Contents: <br /><span id="layer_list"></span>
    <br /><br />
    Include in Legend: <br />
    <label><input type="checkbox" name="CapitalCities" checked="checked">Capital Cities</label>
  <label><input type="checkbox" name="InterstateHighways" checked="checked">Interstate Highways</label>
  <label><input type="checkbox" name="Rivers" checked="checked">Rivers</label>
  <label><input type="checkbox" name="Lakes" checked="checked">Lakes</label>
  <label><input type="checkbox" name="StateBoundaries" checked="checked">State Boundaries</label>
  <br /><br />
  <input type="button" id="print" value="Print" onclick="print();"/>
  </body>
</html>

Re: Tutorial: Advanced web map printing/exporting using arcpy.mapping

RobertScheitlin__GISP — Fri, 24 Oct 2014 16:05:43 GMT

Hab

you were close. Here is the code working:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
  <title>Simple Map</title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
  <script src="http://js.arcgis.com/3.11/"></script>

  <script>
    var layer, map, visible = [];
    var printTask, params;
    require([
      "esri/map",
      "esri/tasks/PrintTask", 
      "dojo/on",
      "dijit/form/Button", 
      "dijit/form/CheckBox",
      "dijit/form/ComboBox",
      "dojo/domReady!"
    ],
      
      function (Map, PrintTask, on, Button, CheckBox, ComboBox) {

        var startExtent = new esri.geometry.Extent({
          "xmin": -2260000,
          "ymin": -1500000,
          "xmax": 2250000,
          "ymax": 1220000,
          "spatialReference": {
            "wkid": 102008
          }
        });
        map = new esri.Map("map", {
          extent: startExtent
        });

        var dynUrl = "http://gislap183:6080/arcgis/rest/services/USA/ConterminousUSA/MapServer";
        layer = new esri.layers.ArcGISDynamicMapServiceLayer(dynUrl, {
          "id": "ConterminousUSA"
        });

        layer.on('load', function(evt){
          buildLayerList(layer);
        });
        
        var printUrl = "http://gislap183:6080/arcgis/rest/services/USA/AdvancedHighQualityPrinting/GPServer/AdvancedHighQualityPrinting";
        printTask = new esri.tasks.PrintTask(printUrl, {
          async: true
        });
        params = new esri.tasks.PrintParameters();
        params.map = map;
      
        on(dojo.byId("print"), "click", function () {
          myprint();
        });

        function buildLayerList(layer) {
          var items = dojo.map(layer.layerInfos, function (info, index) {
            if (info.defaultVisibility) {
              visible.push(info.id);
            }
            return "<input type='checkbox' class='list_item' checked='" + (info.defaultVisibility ? "checked" : "") + "' id='" + info.id +
              "' onclick='updateLayerVisibility();' /><label for='" + info.id + "'>" + info.name + "</label>";
          });

          dojo.byId("layer_list").innerHTML = items.join();

          layer.setVisibleLayers(visible);
          map.addLayer(layer);
        }

        function updateLayerVisibility() {
          var inputs = dojo.query(".list_item"),input;

          visible = [];

          dojo.forEach(inputs, function (input) {
            if (input.checked) {
              visible.push(input.id);
            }
          });
          //if there aren't any layers visible set the array to be -1   
          if (visible.length === 0) {
            visible.push(-1);
          }
          layer.setVisibleLayers(visible);
        }

        function myprint() {
          var layout = dojo.byId("layout");
          var index = layout.selectedIndex;
          var selectedValue_layout = layout.options[index].value;
          var format = dojo.byId("format");
          var index = format.selectedIndex;
          var selectedValue_format = format.options[index].value;
          var georef_info = dojo.byId("georef_info");
          var index = georef_info.selectedIndex;
          var selectedValue_georef_info = georef_info.options[index].value;

          var legendLayer = new esri.tasks.LegendLayer();
          legendLayer.layerId = "ConterminousUSA";
          legendLayer.subLayerIds = [];
          if (dojo.byId("CapitalCities").checked == true) {
            legendLayer.subLayerIds.push(0);
          }
          if (dojo.byId("InterstateHighways").checked == true) {
            legendLayer.subLayerIds.push(1);
          }
          if (dojo.byId("Rivers").checked == true) {
            legendLayer.subLayerIds.push(2);
          }
          if (dojo.byId("Lakes").checked == true) {
            legendLayer.subLayerIds.push(3);
          }
          if (dojo.byId("StateBoundaries").checked == true) {
            legendLayer.subLayerIds.push(4);
          }
          params.template = {
            layout: selectedValue_layout,
            format: selectedValue_format,
            layoutOptions: {
              legendLayers: [legendLayer]
            }
          };
          params.extraParameters = {
            Georef_info: selectedValue_georef_info
          };
          printTask.execute(params, printComplete);
        }

        function printComplete(result) {
          window.open(result.url);
        }

      });
  </script>
</head>

<body class="claro">
  <div id="map" style="width:1000px; height:600px; border:1px solid #000;"></div>
  <br />Layout Template:
  <select id="layout">
    <OPTION value="CentralUSA">CentralUSA</OPTION>
    <OPTION value="ConterminuousUSA">ConterminuousUSA</OPTION>
    <OPTION value="NortheasternUSA">NortheasternUSA</OPTION>
    <OPTION value="NorthwesternUSA">NorthwesternUSA</OPTION>
    <OPTION value="SouthernUSA">SouthernUSA</OPTION>
    <OPTION value="SouthwesternUSA">SouthwesternUSA</OPTION>
  </select>
  Format:
  <select id="format">
    <OPTION value="PDF">PDF</OPTION>
    <OPTION value="PNG">PNG</OPTION>
  </select>
  Include Georef info?
  <select id="georef_info">
    <OPTION value="True">True</OPTION>
    <OPTION value="False">False</OPTION>
  </select>
  <br />
  <br />Table of Contents:
  <br /><span id="layer_list"></span> 
  <br />
  <br />Include in Legend:
  <br />
  <label>
    <input type="checkbox" id="CapitalCities" checked="checked">Capital Cities</label>
  <label>
    <input type="checkbox" id="InterstateHighways" checked="checked">Interstate Highways</label>
  <label>
    <input type="checkbox" id="Rivers" checked="checked">Rivers</label>
  <label>
    <input type="checkbox" id="Lakes" checked="checked">Lakes</label>
  <label>
    <input type="checkbox" id="StateBoundaries" checked="checked">State Boundaries</label>
  <br />
  <br />
  <input type="button" id="print" value="Print" />
</body>

</html>

Re: Tutorial: Advanced web map printing/exporting using arcpy.mapping

HabG_ — Tue, 28 Oct 2014 14:44:40 GMT

Thanks Robert, this works perfect.

Re: Tutorial: Advanced web map printing/exporting using arcpy.mapping

JenniferStone — Tue, 28 Oct 2014 15:14:55 GMT

Rob (if I may),

Will this work in ArcGIS 9.3? Which version of py? I have been tasked with writing/finding a script that will allow us to use our current tax map plotting routine, all VBA based, in ArcGIS 10 when we upgrade. Problem is, I don't have any experience writing python scripts although I have watched the tutorials and webinars offered by esri. If I know this can work in 9.3 then I can figure out what I need to do to make it work, usually, hopefully...

Jenn

Re: Tutorial: Advanced web map printing/exporting using arcpy.mapping

RobertScheitlin__GISP — Tue, 28 Oct 2014 17:33:36 GMT

Jennifer,

arcpy.mapping that is used in this was not introduced until ArcGIS 10. So the simple answer is no.

Re: Tutorial: Advanced web map printing/exporting using arcpy.mapping

ShruthiSrinivasan1 — Wed, 22 Feb 2017 16:36:27 GMT

Robert,

Do you get the legend printed correctly for sub layer 4 (USA Boundary)? I wanted to test if the layer headings for USA Boundary was displaying, but it doesn't show up on the legend. Below is the JSON and attached are the screenshots.

print1.jpg:

{"operationalLayers":[{"url":"http://test/arcgis/rest/services/USA/ConterminousUSA/MapServer","title":"MyDynamicService","opacity":1,"id":"MyDynamicService","visibility":true,"visibleLayers":[0,2,3,4,5,6,7]}],"mapOptions":{"extent":{"xmin":-2200000,"ymin":500000,"xmax":-1300000,"ymax":1300000,"spatialReference":{"wkid":102008}},"scale":5000000,"rotation":0},"layoutOptions":{"copyrightText":"","authorText":"","legendOptions":{"operationalLayers":[{"id":"MyDynamicService","subLayerIds":[0,2,5]}]}}}

print2.jpg:

Thanks.

print1.jpg print2.jpg