PrintTask and Graphics

DennisHunink — Thu, 11 Apr 2013 12:11:17 GMT

Hi Guys,

I'm new to this forum but hope someone can help. I've got some questions about the user of PrinTask();

I've got the code below. And i'm running into a couple of problems, which properly are related to each other.
- When the page loads, sometimes it runs into errors: 'map.graphics is null' or error '_c undefined'
- When everything loads perfect the .png file created and it's url is returned....but the .png doesn't contain the feature layer and the graphics layer.

I'm guessing i'm doing something wrong with the order in which i'm adding graphics and launching the printTask. But I've tried about any solution I could find, without fixing it. Hopefully there's someone who can point me in the right direction and suggested how I should restructure or reorder stuff.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head profile="http://gmpg.org/xfn/11">
<head> 
<title></title>

<link rel="stylesheet" type="text/css" href="https://community.esri.com/style/topotrainer.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/claro/claro.css"> 
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/esri/dijit/css/Popup.css">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">
<style type="text/css">
 #mapWrap{
  width:595px;
  height:842px;
  border:1px solid #999;
 }
</style>
<script type="text/javascript">
   var djConfig = {
     parseOnLoad: true
    };
</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1"></script>
<script type="text/javascript">
 dojo.require("dijit.dijit"); // optimize: load dijit layer
    dojo.require("dijit.layout.BorderContainer");
    dojo.require("dijit.layout.ContentPane");
    dojo.require("esri.map");
 dojo.require("esri.graphic");
 dojo.require("esri.layers.FeatureLayer"); 
    dojo.require("dijit.layout.TabContainer");
 dojo.require("esri.tasks.query");
 dojo.require("esri.dijit.Print");
 dojo.require("esri.tasks.PrintTask");
      
    //this global object contains all references needed across functions 
    var globals = {};
 var map;
 var testedArea = 'nederland';
 var basemapUrl = "http://tiles.arcgis.com/tiles/nSZVuSZjHpEZZbRo/arcgis/rest/services/Topografie_in_de_klas_"+testedArea+"_ondergrond/MapServer";
 var featureLayerUrl = "http://services.arcgis.com/nSZVuSZjHpEZZbRo/ArcGIS/rest/services/Topografie_in_de_klas_"+testedArea+"/FeatureServer/0";
 var printurl = 'http://utility.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task/execute';
  //var contentFeatureLayerUrl = "http://services.arcgis.com/nSZVuSZjHpEZZbRo/ArcGIS/rest/services/Topografie_in_de_klas_"+testedArea+"/FeatureServer/1";
 
   function init() {
  esri.config.defaults.io.proxyUrl = "/arcgisserver/apis/javascript/proxy/proxy.ashx";
  
  var initialExtent = new esri.geometry.Extent({"xmin":127181.62867976735,"ymin":6618002.046143801,"xmax":1141291.3011197727,"ymax":7298584.615330108,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map", {
           extent: initialExtent,
   //zoom: 2
        });
  
  //Setup the layers
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer(basemapUrl);
  var featureLayer = new esri.layers.FeatureLayer(featureLayerUrl,{
   mode: esri.layers.FeatureLayer.MODE_SELECTION,
           outFields: ["*"]
  });
  var graphicsLayer = new esri.layers.GraphicsLayer();
  
  //Add the layers
  map.addLayer(basemap);
  map.addLayer(featureLayer);
  map.addLayer(graphicsLayer);
  
  //Select the content of the featurelayer
  featureLayer.clearSelection();
  content = 'Cito100_onderdeel=1';
  queryContentSelect = new esri.tasks.Query();
  queryContentSelect.returnGeometry = true;
  queryContentSelect.outFields = ["Type", "NAME"];
  queryContentSelect.where = content;
  featureLayer.selectFeatures(queryContentSelect, esri.layers.FeatureLayer.SELECTION_NEW);
  
  //Set the content of the graphicsLayer selection
  var queryGraphicsTask = new esri.tasks.QueryTask(featureLayerUrl);
  queryGraphicsSelect = new esri.tasks.Query();
  queryGraphicsSelect.returnGeometry = true;
  queryGraphicsSelect.outFields = ["Type", "NAME"];
  queryGraphicsSelect.objectIds = [1,12,14,15,24,25,89, 20];
  queryGraphicsTask.execute(queryGraphicsSelect, addPointsToMap);
  
  //Set up print stuff
  var printTask = new esri.tasks.PrintTask(printurl);
  var params = new esri.tasks.PrintParameters();
  var template = new esri.tasks.PrintTemplate();
  
    params.map = map;
  template.exportOptions = {
   width: 595,
   height: 842,
   dpi: 96
  };
  template.layout = "MAP_ONLY";
  template.preserveScale = false;
  
  params.template = template;
 
  dojo.connect(map, "onLoad", function() {//Fire the print task
   printTask.execute(params, printResult, printError);
  });
  
  
  //Functions//
  function addPointsToMap(featureSet) {
   var i =1;
   dojo.forEach(featureSet.features,function(feature){
      iconSymbolNumbered = new esri.symbol.PictureMarkerSymbol({
     "url":"http://tpgrf.nl/testserver/alpha/wp-content/themes/topografieindeklas/style/img/toetsNumberIcons/red/NumberIcon"+i+".png",
     'width':15,
     'height':20,
     'xoffset':0,
     'yoffset': 10});
    map.graphics.add(feature.setSymbol(iconSymbolNumbered));
    i++;
   });
  }
  
  function printResult(result){
   console.log('executed succes'+result.url);
  }
  function printError(result){
   console.log('executed error');
  }
  
      }//End init

      //show map on load 
      dojo.ready(init);
   
   ////////////////////////////////
   //Other then on Load functions//
   ////////////////////////////////
  
   
    </script>
  </head>
  
  <body>
   <div id="mapWrap">
    <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%; height:100%;">
        <div id="map" dojotype="dijit.layout.ContentPane" region="center"></div>
     </div>
  </div><!-- end mapWrap -->
  </body>

</html>

When waiting a couple of seconds to execute the printTask, for testing just by adding setTimeout, I get tthis error back in my FireBug console.

setTimeout(function(){printTask.execute(params, printResult, printError);},3000);

[ATTACH=CONFIG]23425[/ATTACH]

Re: PrintTask and Graphics

KellyHutchins — Thu, 11 Apr 2013 15:25:37 GMT

You need to wait until the map loads to add the graphics. So if you modify your sample to execute the query task when the map loads and add the points you should be ok.

Re: PrintTask and Graphics

DennisHunink — Thu, 11 Apr 2013 15:50:09 GMT

You need to wait until the map loads to add the graphics. So if you modify your sample to execute the query task when the map loads and add the points you should be ok.

Thanks for your reply. I actually tried that but didn't succeed. What code should I use to do so and where should it be inserted/modified?

topic Re: PrintTask and Graphics in ArcGIS JavaScript Maps SDK Questions

PrintTask and Graphics

Re: PrintTask and Graphics

Re: PrintTask and Graphics