Displaying raster using ArcGIS API for JavaScript?

Question

It's all a proof of concept for myself and my learning but I have definitely hit a brick wall here!

Here's what I've done and can get to work.

I have written a Python script that:

1. Sets its workspace to and SDE instance.
2. Checks out a Spatial licencse.
3. Queries raster layers.
4. Takes a raster layer based on some string match - and then adds 100 to each pixel to create an output raster. Raster Algebra stuff....
5. The output raster is saved in the scratch workspace as "wibble".

Next....

I can Share As A Geoprocessing Service and it does all the same stuff and saves an output raster to the ArcGIS Servers output directory with a Scratch FGDB there and a raster called "wibble".

Next...

I want to run my Geoprocessing task from the browser using JS API and that works too, and it puts the output raster in a jobs folder - looking something like this:

d:\arcgisserver\directories\arcgisjobs\testraster_gpserver\jccffbe1165404cf4b930b971c86be46a\scratch\scratch.gdb\wibble

My code for the geoprocessor looks like:

var gp = new Geoprocessor("http://ls8-webd-w8v:6080/arcgis/rest/services/TestRaster/GPServer/TestRaster");
var params = { "inputMessage": dom.byId("testMessage").value };
        gp.submitJob(params, completeCallback, statusCallback);

So how do I now hook up my JavaScript code to get hold of this "wibble" raster and display it on a map in the browser. Now, I know you are not able to directly draw out rasters to a map service, it has to be an image, so you use getResultImageLayer from the geoprocessing object, but it still doesn't display, I think the code is wrong:

function completeCallback(jobInfo) {
    imageParams = new ImageParameters();
    imageParams.imageSpatialReference = map.spatialReference;
    gp.getResultImageLayer(jobInfo.jobId, "wibble", imageParams, function (gpLayer) {
        gpLayer.setOpacity(0.5);
        map.addLayer(gpLayer);
    });
}

I'm not even doing anything with ImageParameters - as I'm not sure what to do. Then I tried a different way, still nothing.

function completeCallback(jobInfo) {
    mapserviceurl = "http://ls8-webd-w8v:6080/arcgis/rest/services/TestRaster/GPServer/TestRaster/jobs";
    var mapurl = mapserviceurl + "/" + jobinfo.jobId;

    var outputLayer = new ArcGISDynamicMapServiceLayer(mapurl, {
        "id": "TestRaster",
        "opacity": 0.7
    });

    map.addLayer(outputLayer);
};

Oh, by the way - here is the python that makes the geoprocessing script - it's nothing major!

import arcpy, os, sys
from arcpy.sa import *

inputSde = r"Database Connections\ls8-dbd-w8v-2_geodb_GEOLOGY.sde"
arcpy.env.overwriteOutput = True

inputString = arcpy.GetParameterAsText(0)

def main():
    try:
        if arcpy.CheckExtension("Spatial") == "Available":         
            arcpy.CheckOutExtension("Spatial")
        else:
            raise LicenseError

        arcpy.env.workspace = inputSde
        outRas = None

        rastersStrings = arcpy.ListRasters("*", "All");

        for strRaster in rastersStrings:
            if strRaster == "GEOLOGY.MAAS_BATHYMETRY":
                path = os.path.join(inputSde, strRaster)
                raster = Raster(path)
                outRas = raster + 100
                if outRas is not None:
                    tempFile = os.path.join(arcpy.env.scratchGDB, "wibble")
                    outRas.save(tempFile)
                else:
                    arcpy.AddWarning("Failed to make raster")

    except LicenseError:
        print "Spatial license is unavailable"  
    except:
         arcpy.AddWarning("Error: {0}".format(sys.exc_info()[0]))
    finally:
        arcpy.CheckInExtension("Spatial")

if __name__ == '__main__':
    main()

---

I get the following Javascript error message for using the ImageParameters code (as above) - saying its "400 a bad request" - it looks like its looking in a folder "results" but I don't have that on the server - could it be to do with how I am saving the raster in the Python script?

http://ls8-webd-w8v:6080/arcgis/rest/services/TestRaster/GPServer/TestRaster/jobs/j7613d1e015a74976986c6f7447ea5ba5/results/wibble?dpi=96&transparent=true&format=png8&imageSR=4326&f=image&bbox=%7B%22xmin%22%3A-220.57570097228788%2C%22ymin%22%3A-48.21623734392513%2C%22xmax%22%3A220.57570130793587%2C%22ymax%22%3A135.59684693950146%2C%22spatialReference%22%3A%7B%22wkid%22%3A4326%2C%22latestWkid%22%3A4326%7D%7D&bboxSR=4326&size=960%2C400

Answer 1

A couple of thoughts:

• If you're using ArcGIS Server for custom raster based services, definitely checkout the Image Service. You put your rasters in a Mosaic dataset, then publish THAT to the server. You can then attach predefined raster functions which correspond to those of Map Algebra / Raster Calculator.

  http://www.esri.com/software/arcgis/arcgisserver/extensions/image-extension

  Link to a presentation showing connection between Image Server and Esri JS API http://www.slideshare.net/blueraster/total-knockout-esridevelopersummit2014-ab-bc-rw-presentation-20140314

• If you can't use Image Server for some reason, keep in mind you need to return standard web image formats (jpg/png) from your service, and your service must handle bbox, height and width input parameters. You then run the tool and share the result as a service.

Answer 2

I found the solution - and it was only one or two things that were missing.

1. In the python script I needed to add:

-

if outRas is not None:
  arcpy.AddWarning("Made a new raster")
  tempFile = os.path.join(arcpy.env.scratchGDB, "wibble")
  arcpy.AddWarning(tempFile) 
  outRas.save(tempFile)
  arcpy.SetParameterAsText(1, tempFile) #THIS WAS MISSING

Then when you make the tool in the toolobox - you need to set the output parameter like so:

Make sure it's of type Raster Layer (the name is important "output" as this is used in the Javascript bit to add the layer. The type should be Derived and the direction should be Output.

The following Javascript adds the image to the map with specifying it by name - "output" -

 var imageParams = new ImageParameters();

     imageParams.imageSpatialReference = map.spatialReference;
     gp.getResultImageLayer(jobInfo.jobId, "output", imageParams, function (gpLayer) {
     gpLayer.setOpacity(0.5);
     map.addLayer(gpLayer);
     });

Also make sure your geoprocessing service is Asyncronous and "View results with a map service" is checked. These setting are found in the Parameters page.