AnsweredAssumed Answered

Screenshot of Map Canvas using ArcGIS API for Javascript

Question asked by pmccord_wayne on Jul 9, 2019
Latest reply on Jul 9, 2019 by pmccord_wayne

I'm attempting to develop a function that will take a screenshot when an icon is clicked. I've found similar posts on GeoNet: https://community.esri.com/thread/211365-how-to-take-screenshot-in-javascript-for-arcgis-basemap-with-layers. However, when following these instructions, I'm unable to successfully get a screen capture. My goal is to have a user click on a print icon within the application that I'm developing and then have the map "canvas" download as a PDF. I'm using ArcGIS API for JS 4.11.

 

Below is my relevant code....

 

First, I add the necessary modules:

 

require([
      "esri/Map",
      "esri/views/MapView",
      "esri/Basemap",
      "esri/layers/VectorTileLayer",
      "esri/widgets/ScaleBar",
      "esri/geometry/Point",
      "esri/geometry/Extent",
      "esri/core/watchUtils",
      "esri/layers/MapImageLayer",
      "esri/tasks/PrintTask",
      "esri/tasks/support/PrintParameters",
      "esri/tasks/support/PrintTemplate",
      "esri/core/lang"

    ], function(Map, MapView, Basemap, VectorTileLayer, ScaleBar, Point, Extent, watchUtils, MapImageLayer, PrintTask, PrintParameters, PrintTemplate, lang) {

 

Then, I create the function where the user clicks on the print icon, which should then create the screenshot. Much of this is taken from the above article I referenced.

 

$(window).ready(function() {
        $(".print_icon").click(function(){
          var printTask = new PrintTask("https://devarcgisent.waynecounty.lan/serverdev/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task");
          var template = new PrintTemplate();
          template.exportOptions = {
            width: 1500,
            height: 700,
            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, printResult);

          function printResult(rsltURL){
            var mapImg = domConstruct.toDom('<img src="'+rsltURL.url+'" border="0" style="width:1500px;height:700px;"/>');
            domConstruct.place(mapImg, dom.byId("map_canvas"), "replace");
          }
        });
      });

 

When I click on the print icon, I don't receive an error, but a screenshot is also not taken. I'm likely missing something in the code that I've written. Any help would be welcomed.

Outcomes