topic Re: Print Task on Custom ArcGISImageServiceLayer in ArcGIS JavaScript Maps SDK Questions

Print Task on Custom ArcGISImageServiceLayer

RobertWinterbottom — Mon, 09 Dec 2013 18:29:17 GMT

Hi Everyone,

I am working on executing a print task on a map with a custom ArcGISImageServiceLayer and am hitting a bit of a snag. It seems that when I execute the print task it will work but it returns back a incorrect image in grey and black and not one including the colors or parameters currently shown in the layer. I noticed in the json being sent in it does not include any params or a rendering rule which I am assuming might have something to do with this. Is there anyway to override a method in the layer so when using the print task I can include the rendering rule and any other necessary params into the request?

Re: Print Task on Custom ArcGISImageServiceLayer

JianHuang — Tue, 10 Dec 2013 00:22:48 GMT

Can you give us a reproducible sample?

Re: Print Task on Custom ArcGISImageServiceLayer

RobertWinterbottom — Sat, 11 Dec 2021 06:24:25 GMT

It's quite a bit of code and it's on a password protected staging url unfortunately, I could zip up the project and email it or would it be helpful if I uploaded my custom ImageServiceLayer class and provided the parameters I use with it such as my raster function and other settings I am using in the getImageUrl function I overrided. I could probably extract the minimum resources necessary and put it in a fiddle if needs be. Which would be the best for you?

Do you know if by default the print task is supposed to include the rendering rule from an ArcGISImageServiceLayer and that possibly in my implementation of the class I changed something that is causing it to not be picked up when the print task executes.

Here is some small snippets of how I am using the print task and from my custom class:

require(["esri/tasks/PrintTask","esri/tasks/PrintParameters","esri/tasks/PrintTemplate","mapui","mainmodel"],
        function(PrintTask,PrintParameters,PrintTemplate,MapUI,MainModel){
          var printConfig = Config.getConfig().print,
            printTask = new PrintTask(printConfig.url),
            params = new PrintParameters(),
            viewModel = MainModel.getVM();
          params.map = MapUI.getMap();
          params.template = new PrintTemplate();
          params.template.label = printConfig.template.label;
          params.template.format = printConfig.template.format;
          params.template.layout = printConfig.template.layout;
          params.template.layoutOptions = printConfig.template.layoutOptions;

          var languageIsEnglish = (query(".selectedLanguage")[0].id === "languageEnglish");

          if(languageIsEnglish)
            viewModel.printMap("Printing");
          else
            viewModel.printMap("Printing");

          printTask.execute(params,function(response){
            window.open(response.url);
            if(languageIsEnglish)
              viewModel.printMap("Print");
            else
              viewModel.printMap("Cetak");
          },function(error){
            if(languageIsEnglish)
              viewModel.printMap("Print");
            else
              viewModel.printMap("Cetak");
          });

        });

The printConfig looks like this :

print: {
               url:"http://gis-stage.wri.org/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task",
               template: {
                 label:"Map",
                 format:"PNG32",
                 layout:"A4 Landscape",
                 layoutOptions: {
                   titleText: "Suitability Map",
                   authorText: "WRI & esri",
                   copyrightText: "WRI",
                   scalebarUnit: "Miles"
                 }
               }
             }

and here is my getImageUrl method from my custom class

getImageUrl: function (extent, width, height, callback,options) {
        var _self = this;
        var bbox = [extent.xmin, extent.ymin, extent.xmax, extent.ymax],
          params,
          min,
          max,
          tempArray,
          membership_arguments;

        var rasterFunction = _self.getRenderingRule();
        if (options) {
            params = options;
            params['renderingRule'] = JSON.stringify(rasterFunction);
            params['bbox'] = bbox.join(",");
            callback(_self.url + "/exportImage?",params);
        }
        else {
            params = {
                noData: 0,
                noDataInterpretation: "esriNoDataMatchAny",
                interpolation: "RSP_BilinearInterpolation",
                renderingRule: JSON.stringify(rasterFunction),
                format: "png8",
                size: width + "," + height,
                imageSR: 3857,
                bboxSR: 3857,
                f: "image",
                pixelType: 'U8',
                bbox: bbox.join(",")

            };
            callback(_self.url + "/exportImage?" + dojo.objectToQuery(params));
        }
        
      },

Everything works fine except the print task is just not including the rendering rule.

Re: Print Task on Custom ArcGISImageServiceLayer

JianHuang — Wed, 11 Dec 2013 23:10:12 GMT

