Using Geoprocessing Services into Javascript Application

DEVAPP · ‎09-05-2015

Hi,

guys have have create a model builder that have as output a layer with a specific file .lyr so one line have a color and other line have a different color.

I have published this model as GP Services and now i would like to use this GP into Javascript Application.

I would like to develop application that by click on service passing input feature to model and rendering the result of model into app.

There is some code example?

I have seen the Geoprocessing tool linto into popup but doesn't work.

Any help?

Thanks

ModyBuchbinder · ‎09-06-2015

Hi

The lyr definition does not go into the service when you publish.

In Web App Builder you can define the symbology for the output.

In JavaScript you have to write your own code. You can start with this example: https://developers.arcgis.com/javascript/jssamples/gp_resultmapservice.html

DEVAPP · ‎09-07-2015

Hi Mody, thanks for your replay.

I have seen this example but the best example for my project is Geoprocessing Tool link into popup.

Now i'm trying to set a geoprocessing tool link into my popup but i have a error:

Uncaught TypeError: Cannot read property 'infoWindow' of undefined

this is my code:

<!DOCTYPE html>

<html>

<head>

<title>Basemaps Widget</title>

<style>

html, body, #mapDiv {

height: 100%;

width: 100%;

}

esriPopup .titlePane, .esriPopup.light .titlePane, .esriPopup.dark .titlePane {

height: 34px;

padding: 10px 0px 0px 10px;

background-color: #938686;

font-size: 14px;

}

</style>

require(["esri/map",

"dojo/query",

"esri/dijit/BasemapGallery",

"esri/dijit/Popup",

"esri/dijit/PopupTemplate",

"esri/layers/FeatureLayer",

"esri/layers/ImageParameters",

"esri/dijit/InfoWindow",

"esri/tasks/Geoprocessor",

"esri/InfoTemplate",

"dojo/dom-class", "dojo/dom-construct",

"dojo/on",

"dojo/dom",

"dojo/domReady!"],

function (Map, query, BasemapGallery, Popup, PopupTemplate, FeatureLayer, ImageParameters, InfoWindow, Geoprocessor, InfoTemplate, domClass, domConstruct, on, dom) {

// Create map

var map = new Map("mapDiv",{

basemap: "gray",

center: [-122.69, 45.52],

zoom: 3

});

//define the info template that is used to display the popup content.

var template = new InfoTemplate();

template.setTitle("<b>TITOLO</b>");

template.setContent("<b>IDENTIFICATIVO: ${NUMERO} <br> DEF: ${DEFINIZIONE}</b>");

template.highlight = true;

template.titleInBody = true;

// Create and add the maps from ArcGIS.com

var basemapGallery = new BasemapGallery({

showArcGISBasemaps: true,

map: map

}, "basemapGallery");

basemapGallery.startup();

// Listen to the basemap selection and set the title

on(basemapGallery, "onSelectionChange", function() {

dom.byId("userMessage").innerHTML = basemapGallery.getSelected().title;

});

//create a feature layer based on the feature collection

var featureLayer = new FeatureLayer("http://localhost:6080/arcgis/rest/services/XXX/XXX_XXXI/MapServer/0",

{

mode: FeatureLayer.MODE_ONDEMAND,

outFields: ["*"],

infoTemplate: template

});

map.addLayer(featureLayer);

//setup the geoprocessing tool that will run when users click the new link. This tool

//calculates the population in the specified area.

window.gp = new Geoprocessor("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/GPServ...");

//create a link that we'll the map's popup window.

//The link section of the popup has a class called actionList assigned so we can

//use dojo/query to find the elements with this class name.

var link = domConstruct.create("a", {

"class": "action",

"id": "statsLink",

"innerHTML": "Population", //text that appears in the popup for the link

"href": "javascript: void(0);"

}, query(".actionList", window.map.infoWindow.domNode)[0]);

//when the link is clicked register a function that will run

on(link, "click", calculatePopulation);

// Toggle panel

on(dom.byId("chevron"), "click", function(e){

if (query(".glyphicon.glyphicon-chevron-up")[0]) {

query(".glyphicon").replaceClass("glyphicon-chevron-down","glyphicon-chevron-up");

query(".panel-body.collapse").removeClass("in");

} else {

query(".glyphicon").replaceClass("glyphicon-chevron-up","glyphicon-chevron-down");

query(".panel-body.collapse").addClass("in");

}

});

</script>

</head>

<body>

<h3 class="panel-title">Basemaps</h3>

</button>

</div>

</div>

</body>

</html>

Why i recive this help? Into Require i have set InfoWindow.

Any help?

Thanks