Select to view content in your preferred language

Print/Export without Interacting with Map

1431
2
09-07-2016 11:14 PM
HenryKo3
Deactivated User

How can I generate a PNG/JPG image from an simple map without any user interaction?

On a particular page on our website, we have a small and simple JavaScript API 3.17 map embedded in the corner of the web page. It only contains an Esri basemap with a simple point graphic. This map is not interactive (i.e. users cannot zoom and pan etc) as its purpose is just to show the location of the point. Apart from the basemap

Now, on the same web page, users can click a button to generate a PDF file. This PDF file needs to have that map image included. This is illustrated in the image below:

How can I do this? The Print Task in JavaScript API needs to be called by interacting with the actual map. I am not sure if I can use a geoprocessing service to print from the JavaScript based map?

0 Kudos
2 Replies
PanagiotisPapadopoulos
Esri Regular Contributor
RobertScheitlin__GISP
MVP Emeritus

Henry,

   Here i a snipitt of code I use just for that using the Export Web Map Task that Panagiotis suggests above:

        this.map.infoWindow.hide();
        var oWid = this.map.width;
        var oHgt = this.map.height;
        var printTask = new PrintTask('http://yourserver/arcgis/rest/services/ExportWebMap/GPServer/Export%20Web%20Map%20Task');
        var template = new PrintTemplate();
        //code for maintaining aspect ratio of the image, you will want to adjust numbers likely
        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');
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