PrintTask includes renderingRule if that property exists in your layer. Please check yourCustomImageServiceLayer.renderingRule is there, and yourCustomImageServiceLayer.renderingRule.toJson() is a valid function.

Re: Print Task on Custom ArcGISImageServiceLayer

RobertWinterbottom — Sat, 11 Dec 2021 06:24:27 GMT

PrintTask includes renderingRule if that property exists in your layer. Please check yourCustomImageServiceLayer.renderingRule is there, and yourCustomImageServiceLayer.renderingRule.toJson() is a valid function.

Ahh I think you may be on to something. I logged the layer to the console and noticed the renderingRule was null, so I added a this.renderingRule = _self.getRenderingRule() inside the getImageUrl() function, which the getRenderingRule() is a function we have added in to build the custom rendering rule based off some slider and checkbox controls we have in the app. After doing this I did a console.dir(layer.renderingRule.toJson()) and kept getting a blank object. I overwrote the toJson method inside the constructor and was getting the same response, just a blank object, so I then moved it to the getImageUrl() function and was able to get it to retrieve the JSON string but still am unable to see it print. I put in alert in the layer.renderingRule.toJson() and it does not fire when I call the print task. I tried just logging layer.renderingRule.toJson() to the console and this was what it returned.

"{"rasterFunction":"PalmOilSuitabilityNew","rasterFunctionArguments":{"ElevRaster":"$1","SlopeRaster":"$2","WaterRaster":"$3","ConsRaster":"$4","STypeRaster":"$5","SDepthRaster":"$6","PeatRaster":"$7","SAcidRaster":"$8","SDrainRaster":"$9","RainfallRaster":"$10","LCRaster":"$11","ElevInpR":[0,100,100,1000000],"ElevOutV":[1,0],"SlopeInpR":[0,30,30,1000000],"SlopeOutV":[1,0],"WaterInpR":[0,10,10,1000000],"WaterOutV":[0,1],"ConsInpR":[0,10,10,1000000],"ConsOutV":[0,1],"RainfallInpR":[0,150,150,700,700,1000000],"RainfallOutV":[1,1,0],"SDepthInpR":[0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7],"SDepthOutV":[1,0,0,0,1,1,1,1],"PeatInpR":[0,0,1,1,2,2,3,3,4,4,5,5,6,6],"PeatOutV":[1,0,0,0,0,0,0],"SAcidInpR":[0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7],"SAcidOutV":[1,1,1,1,1,1,1,1],"SDrainInpR":[0,0,1,1,2,2,3,3,4,4],"SDrainOutV":[1,0,1,1,1],"LCInpR":[0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8],"LCOutV":[1,1,1,1,0,0,0,0,0],"STypeInpR":[1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10],"STypeOutV":[1,1,1,0,1,1,1,1,1,0]}}"

does this look like a valid renderingRule and is setting the this.renderingRule to the newly created custom renderingRule in getImageUrl() the best way to keep it up to date and setting the toJson() function in the getImageUrl() as well the right way to override it ?

Re: Print Task on Custom ArcGISImageServiceLayer

RobertWinterbottom — Fri, 13 Dec 2013 17:18:34 GMT

Would there happen to be a sample anywhere that shows print task working with ImageServiceLayer or a working URL so I could see what a successful request looks like, we tried manually changing the JSON at the rest endpoint and kept getting 404 errors because we are not sure what a successful request with a rendering rule would look like.

Re: Print Task on Custom ArcGISImageServiceLayer

JianHuang — Sat, 11 Dec 2021 06:24:30 GMT

I tested a simple case and print task works fine with renderingRule. This is how the JSON looks like:

{
    "mapOptions": {
        "showAttribution": true,
        "extent": {
            "xmin": -9002667.410873475,
            "ymin": 4193183.580948897,
            "xmax": -8996552.448610498,
            "ymax": 4195815.881110537,
            "spatialReference": {
                "wkid": 102100
            }
        },
        "spatialReference": {
            "wkid": 102100
        },
        "scale": 18055.954822005082
    },
    "operationalLayers": [
        {
            "id": "layer0",
            "title": "layer0",
            "opacity": 1,
            "minScale": 591657527.591555,
            "maxScale": 9027.977411,
            "url": "http://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer"
        },
        {
            "id": "layer2",
            "title": "layer2",
            "opacity": 1,
            "minScale": 0,
            "maxScale": 0,
            "url": "http://sampleserver6.arcgisonline.com/arcgis/rest/services/CharlotteLAS/ImageServer",
            "bandIds": null,
            "compressionQuality": null,
            "interpolation": null,
            "renderingRule": {
                "rasterFunction": "RFTShadedReliefElevationColorRamp"
            }
        },
        {
            "id": "layer1",
            "title": "layer1",
            "opacity": 1,
            "minScale": 591657527.591555,
            "maxScale": 9027.977411,
            "url": "http://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Reference/MapServer"
        },
        {
            "id": "map_graphics",
            "minScale": 0,
            "maxScale": 0,
            "featureCollection": {
                "layers": []
            }
        }
    ],
    "exportOptions": {
        "outputSize": [
            800,
            1100
        ],
        "dpi": 96
    }
}

