topic Print/Write a map in a PDF document. in ArcGIS JavaScript Maps SDK Questions

Print/Write a map in a PDF document.

El_BoukfaouiReda — Sun, 21 Dec 2014 07:37:00 GMT

Dear All,

I am working on reports related to tables and statistics.

I am conducting a search through dropdownlist selections and queries which is working just fine:

var selectQuery = new esri.tasks.Query();

selectQuery.where = "NAME_ENGLISH LIKE '" + evt.target.value + "'";

selectQuery.outFields = ["*"];

var upc_fi_selectQuery = new esri.tasks.Query();

upc_fi_selectQuery.spatialRelationship = selectQuery.SPATIAL_REL_CONTAINS;

AttFeatureLayer.selectFeatures(upc_fi_selectQuery, esri.layers.FeatureLayer.SELECTION_NEW, function (features)

{

// do this and that

}

After that I am running a script to write tables in a Windows document as follows (for instance):

var newWin = window.open("");

newWin.document.write ("<label style='font-family: Trebuchet MS; font-weight:bold; font-size: 18px; color: #C0504D;'>Tourism Ecosystems Zone Details</label>");

newWin.document.write(Rep_T_tbTCA.outerHTML); // writing a table in a pdf document.

newWin.document.write ('<br></br>');

newWin.document.write("<label style='font-family: Trebuchet MS; font-weight:bold; font-size: 18px; color: #C0504D; page-break-after: always'>Location of the the feature</label>");

newWin.document.write ('<br></br>');

Till now everything works just fine.

The map now is zoomed to the selected feature.

Now, I need to print the current extent of the map inside the pdf document:

HTML

<div id="map" class="map" align="justify"

data-dojo-type="dijit/layout/ContentPane">

</div>

Javascript

....

var mapd = document.createElement("div");

mapd.id = "map_rep";

mapd.appendChild(document.getElementById("map"));

newWin.document.write(mapd);

....

I am getting the following as a response, which is not required result:

[object HTMLDivElement]

I have seen other possibilities involving geoprocessing printing task using ArcGIS Online maps which is not the case for me as I am using a map published as a map service and I have not interest in going through ArcGIS Online.

Please kindly advice !

Specs:

- ArcGIS Server 10.1 Enterprise.

- JS API 3.11

Re: Print/Write a map in a PDF document.

El_BoukfaouiReda — Mon, 22 Dec 2014 06:40:51 GMT

Help in here please!

Re: Print/Write a map in a PDF document.

El_BoukfaouiReda — Thu, 25 Dec 2014 04:35:50 GMT

I used the following code snippet to print the map on the document but I cannot limit the map to a certain frame.

var mapd = document.getElementById("map").innerHTML;

newWin.document.write("<table><tr><td></td><td><div id='divp'>"+mapd+"</div></td><td></td></tr></table>");

Re: Print/Write a map in a PDF document.

ChrisSergent — Fri, 26 Dec 2014 21:38:12 GMT

I have an example where we use our own server for the print task, not ArcGIS Online at all.

See if this is the type of thing that you are looking for:Print a Map

Click on the hammer icon and then the printer icon that will appear and then you can try out our print service. It's all html5. You can print a map in pdf as well as several other formats.

Re: Print/Write a map in a PDF document.

El_BoukfaouiReda — Mon, 29 Dec 2014 11:31:23 GMT

You must be using the GIS Server PrintingTools from the Utilities in the example. This is extracting the map separately.

This could be working fine for me as well but the issue is that I need to export it to a Windows document

(HTML DOM Document Objects) on which I already wrote things, tables, labels, as specified above.

So my question is :

Is there a way to assign/extract/retrieve whatever map output result, that we get using the Utilities PrintingTools into the document using:

newWin.document.write(<themap>);

The following works, but the map is not rendering properly in the document(Ref. reporting_map.png😞

var mapd = document.getElementById("map").innerHTML;

newWin.document.write("<table><tr><td></td><td><div id='divp'>"+mapd+"</div></td><td></td></tr></table>");

Re: Print/Write a map in a PDF document.

JoshHevenor — Mon, 29 Dec 2014 12:59:04 GMT

I would use the PrintTask to get a JPG image

PrintTemplate | API Reference | ArcGIS API for JavaScript

Then I would write the URL returned to an image tag (instead of trying to write a map in a div tag).

...

Re: Print/Write a map in a PDF document.

El_BoukfaouiReda — Tue, 30 Dec 2014 14:32:51 GMT

I worked with the following code:

......Report being written.....

var url = "http://[IPAdress]:6080/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task";

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

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

var template = new esri.tasks.PrintTemplate();

//template.exportOptions = { dpi: 96};

template.format = "JPG";

//template.layout = "Letter ANSI A Portrait";

//template.preserveScale = true;

//template.showAttribution = false;

params.map = map;

params.template = template;

var pimg = new Image();

var docp = newWin.document; // this represents the report being written

console.log(docp); // Report being written - Without image

printMap.execute(params, function(result)

{

pimg.src = result.url;

console.log(result);

//newWin.document.write('<div><img src="'+result.url+'"/></div>'); // this is not working!

docp.write('<div style="visibility:visible; width:100%; height:100%; display:block;"><img style="visibility:visible; width:100%; height:100%;" src="'+result.url+'"/></div>'); // this is not working also

//newWin.open(result.url); This is working just fine when I open a new window !

});

console.log(docp); // this is to witness that the image has been added to the report but not showing in the document:

.....Report being written.....

The issue is that I think what is inside the Execute function is processing only when I close my report document which has already been opened already as it is being written !

Please help !

Re: Print/Write a map in a PDF document.

JoshHevenor — Tue, 30 Dec 2014 14:45:29 GMT

Does the URL you're returned have a map in it?

I think adding template.layout = "MAP_ONLY"; won't hurt.

Re: Print/Write a map in a PDF document.

El_BoukfaouiReda — Tue, 30 Dec 2014 15:06:09 GMT

Yes the URL I have returned have a map inside it and the it is getting exported successfully.

The issue is that it is not being written in the document only after I close "newWin" tab manually.

I think the map is taking time to be processed and this is not showing immediately in the windows document...

I am thinking of a way to save the image after being processed as an output by ArcGIS for Server.

For your advice !

Re: Print/Write a map in a PDF document.

TracySchloss — Tue, 17 Nov 2015 17:24:09 GMT

I hate to revive such an old thread, but did you ever find a solution for this? It seems like you were getting close.

Re: Print/Write a map in a PDF document.

RobertScheitlin__GISP — Sun, 12 Dec 2021 07:44:40 GMT

Tracy,

Here is some code I use in a custom dialog element to get the map image and replace a static placeholder I have in my dialog with the map image once it is ready and once the image is returned I enable my print button on that dialog.

this.map.infoWindow.hide();
        var oWid = this.map.width;
        var oHgt = this.map.height;
        var printTask = new PrintTask('print service url');
        var template = new PrintTemplate();
        this.imgHeight = (740/oWid) * oHgt;
        template.exportOptions = {
          width: 1542,
          height: (1542/oWid) * oHgt,
          dpi: 200
        };
        template.format = "jpg";
        template.layout = "MAP_ONLY";
        template.preserveScale = false;
        template.showAttribution = false;

        var params = new PrintParameters();
        params.map = this.map;
        params.template = template;
        printTask.execute(params, lang.hitch(this, this.printResult));

printResult: function(rsltURL){
        var mapImg = domConstruct.toDom('<img src="'+rsltURL.url+'" border="0" style="width:740px;height:'+this.imgHeight+'px;"/>');
        domConstruct.place(mapImg, dom.byId('mapImgDiv'), 'replace');
        if(typeof has('android') === 'undefined'){
          domClass.replace(this.printBtnNode, 'myprint-btn', 'myprint-btn-loading');
          domAttr.set(this.printBtnNode, 'title', 'Print Tax Report...');
          this.own(on(this.printBtnNode, 'click', lang.hitch(this, this._printReport)));
        }
      },

Re: Print/Write a map in a PDF document.

TracySchloss — Tue, 17 Nov 2015 17:46:01 GMT

That works for me. I figured it was a matter of waiting until there was output before proceeding.