dhunink

PrintTask and Graphics

Discussion created by dhunink on Apr 11, 2013
Latest reply on Apr 11, 2013 by dhunink
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="/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]

Outcomes