Re: Print Task on Custom ArcGISImageServiceLayer

BrendanCollins — Mon, 16 Dec 2013 14:24:35 GMT

Hey Jian,

Thanks for the example. Is there an example using a renderingRule which has functionArguments? Looks like all you have is the rasterFunction.

Thanks for you help with this.

Re: Print Task on Custom ArcGISImageServiceLayer

JianHuang — Tue, 17 Dec 2013 21:44:11 GMT

Can you post the web map json sent to print service?

Re: Print Task on Custom ArcGISImageServiceLayer

RobertWinterbottom — Sat, 11 Dec 2021 06:24:33 GMT

Can you post the web map json sent to print service?

Ahhh that's it. I was using GET not POST. That got it working from the endpoint. Im not sure why but on the JavaScript side when we call print task our renderingRule isn't being inserted automatically in to the web map JSON so I will do some digging to see if we messed something up with our custom ImageServiceLayer that's preventing this.

In the meantime, I was able to get it to work properly when I used something along the lines of this:

require(["esri/request"], function(request) {
  request.setRequestPreCallback(function(ioArgs) {
    // if request is to the PrintingTools url
        // Get my Image Service Layer from ioArgs.content.Web_Map_as_JSON
        // Add in my rendering rule and rasterFunctionArguments 
        // replace webmap JSON with updated JSON and request now uses POST instead of GET
    return ioArgs;
  });
});

Thanks for your help.

Re: Print Task on Custom ArcGISImageServiceLayer

JianHuang — Wed, 18 Dec 2013 23:40:45 GMT

I looked at the source code. PrintTask doesn't work with any custom layer. Because it checks the property layer.declaredClass to decide what to serialize into the json output.
In your case, only when layer.declaredClass === "esri.layers.ArcGISImagerServiceLayer", it will serialize renderingRule.
Is your custom layer written in AMD style or legacy style? You can try to override .declaredClass property as "esri.layers.ArcGISImagerServiceLayer". It shouldn't cause any conflicts.

Re: Print Task on Custom ArcGISImageServiceLayer

RobertWinterbottom — Sat, 11 Dec 2021 06:24:35 GMT

I looked at the source code. PrintTask doesn't work with any custom layer. Because it checks the property layer.declaredClass to decide what to serialize into the json output.
In your case, only when layer.declaredClass === "esri.layers.ArcGISImagerServiceLayer", it will serialize renderingRule.
Is your custom layer written in AMD style or legacy style? You can try to override .declaredClass property as "esri.layers.ArcGISImagerServiceLayer". It shouldn't cause any conflicts.

Thanks Jian, we are using the AMD style, the whole class is listed below if that will be of some help. I tried overriding the .declaredClass property and it still did not seem like it wanted to pick it up.

Here is our version of the class, it makes use of Knockout to store values from sliders and checkboxes in Model.getVM().suitabilityCustomSettings().computeBinaryRaster as an array and through some helper functions we are able to construct our custom renderingRule.

