topic Re: How to use a click button to print map which is already created in ArcGIS JavaScript Maps SDK Questions

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

RyanYang — Mon, 23 Mar 2015 21:08:03 GMT

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.

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

OwenEarley — Mon, 23 Mar 2015 22:21:58 GMT

If you are using the ESRI JS API then check out the PrintTask. There are also a few PrintTask samples available - Samples | ArcGIS API for JavaScript.

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

RyanYang — Tue, 24 Mar 2015 04:43:35 GMT

Owen. Thank you very much. Since I'm new to esri and dojo. I don't know how to implement these samples in my project. Actually my project already created the map in a init() function such as dojo.addOnLoad(init). Now I just want to add one onclick function to the page. Can I do like this? function printMap(){ var url='hhttp://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task'; var printTask = new esri.tasks.PrintTask(url); var params = new esri.tasks.PrintParameters(); params.map = map; printTask.execute(params, printResult); }

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

ChrisSergent — Tue, 24 Mar 2015 13:45:31 GMT

Here is our custom print task that is done using our own web services: Print a Map

Click on the hammer to bring up the print button and then click on the print button for the custom print dialog box.

Here is the source code: JS Bin - Collaborative JavaScript Debugging You will need to create your own images for your buttons or you can copy ours.

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

RyanYang — Tue, 24 Mar 2015 16:23:20 GMT

Hi Chris,

Thanks for your reply. It's very helpful. Following your code, I have changed my code as follows.

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%20Web%20Map%20Task';

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";

});

}

Once I click the printMap button, this function will be called. Once I click the get Printout button, a new page shows up. However I cannot see the map on the new page.

By the way, I define my map as a global variable. The map is created by dojo.addOnLoad(init). So I can see the map on the original page. But cannot see it on the new page.

Thanks again.

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

ChrisSergent — Tue, 24 Mar 2015 16:29:10 GMT

Do you have a public site or can you post all of your page code on js Bin?

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

RyanYang — Tue, 24 Mar 2015 16:40:08 GMT

The source code is very long, and most are irrelevant. To generate the map, we have to make a call to our local server service, so we cannot test the code on any public site. Anyway, the map is created by calling init() function.

Since I'm new to esri and dojo. I have a silly question. To print the map, do we have to set the print template?

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

RyanYang — Tue, 24 Mar 2015 17:10:13 GMT

Hi Chris,

These are relevant codes.

Thanks

// 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%20Web%20Map%20Task';

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>

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

ChrisSergent — Tue, 24 Mar 2015 18:59:22 GMT

I am an ongoing learner to custom code, but I don't see a return statement for your print task. I found the custom print task a little tricky, but I thought the template was required so I did include it. If your project is not too in depth, you may want to consider converting it to AMD as that is the only version of dojo that the Esri JS API 4.0 will support.

Are you familiar with how to use browser debugging tools? If so, are you receiving any errors?

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

RudyProsser — Tue, 24 Mar 2015 19:26:28 GMT

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

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

RyanYang — Tue, 24 Mar 2015 19:36:50 GMT

I use chrome debug tools, and didn't get any error except one warning.

Resource interpreted as Script but transferred with MIME type text/plain: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Printi…mplate=MAP_ONLY&callback=dojo.io.script.jsonp_dojoIoScript1._jsonpCallback".

what kind problem will this warning lead to?

Thanks

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

RyanYang — Tue, 24 Mar 2015 19:55:46 GMT

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

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

ChrisSergent — Tue, 24 Mar 2015 20:06:44 GMT

For the warning, it means that the server is sending that type of response: Chrome says "Resource interpreted as script but transferred with MIME type text/plain.", what gives? - Stack Overflow

Depending on what kind of server that you are using, you can add it in whatever you use to configure servers. I don't know if that is causing any issues.

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

ChrisSergent — Tue, 24 Mar 2015 20:20:32 GMT

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.

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

RyanYang — Tue, 24 Mar 2015 20:54:42 GMT

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_dd9a857776cc49ffbe4…

Thanks,

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

RudyProsser — Tue, 24 Mar 2015 20:54:54 GMT

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

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

RyanYang — Tue, 24 Mar 2015 21:47:45 GMT

Rudy,

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

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%20Web%20Map%20Task"

}, 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

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

ChrisSergent — Tue, 24 Mar 2015 21:54:17 GMT

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.

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

RudyProsser — Tue, 24 Mar 2015 23:05:08 GMT

Ryan,

Did you mix the AMD and legacy coding styles in a single app? I interpret the Uncaught Error as the map is not defined in the section with the Print widget, even though it is a global variable. Instead of using AMD for the Print widget, try the legacy dojo.require to accomplish the same thing.

Add this to the list of modules you're loading:

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

Add this to your initialization code after you've completed building your map:

var myPrinter = new esri.dijit.Print({

map: map,

url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"

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

myPrinter.startup();

Rudy

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

RyanYang — Wed, 25 Mar 2015 16:19:50 GMT

Hi Rudy,

I add the following code in the end of the init() function.

var myPrinter = new esri.dijit.Print( {

map: map,

url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"

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

myPrinter.startup();

The I get a print button on the page. But the print button doesn't take any action no matter how I click it. And there is not any error or warning message.

Thanks,

Ryan