geoprocessing service no response with Leaflet

415
12
12-01-2018 09:32 AM
GrantHaynes
Occasional Contributor

Hi all,

I'm using leaflet to create a time series web map where a user can place a point on a map and the values at that lat and long will be graphed on the web page. I have a geoprocessing service that runs fine, I've tested it in arcmap and it works great it accepts lats and longs and spits out the extracted data values. I also have a web page that allows a user to create points and produces lats and longs to be passed back to the geoprocessing service. However I cannot get the two to talk to each other, can anyone here tell me what is wrong?

<!-- Map processes here -->
<div id = "map">
<script type='text/javascript'>
var map = L.map('map').setView([0, 0], 2);

L.esri.basemapLayer('Gray').addTo(map);

map.on('click', addMarker);

var MarkerLayer = new L.FeatureGroup();
map.addLayer(MarkerLayer);

var Coordinates = [];
function addMarker(e){
Marker = new L.marker(e.latlng).addTo(MarkerLayer);
Coordinates.push(e.latlng);
}

function ClearMarker(){
MarkerLayer.clearLayers();
Coordinates = [];
}

function Geoprocessing(){
// Go through coordinates generated from leaflet and split them
// up to be passed to the geoprocessing service
Coordinates.forEach(function(item){
var Results = [];
var StrItem = String(item);
var StrParts = StrItem.split(",");
var Lat = StrParts[0].slice(7);
var Long = StrParts[1].substring(0, StrParts[1].length - 1);

//execute geoprocessing service each time a lat and long are generated
var gpService = L.esri.GP.service({
useCors:false
});
var gpTask = gpService.createTask();
gpTask.setParam("InputX", Long);
gpTask.setParam("InputY", Lat);
gpTask.run(DataCallBack);
})

// Handle server response
function DataCallBack(error, raw, response)
{
window.alert(error.message);
}
}
</script>
Reply
0 Kudos
12 Replies
JohnGravois
Frequent Contributor

> However I cannot get the two to talk to each other.

are you saying you can't get your webpage to talk to ArcMap?

or are you saying you can't figure out how to invoke the GP service using the coordinates that the user drew in the esri-leaflet app?

Reply
0 Kudos
GrantHaynes
Occasional Contributor

The later. I accessed the GP service from ArcMap to test it. 

Reply
0 Kudos
JohnGravois
Frequent Contributor

you need to call Geoprocessing() from within your `addMarker()` function.

bonus points if you start passing through the latitude and longitude as arguments instead of relying on a global variable.

ex:

Geoprocessing(e.latlng.lng, e.latlng.lat)‍‍

// ...

function Geoprocessing(long, lat) {
})‍‍‍‍‍‍‍‍‍‍‍‍
Reply
0 Kudos
GrantHaynes
Occasional Contributor

Thanks, that really cleaned up the code, but I still am getting a null response from the service, I'm using a window.alert to verify the server response, could I be missing something in the DataCallBack function?

function addMarker(e){
Marker = new L.marker(e.latlng).addTo(MarkerLayer);
Geoprocessing(e.latlng.lng, e.latlng.lat);
}

// Clear markers
function ClearMarker(){
MarkerLayer.clearLayers();
}

function Geoprocessing(Long, Lat){
//execute geoprocessing service with lat and long produced by user input
var gpService = L.esri.GP.service({
useCors:false
});
var gpTask = gpService.createTask();
gpTask.setParam("InputX", Long);
gpTask.setParam("InputY", Lat);
gpTask.run(DataCallBack);

// Handle server response
function DataCallBack(error, raw, response)
{
window.alert(raw);
window.alert(response);
}
}
</script>
</div>
Reply
0 Kudos
JohnGravois
Frequent Contributor

try snooping the web traffic to see the actual request and response.

Reply
0 Kudos
GrantHaynes
Occasional Contributor

So I'm not much of a web guy, how do you do that? or could you point me to some resources on it?

Reply
0 Kudos
JohnGravois
Frequent Contributor

i meant open the developer tools in your browser and inspect the individual requests and responses.

Reply
0 Kudos
GrantHaynes
Occasional Contributor

Thanks, when I run the developer tools in chrome and place points on the page I get the following messages.

http://www.esrs.wmich.edu/arcgis/rest/services/test/Grant_Timeseries_Test_Tool/GPServer/execute?Inpu... 

window._EsriLeafletCallbacks.c9({"error":{"code":400,"message":"Invalid URL","details":[]}});

http://www.esrs.wmich.edu/arcgis/rest/services/test/Grant_Timeseries_Test_Tool/GPServer/?callback=wi... 

window._EsriLeafletCallbacks.c0({"currentVersion":10.5,"serviceDescription":"","tasks":["Value Extraction Tool"],"executionType":"esriExecutionTypeSynchronous","resultMapServerName":"","maximumRecords":1000});

I'm guessing then it means that the URL to the geoprocessing service is bad, and since the URL to the service itself is fine, I'm guessing that the problem is in the constructed part of the URL that passes parameters back to the service.

Reply
0 Kudos
JohnGravois
Frequent Contributor

there's no need to guess. inspect the url and the request parameters for a successful request when visiting the raw service endpoint and compare and contrast that with what's being sent from your esri-leaflet app.

Reply
0 Kudos