define(["declare", "esri/layers/RasterFunction", "esri/layers/ImageServiceParameters", "toolsmodel", "dojo/_base/array", "dojo/_base/lang"],
  function (declare, RasterFunction, ImageServiceParameters, Model, arrayUtils, lang) {
    return declare("SuitabilityImageServiceLayer", esri.layers.ArcGISImageServiceLayer, {
      constructor: function () {

        // raster function arguments must be in same order as in image service moasic dataset
        this.rasterFunctionArguments = {};
        this.rasterFunctionArguments.ElevRaster = "$1";
        this.rasterFunctionArguments.SlopeRaster = "$2";
        this.rasterFunctionArguments.WaterRaster = "$3";
        this.rasterFunctionArguments.ConsRaster = "$4";
        this.rasterFunctionArguments.STypeRaster = "$5";
        this.rasterFunctionArguments.SDepthRaster = "$6";
        this.rasterFunctionArguments.PeatRaster = "$7";
        this.rasterFunctionArguments.SAcidRaster = "$8";
        this.rasterFunctionArguments.SDrainRaster = "$9";
        this.rasterFunctionArguments.RainfallRaster = "$10";
        this.rasterFunctionArguments.LCRaster = "$11";

        // scalars are harded-coded based on raster pre-processing scripts
        this.rasterFunctionScalars = {};
        this.rasterFunctionScalars.Elev = 10;
        this.rasterFunctionScalars.Slope = 1;
        this.rasterFunctionScalars.Water = 10;
        this.rasterFunctionScalars.Cons = 100;
        this.rasterFunctionScalars.SType = 1;
        this.rasterFunctionScalars.SDepth = 1;
        this.rasterFunctionScalars.Peat = 1;
        this.rasterFunctionScalars.SAcid = 1;
        this.rasterFunctionScalars.SDrain = 1;
        this.rasterFunctionScalars.Rainfall = 10;
        this.rasterFunctionScalars.LC = 1;

        this.renderingRule = {};
        this.declaredClass = "esri.layers.ArcGISImageServiceLayer";

        var rasterFunction = new RasterFunction();
        rasterFunction.functionName = "RemapColormap2Prashant";
        rasterFunction.arguments = this.rasterFunctionArguments;

        var params = new ImageServiceParameters();
        params.noData = 0;
        params.renderingRule = rasterFunction;
        this.imageServiceParameters = params;

      },

      getExportUrl: function(extent,width,height,callback,options){
          function callback(url){
              return;
          }
      },

      getRenderingRule: function () {
          //console.log("GET RENDER RULE");
          var _self = this;
          var suitabilitySettings = _self.returnRasterSettingsAsObject();
          var render_rule = {};

          lang.mixin(render_rule, this.rasterFunctionArguments);

          _self.addThresholdArgument(suitabilitySettings, render_rule, 'Elev', _self.rasterFunctionScalars, 'MAX');
          _self.addThresholdArgument(suitabilitySettings, render_rule, 'Slope', _self.rasterFunctionScalars, 'MAX');
          _self.addThresholdArgument(suitabilitySettings, render_rule, 'Water', _self.rasterFunctionScalars, 'MIN');
          _self.addThresholdArgument(suitabilitySettings, render_rule, 'Cons', _self.rasterFunctionScalars, 'MIN');
          _self.addThresholdArgument(suitabilitySettings, render_rule, 'Rainfall', _self.rasterFunctionScalars, 'BETWEEN');
          _self.addMembershipArgument(suitabilitySettings, render_rule, 'SDepth', [0, 1, 2, 3, 4, 5, 6, 7]);
          _self.addMembershipArgument(suitabilitySettings, render_rule, 'Peat', [0, 1, 2, 3, 4, 5, 6]);
          _self.addMembershipArgument(suitabilitySettings, render_rule, 'SAcid', [0, 1, 2, 3, 4, 5, 6, 7]);
          _self.addMembershipArgument(suitabilitySettings, render_rule, 'SDrain', [0, 1, 2, 3, 4]);
          _self.addMembershipArgument(suitabilitySettings, render_rule, 'LC', [0, 1, 2, 3, 4, 5, 6, 7, 8]);
          _self.addMembershipArgument(suitabilitySettings, render_rule, 'SType', [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);

          var rasterFunction = new RasterFunction();
          rasterFunction.rasterFunction = "PalmOilSuitabilityNew";
          rasterFunction.rasterFunctionArguments = render_rule;
          return rasterFunction;
      },

      getImageUrl: function (extent, width, height, callback, options) {
        var _self = this;
        var bbox = [extent.xmin, extent.ymin, extent.xmax, extent.ymax],
          params,
          min,
          max,
          tempArray,
          membership_arguments;

        var rasterFunction = _self.getRenderingRule();
        if (options) {
            params = options;
            params['renderingRule'] = JSON.stringify(rasterFunction);
            params['bbox'] = bbox.join(",");
            _self.renderingRule = rasterFunction;
            callback(_self.url + "/exportImage?",params);
        } else {
            params = {
                noData: 0,
                noDataInterpretation: "esriNoDataMatchAny",
                interpolation: "RSP_BilinearInterpolation",
                renderingRule: JSON.stringify(rasterFunction),
                format: "png8",
                size: width + "," + height,
                imageSR: 3857,
                bboxSR: 3857,
                f: "image",
                pixelType: 'U8',
                bbox: bbox.join(",")

            };

            _self.renderingRule = rasterFunction;
            callback(_self.url + "/exportImage?" + dojo.objectToQuery(params));
        }
        
      },

      returnRasterSettingsAsObject: function () {
        var result = {};
        var settingsArray = Model.getVM().suitabilityCustomSettings().computeBinaryRaster;
        arrayUtils.forEach(settingsArray, function (setting) {
          result[setting.name] = setting.values;
        });
        return result;
      },

      returnNumericArray : function (stringArray) {
          var temp = stringArray.split(",");
          var result = [];
          arrayUtils.forEach(temp, function (value) {
            result.push(parseInt(value, 10));
          });
          return result;
      },

      addThresholdArgument: function (suitabilitySettings, renderRule, variableName, scalars, breakType) {
        var _self = this;
        scalar = scalars[variableName];
        if (breakType === 'BETWEEN') {
            var tempArray = _self.returnNumericArray(suitabilitySettings[variableName + 'InpR']);
            var min = tempArray[0];
            var max = tempArray[tempArray.length - 1];
            renderRule[variableName + 'InpR'] = [0, min / scalar, min / scalar, max / scalar, max / scalar, 1000000];
            renderRule[variableName + 'OutV'] = [1, 1, 0];
        } else {
            var breakpoint = parseInt(suitabilitySettings[variableName + 'InpR'], 10);
            renderRule[variableName + 'InpR'] = [0, breakpoint / scalar, breakpoint / scalar, 1000000];
            renderRule[variableName + 'OutV'] = breakType === 'MIN' ? [0, 1] : [1, 0];
        }
      },

      addMembershipArgument: function (suitabilitySettings, renderRule, variableName, allValues) {
        var _self = this;
        var validValues = _self.returnNumericArray(suitabilitySettings[variableName + 'InpR']);
        var input_values = [];
        var output_values = [];
        var includeNulls = ["SDepth","SAcid","SDrain","LC"];
        var val;
        var i;

        if (includeNulls.indexOf(variableName) > -1 && validValues[0] !== 0)
          validValues.unshift(0);

        for (i = 0; i < allValues.length; i++) {
          val = allValues;
          input_values.push(val, val);
          if (validValues.indexOf(val) === -1) {
            output_values.push(0);
          } else {
            output_values.push(1);
          }
        }
        renderRule[variableName + 'InpR'] = input_values;
        renderRule[variableName + 'OutV'] = output_values;
      }

    });
  });

Re: Print Task on Custom ArcGISImageServiceLayer

JianHuang — Thu, 19 Dec 2013 16:35:05 GMT

Robert,

Here is a simplest sample which works on my side.

custom layer, which inherits from ArcGISImageServiceLayer but do nothing.

define( [   "dojo/_base/declare",   "esri/layers/ArcGISImageServiceLayer" ], function(   declare, ArcGISImageServiceLayer ) {    var MyImageServiceLayer = declare([ArcGISImageServiceLayer], {     declaredClass: "esri.layers.ArcGISImageServiceLayer"       });   return MyImageServiceLayer;   });

Test page:

  var map, layer;   require(["esri/map", "esri/layers/MyImageServiceLayer", "esri/dijit/Print", "dojo/domReady!"],   function (Map, MyImageServiceLayer, Print) {     esri.config.defaults.io.proxyUrl = "/proxy.ashx";//use your own proxy instead of this.     map = new Map("map", {       basemap: "gray",       center: [-80.85, 35.22],       zoom: 14     });      var print = new Print({       map: map,       url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"     }, "print");     print.startup();      layer = new MyImageServiceLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/CharlotteLAS/ImageServer");      map.addLayer(layer);     layer.on("load", function () {       layer.renderingRule = {         "rasterFunction": "RFTShadedReliefElevationColorRamp"       };       layer.renderingRule.toJson = function () {         return {           "rasterFunction": "RFTShadedReliefElevationColorRamp"         };       };       layer.setRenderingRule(layer.renderingRule);     });   });

Re: Print Task on Custom ArcGISImageServiceLayer

RobertWinterbottom — Fri, 20 Dec 2013 12:52:51 GMT

Hey Jian, Thanks for the snippet, that really helped, it is now working as it should, I had to just make a minor tweak to my class and everything is now working as expected. It seems I was missing the "esri/layers/ArcGISImageServiceLayer" from my initial define, adding that in pretty much did the trick. I also had to play with the renderingRule to JSON function to get it working correctly with our renderingRule but everything is working great now without the need for the esri.setRequestPreCallback. 🙂

Thanks again!!