nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How to request a single PNG/JPG image for a layered map using the JS API

AndrewBoland

I need to generate some map images for use in a web application, using the Nat Geo base map, an ocean contour layer and some points plotted from a KML file. I have the map working OK using the 3.18 JS library, but I don't want a dynamic, tiled image returned, just a single PNG or JPG image that I can then save locally. Is this possible? New to ArcGIS and mapping in general! Thanks.

Vind meer berichten getagd met

Accepted answers

RobertScheitlin__GISP

Andrew,

For that you would use the PrintTask and MAP_ONLY print template. Here is a snippet of code that I use for this purpose:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var oWid = this.map.width;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var oHgt = this.map.height;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var printTask = new PrintTask('YOURS /rest/services/ExportWebMap/GPServer/Export Web Map');
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var template = new PrintTemplate();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.imgHeight = (740/oWid) * oHgt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; template.exportOptions = {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width: 1542,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height: (1542/oWid) * oHgt,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dpi: 200
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; };
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; template.format = "jpg";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; template.layout = "MAP_ONLY";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; template.preserveScale = false;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; template.showAttribution = false;

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

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; printResult: function(rsltURL){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var mapImg = domConstruct.toDom('<img src="'+rsltURL.url+'" border="0" style="width:740px;height:'+this.imgHeight+'px;"/>');
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; domConstruct.place(mapImg, dom.byId('mapImgDiv'), 'replace');
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; },<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

All comments

RobertScheitlin__GISP

Andrew,

For that you would use the PrintTask and MAP_ONLY print template. Here is a snippet of code that I use for this purpose:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var oWid = this.map.width;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var oHgt = this.map.height;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var printTask = new PrintTask('YOURS /rest/services/ExportWebMap/GPServer/Export Web Map');
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var template = new PrintTemplate();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.imgHeight = (740/oWid) * oHgt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; template.exportOptions = {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width: 1542,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height: (1542/oWid) * oHgt,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dpi: 200
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; };
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; template.format = "jpg";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; template.layout = "MAP_ONLY";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; template.preserveScale = false;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; template.showAttribution = false;

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

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; printResult: function(rsltURL){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var mapImg = domConstruct.toDom('<img src="'+rsltURL.url+'" border="0" style="width:740px;height:'+this.imgHeight+'px;"/>');
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; domConstruct.place(mapImg, dom.byId('mapImgDiv'), 'replace');
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; },<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

AndrewBoland

Hi - thanks for the reply. I should have said the we don't have an ArcGIS server instance which I think this solution relies on?

Thanks, Andy

RobertScheitlin__GISP

Andrew,

So you use one of the sample or AGOL servers then.

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

AndrewBoland

Ok I'll investigate that - thanks a lot.

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.