How to use a click button to print map which is already created

[RyanYang]

I just got a task to add a print button to web page. Once user clicks this button, the map should be printed. Since the project is already there, I don't want make too much change to it. Thanks in advance.

[RyanYang]

Hi Chris,

These are relevant codes.

Thanks

<script type="text/javascript">

    // init dojo requirements

    dojo.require("dijit.layout.BorderContainer");

    dojo.require("dijit.layout.ContentPane");

    dojo.require('dijit.layout.TabContainer');

    dojo.require("esri.map");

    dojo.require("dijit.Dialog");

    dojo.require("esri.dijit.Legend");

    dojo.require("esri.dijit.Print");

    dojo.require("dojo.dom");

  dojo.require("dojo.ready");

  dojo.require("dojo.on");

    // create map var

    var map;

    xmin = -177;

    ymin = 3;

    xmax = -20;

    ymax = 72;

    function init() {

        // create plant symbol var

        var plantSymbol = "";

        // init esri config defaults for io (proxyUrl = 'mapping', always use proxy = 'true')

    esri.config.defaults.io.proxyUrl = "mapping";

    esri.config.defaults.io.alwaysUseProxy = true;

  queryString = dojo.queryToObject(window.location.search);

        plantSymbol = document.getElementById('vSymbol').value;

  if (! plantSymbol ||  plantSymbol.length < 1) {

  plantSymbol = queryString["?symbol"];

  if (! plantSymbol ||  plantSymbol.length < 1) {

  plantSymbol = queryString["?keywordquery"];

  if (! plantSymbol ||  plantSymbol.length < 1) {

  plantSymbol = "Plant not selected";

  }

  }

  }

        // init lods

  var lods = [

   {

   "level" : 0,

   "resolution" : 156543.033928,

   "scale" : 591657527.591555 },

   {

   "level" : 1,

   "resolution" : 78271.5169639999,

   "scale" : 295828763.795777 },

          {

   "level" : 2,

   "resolution" : 39135.7584820001,

   "scale" : 147914381.897889 },

   {

          "level": 3,

          "resolution": 19567.8792409999,

          "scale": 73957190.948944},

          {

          "level": 4,

          "resolution": 9783.93962049996,

          "scale": 36978595.474472},

          {

          "level": 5,

          "resolution": 4891.96981024998,

          "scale": 18489297.737236 },

          {

          "level": 6,

          "resolution": 2445.98490512499,

          "scale": 9244648.868618 },

          {

          "level": 7,

          "resolution": 1222.99245256249,

          "scale": 4622324.434309},

   {

          "level": 8,

          "resolution": 611.49622628138,

          "scale": 2311162.217155 },

   {

          "level": 9,

          "resolution": 305.748113140558,

          "scale": 1155581.108577 },

   {

          "level": 10,

          "resolution": 152.874056570411,

          "scale": 577790.554289 },

   {

          "level": 11,

          "resolution": 76.4370282850732,

          "scale": 288895.277144},

          {

         "level" : 12,

         "resolution" : 38.2185141425366,

         "scale" : 144447.638572 },

          {

        "level" : 13,

        "resolution" : 19.1092570712683,

        "scale" : 72223.819286 },

          {

        "level" : 14,

        "resolution" : 9.55462853563415,

        "scale" : 36111.909643 },

          {

        "level" : 15,

        "resolution" : 4.77731426794937,

        "scale" : 18055.954822 },

          {

        "level" : 16,

        "resolution" : 2.38865713397468,

        "scale" : 9027.977411 },

          {

        "level" : 17,

        "resolution" : 1.19432856685505,

        "scale" : 4513.988705 },

          {

        "level" : 18,

        "resolution" : 0.597164283559817,

        "scale" : 2256.994353 },

          {

        "level" : 19,

        "resolution" : 0.298582141647617,

        "scale" : 1128.497176 }

        ];

        // init page title

  var pageTitleValue = '<span style="font-size:125%;color:#000000;">Symbol: ' + plantSymbol + '</span>';

  dojo.html.set(dojo.byId("pageTitle"), pageTitleValue);

        // create new map

        var initExtent = new esri.geometry.Extent({"xmin":xmin,"ymin":ymin,"xmax":xmax,"ymax":ymax,"spatialReference":{"wkid":4326}});

//         esri.config.defaults.map.slider = { left:"40px", top:"100px", width:null, height:"300px" };

  map = new esri.Map("map",{

  sliderStyle: "large",

  wrapAround180:true,

  extent:esri.geometry.geographicToWebMercator(initExtent),

  lods: lods});

        // uncomment next two lines to show terrain in base map

        // var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Physical_Map/MapServer");

        // map.addLayer(basemap);

        // make the map proxy call and get back a dynamic map

        var dynamicmap = new esri.layers.ArcGISDynamicMapServiceLayer("GisServer");

        // NOTE: layer definitions are modified by the proxy

  var layerDefinitions = [];

  layerDefinitions[2] = "plantsdb.plant.ESRI_STATE_DISTRIBUTION.SYMBOL=." + plantSymbol + ".";

        layerDefinitions[3] = "plantsdb.plant.ESRI_STATE_DISTRIBUTION.SYMBOL=." + plantSymbol + ".";

        layerDefinitions[4] = "plantsdb.plant.ESRI_COUNTY_DISTRIBUTION.SYMBOL=." + plantSymbol + ".";

        layerDefinitions[5] = "plantsdb.plant.ESRI_STATE_ONLY_DISTRIBUTION.SYMBOL=." + plantSymbol + ".";

  dynamicmap.setLayerDefinitions(layerDefinitions);

        // add dynamicmap returned by proxy to the map object - will hit the proxy a 2nd time

  map.addLayer(dynamicmap);

  dojo.connect(map,'onLayersAddResult',function(results) {

     var layerInfo = dojo.map(results, function(layer,index) {

                     return {layer:layer.layer,title:layer.layer.name};

                 });

         if (layerInfo.length > 0) {

         var legendDijit = new esri.dijit.Legend({

                           map:map,

                           layerInfos:layerInfo

                       }, "legendDiv");

         legendDijit.startup();

     }

  });

        dojo.connect(map, 'onLoad', function(theMap) {

        //resize the map when the browser resizes

            dojo.connect(dijit.byId('map'), 'resize', map,map.resize);       

        });

    }

    function printMap(){

        document.getElementById("printMap").innerHTML = "Printing...";

        document.getElementById("printMap").disabled = true;

    esriConfig.defaults.io.proxyUrl = "proxy.ashx";

    esri.config.defaults.io.alwaysUseProxy = false;

    var url ='http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%2...

  var printTask = new esri.tasks.PrintTask(url);

  var params = new esri.tasks.PrintParameters();

  params.map = map;

  printTask.execute(params, function (evt) {

            document.getElementById("printMap").style.display = 'none';

            document.getElementById("printResult").href = evt.url;

            document.getElementById("printResult").style.display = 'block';

            dojo.on(dojo.dom.byId("printResult"), "click", function () {

                document.getElementById("printMap").innerHTML = "Print Map";

                document.getElementById("printMap").style.display = 'block';

                document.getElementById("printMap").disabled = false;

                document.getElementById("printResult").style.display = 'none';

            });

        }, function (evt) {

            document.getElementById("printMap").disabled = false;

            document.getElementById("printMap").innerHTML = "Print Map";

        });

  }

  dojo.addOnLoad(init);

