Cant Add Graphics to Print Task

BernardoArevalo · ‎05-09-2017

No matter what I do, I cant seem to get the Print Task to print out the graphics on a layer. I tried adding the graphics to the view.graphics layer and then adding the graphic to a seperate layer and adding that layer to the map. Heres a jsbin, please help .

JS Bin - Collaborative JavaScript Debugging

RobertScheitlin__GISP · ‎05-09-2017

Bernardo,

You are printing before the graphic is drawn. Here is your code updated to wait for the graphic to draw before printing:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <meta name="description" content="[Get started with graphics - 4.3]">
  <!--
  ArcGIS API for JavaScript, https://js.arcgis.com
  For more information about the get-started-graphics sample, read the original sample description at developers.arcgis.com.
  https://developers.arcgis.com/javascript/latest/get-started-graphics/index.html
  -->
<title>Get started with graphics - 4.3</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
  <script src="https://js.arcgis.com/4.3/"></script>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <script>
    require([
      "dojo/promise/Promise",
      "esri/tasks/PrintTask",
      "esri/tasks/support/PrintTemplate",
      "esri/tasks/support/PrintParameters",
      "esri/layers/GraphicsLayer",
      "esri/Map",
      "esri/views/MapView",
      "esri/Graphic",
      "esri/geometry/Polygon",
      "esri/symbols/SimpleFillSymbol",
      "esri/core/watchUtils",
      "dojo/domReady!"
    ], function(Promise,
      PrintTask, PrintTemplate, PrintParameters,
      GraphicsLayer,
      Map, MapView,
      Graphic, Polygon,
      SimpleFillSymbol, watchUtils
    ) {

      var map = new Map({
        basemap: "hybrid"
      });

      var view = new MapView({
        center: [-80, 35],
        container: "viewDiv",
        map: map,
        zoom: 3
      });

      view.then(function(){
        // Create a polygon geometry
        var polygon = new Polygon({
          rings: [
            [-64.78, 32.3],
            [-66.07, 18.45],
            [-80.21, 25.78],
            [-64.78, 32.3]
          ]
        });

        // Create a symbol for rendering the graphic
        var fillSymbol = new SimpleFillSymbol({
          color: [227, 139, 79, 0.8],
          outline: { // autocasts as new SimpleLineSymbol()
            color: [255, 255, 255],
            width: 1
          }
        });

        // Add the geometry and symbol to a new graphic
        var polygonGraphic = new Graphic({
          geometry: polygon,
          symbol: fillSymbol
        });

        var layer = new GraphicsLayer({
          graphics: [polygonGraphic]
        });
        
        map.layers.add(layer);
        
        view.whenLayerView(layer).then(function(lv){
          watchUtils.whenFalseOnce(lv,"updating", function(){
            var template = new PrintTemplate({
            exportOptions: {
                    dpi: 300
                },
                layout: "a4-portrait"
            });

            var params = new PrintParameters({
                view: view,
                template: template
            });

            printTask.execute(params).then(function(s){
              console.log("hiiiiii")
                alert(s.url)
            }, function(error){
                console.log(error)
            });
          });
        });
      
        var printTask = new PrintTask({
            url: "https://utility.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%..."
        });

      })
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