Print Examples

Discussion created by jay.kapalczynski on Jan 26, 2014
Latest reply on Jan 28, 2014 by Jian
A little confused. I have been referencing the examples and am putting together a basic Java Script app.
I moved to the examples on Printing and am confused with the examples referencing app.map


app.map = new esri.Map("map", {
          basemap: "hybrid",
          center: [-117.447, 33.906],
          zoom: 17,
          slider: false

All examples up to this point have been like this

map = new Map("mapDiv", {
          basemap: "topo",
          center: [-77.4329, 37.5410],
          zoom: 7,
          slider: true   

Can someone help me understand this. I have attached my HTML code and Js page if you need a reference as to how I can incorporate this into my app.
Any help would be greatly appreciated.

<!DOCTYPE html>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">

 <!-- Reference the DGIF CSS page -->
 <link rel="stylesheet" href="css/dgif.css" media="screen">

 <!-- Reference the js frame work from ESRI-->
  <script src="http://js.arcgis.com/3.8/"></script>   
  <!-- Reference the js page containing all the Java Script code -->
  <script type="text/javascript" src="js/test.js"></script>


<div id="master-wrapper">
 <div id="common-banner">
 <div id="agency-header">

 <div id="wrapper">
  <div id="sidebar">
  <div id="content">
    <div id="info">
     <div id="buttoncontainer";>
      <div id="leftcolumn">
       <div class="one">
        <button id="Point" style="width:130px; height:20px; font-size:13px;">Point</button>
      <div id="rightcolumn">
       <button id="Point" style="width:50px; height:20px; font-size:13px;">Point</button>
    <div id="mapDiv"></div>
    <div id="info">
     <div id="print_button"></div>
     <a href="https://developers.arcgis.com/en/javascript/jsapi/printtemplate.html">Print templates</a> are generated 
       from the Export Web Map Task's <a href="http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task">Layout_Template parameter</a>. This info is retrieved from the service 
       using <a href="https://developers.arcgis.com/en/javascript/jsapi/namespace_esri.html#request">esri.request</a>. 
 <div id="footer">


      var map, tb;

        "esri/map", "esri/layers/FeatureLayer", "esri/InfoTemplate", "esri/toolbars/draw",
        "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol",
        "esri/renderers/UniqueValueRenderer", "esri/renderers/SimpleRenderer",
        "dojo/parser", "dojo/_base/Color", "esri/symbols/SimpleMarkerSymbol",
  "esri/arcgis/utils", "esri/symbols/PictureFillSymbol", "esri/symbols/CartographicLineSymbol", 
  "esri/graphic", "dojo/dom", "dojo/on",
        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
      ], function(
        Map, FeatureLayer, InfoTemplate, Draw, 
        SimpleLineSymbol, SimpleFillSymbol,
        UniqueValueRenderer, SimpleRenderer,
        parser, Color, SimpleMarkerSymbol,
  arcgisUtils, PictureFillSymbol, CartographicLineSymbol, 
  Graphic, dom, on
  ) {
    map = new Map("mapDiv", {
          basemap: "topo",
          center: [-77.4329, 37.5410],
          zoom: 7,
          slider: true   
  map.on("load", initToolbar);
  map.on("load", addFeatureLayer); 
        function addFeatureLayer() {
          var defaultSymbol = new SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_NULL);

          //create renderer
          var renderer = new UniqueValueRenderer(defaultSymbol, "LAKE_NAME");

          //add symbol for each possible value
          renderer.addValue("LAKE NOTTOWAY", new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.5])));
 var featureLayer = new FeatureLayer("https://fwisweb1.dgif.virginia.gov/arcgis/rest/services/WERMS/WERMS/FeatureServer/8", {
            infoTemplate: new InfoTemplate(" ", "${LAKE_NAME}"),
            mode: FeatureLayer.MODE_ONDEMAND,
            outFields: ["LAKE_NAME"]

  var featureLayer2 = new FeatureLayer("https://fwisweb1.dgif.virginia.gov/arcgis/rest/services/WERMS/WERMS/FeatureServer/0", {
            mode: FeatureLayer.MODE_ONDEMAND,
            outFields: ['*']
 // markerSymbol is used for point and multipoint, see http://raphaeljs.com/icons/#talkq for more examples
        var markerSymbol = new SimpleMarkerSymbol();
        markerSymbol.setColor(new Color("#00FFFF"));
    // lineSymbol used for freehand polyline, polyline and line. 
        var lineSymbol = new CartographicLineSymbol(
          new Color([55,77,173,.75]), 1.5, 
          CartographicLineSymbol.JOIN_MITER, 5
    // fill symbol used for extent, polygon and freehand polygon, use a picture fill symbol
    // the images folder contains additional fill images, other options: sand.png, swamp.png or stiple.png
 var fillSymbol = new SimpleFillSymbol(
          new SimpleLineSymbol(
            new Color([55,77,173,0.35]), 
          new Color([125,125,125,0.35])
 // function toolbar
        function initToolbar() {
          tb = new Draw(map);
          tb.on("draw-end", addGraphic);
    // event delegation so a click handler is not
    // needed for each individual button
          on(dom.byId("info"), "click", function(evt) {
            if ( evt.target.id === "info" ) {
            var tool = evt.target.id.toLowerCase();
 // add graphic
        function addGraphic(evt) {
          //deactivate the toolbar and clear existing graphics 

          // figure out which symbol to use
          var symbol;
          if ( evt.geometry.type === "point" || evt.geometry.type === "multipoint") {
            symbol = markerSymbol;
          } else if ( evt.geometry.type === "line" || evt.geometry.type === "polyline") {
            symbol = lineSymbol;
          else {
            symbol = fillSymbol;

          map.graphics.add(new Graphic(evt.geometry, symbol));