</script>

[ChrisSergent]

Okay, I did notice one thing. you have not included in your requires: PrintTask or PrintParameters and possibly PrintTemplate, but you definitely need the first two.

You may want to compare your requires to mine. That can stop your code from working in you are not referencing the part of the API that you need.

[RyanYang]

Hi Chris,

I add every required module, but still get the same result, one blank new page like http://maps.decaturil.gov/arcgis/rest/directories/arcgisoutput/Utilities/PrintingTools_GPServer/_ags...

Thanks,

[ChrisSergent]

I also noticed that you have your proxy in the click event for the map. As in my code sample, I place my proxy before all references to web services. You'll notice that Esri does as well. Not placing your proxy in the correct place can and will affect your web application.

[RyanYang]

Hi Chris,

Thanks for your reply.

Since the map is dynamically created in another server, so I set esri.config.defaults.io.proxyUrl = "mapping".

After the map and layer are correctly set, I want to print the map by call printMap(). We need bypass the proxy server when call to Task: Export Web Map Task​, so I set esri.config.defaults.io.alwaysUseProxy = false inside printMap(). Otherwise cannot find mapping/http://maps.decaturil.gov/..........

However, another problem shows up, i.e., no map can be seen on the page. I guess it's because ESRI map is asynchronous.  How to turn off asyn which means let events happen one by one?

Sorry that I'm not quite clear about the problem. Hope you can understand.

Thanks again,

Ryan Yang

[ChrisSergent]

I'm not sure Ryan. Kelly Hutchins​ any thoughts on this? Rudy and I have tried to help Ryan, we appear to be stuck.

[RudyProsser]

Ryan,

I may be missing something in the discussion, but if you're looking for a simple print button have you considered the Print widget? See these samples: Print, Print webmap

Rudy

[RyanYang]

I didn't use any widget. This print widget will create some button automatically? Sorry I'm totally new to ESRI. Since this project has been there for a long time. To be consistent with other part, I just add another onclick button. Once client clicks this button, printMap() should be called. All statements involved in printing map should be located in this function.

Thanks

Ryan

[RudyProsser]

Ryan,

Yes, the Print widget will create the button automatically. See this jsFiddle I put together. It's very simple with no styling or placement. It creates a map and adds a Print widget. Print widget API reference and the samples provide more information.

Widgets keep it simple by controlling almost everything. Tasks give your more flexibility, but require more effort by the developer.

Rudy

[RyanYang]

Rudy,

I just tried your solution. Please see my code as follows.

<script>

  require(["esri/map", "esri/dijit/Print", "dojo/dom", "dojo/domReady!"], function(Map, Print, dom ) {

  var myPrinter = new Print( {

          map: map,

          url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%2..."

        }, dom.byId( "printButton" ) );

        myPrinter.startup(); 

    });

</script>

the map object is global variable created in somewhere else by dojo.addOnLoad(init). Once I click the print button, I get  Uncaught TypeError: Cannot read property 'layerIds' of undefined.

Do I need set some proxy url?

Thanks,

Ryan