topic Re: Call a function within a function using esri/request returned data in ArcGIS JavaScript Maps SDK Questions

Call a function within a function using esri/request returned data

RachelAlbritton — Sat, 11 Dec 2021 06:34:15 GMT

I am using the esri/request function to return an array of Long, Lat coordinates that I can then symbolize and add to a graphics layer. I have been able to successfully do this by creating the symbology and graphics within the stopsRequestSucceeded callback method. My issue is that I need to be able to repeat this call for approximately 15 different sets of data that would all need to be symbolized differently, and using the current method that I have working, I would have to write 15 different successful callback methods. To get around this I am trying to write two different functions. First, I narrowed the scope of the stopsRequestSucceeded method to push all the results to an array. This does work (at least according to my console.log statement. Next, I wrote a second function that would call the stopsRequestSucceeded function so that I can loop through the returned array and assign symbology and create a graphic. However, when I call the stopsRequestSucceeded function within the second, stopsGraphic function, the variable is empty. What am I doing wrong?

require([
    "esri/map",
     "esri/layers/ArcGISTiledMapServiceLayer", 
     "esri/layers/GraphicsLayer",
     "esri/request",
     "esri/symbols/SimpleMarkerSymbol",
     "esri/graphic",
     "esri/SpatialReference",
     "esri/geometry/Point",
     "esri/Color",
     "esri/InfoTemplate",

     "dojo/dom",
    "dojo/on",
     "dojo/dom-class",
     "dojo/_base/json",
     "dojox/mobile/Switch",
    "dojo/parser",
    "dojo/ready"],

    function (Map,ArcGISTiledMapServiceLayer, GraphicsLayer, esriRequest,SimpleMarkerSymbol, Graphic, SpatialReference, Point, Color, InfoTemplate,
              dom, on, domClass, dojoJson, Switch, parser, ready){

            // Create the map
            var map = new Map("map", {
                basemap: "topo",
                center: [-111.841947,40.765530],
                zoom: 15
            });
               
               //Create Graphics Layer
               var stopsGraphicsLayer = new GraphicsLayer({
                    id: "stopsGraphicsLayer"
               });
               
               var vehicleLocationGraphicsLayer = new GraphicsLayer ({
                    id: "vehicleLocationGraphicsLayer"
               });

               
               var basemap = new ArcGISTiledMapServiceLayer ("https://fmags.fm.utah.edu/arcgis/rest/services/mapservices/public_basemap_2014/MapServer");
               map.addLayer(basemap);
               
               //add graphics layer
               map.addLayer(vehicleLocationGraphicsLayer);
               map.addLayer(stopsGraphicsLayer);
               
               //hide graphics layer
               vehicleLocationGraphicsLayer.hide();
               stopsGraphicsLayer.hide();
               
               //Create Toggles
               var vehicle = new Switch({
                    id: "vehicle", //defines css - and you can not repeat and id
                    value:"off",
                    class:"mblSwSquareShape"
                    });
                    
                    vehicle.placeAt(document.body); // e.g add the switch to body
                    vehicle.startup();
                    vehicle.on("stateChanged",function(newstate){
                         if (newstate === "on"){
                         
                         //Request vehicle locations
                         esriVehicleRequest(15);
                         
                         //request stop locations
                         esriStopRequest(15);
                         stopsGraphic(0,0,0);
                         }
                         
                         else 
                              
                         {
                         vehicleLocationGraphicsLayer.hide();
                         stopsGraphicsLayer.clear();
                         stopsGraphicsLayer.hide();
                         
                         }
                    });
               
               
               function esriVehicleRequest(routeID){
                    var vehicleRequest = new esriRequest ({
                              url: "http://www.uofubus.com/Services/JSONPRelay.svc/GetMapVehiclePoints",
                              content: {
                                   apikey: "ride1791",
                                   routeID: routeID, //needs to become an input variable
                              },
                              handleAs: "json",
                              callbackParamName: "method"
                         });
                         vehicleRequest.then(vehicleRequestSucceeded, requestFailed);
                         }
               
               function vehicleRequestSucceeded(data) {
                    
                    //Get vehicle points
                    for (i=0; i < data.length; i++) {
                         console.log("Vehicle Points: ", data[i].Longitude , data[i].Latitude);
               }
               }          
               
               function esriStopRequest (routeID){
                         var stopsRequest = new esriRequest ({
                         url: "http://uofubus.com/Services/JSONPRelay.svc/GetStops",
                         content: {
                              apikey: "ride1791",
                              routeID: routeID, 
                         },
                         handleAs: "json",
                         callbackParamName: "method"
                    });
                    stopsRequest.then(stopsRequestSucceeded, requestFailed); //both methods are registered as part of esri request
                    }
               
               /*
               //THIS WORKS BUT I NEED TO BE ABLE TO APPLY DIFF SYMBOLOGY TO EACH NEW ARRAY RETURNED
               function stopsRequestSucceeded (data){
                    
                         //Get Stops
                         for(i=0; i < data.length; i++){
                                   
                              //Create Symbology
                              var stopsSMS = new SimpleMarkerSymbol().setSize(15).setColor(new Color([0,0,0]));
                              
                              //Create InfoTemplate
                              
                         
                              //Create Graphic
                              var stops = new Graphic (new Point (data.Longitude, data.Latitude, map.SpatialReference), stopsSMS);
                              console.log(stops);
                              
                              //Add graphics to graphics layer
                              map.getLayer(stopsGraphicsLayer);
                              stopsGraphicsLayer.add(stops);
                              map.graphics.add(stops);
                         }
                         
                         //Once all the graphics are added to the graphics layer, show GL
                         stopsGraphicsLayer.show();
                         console.log("graphics layer added: ");
                         console.log(stopsGraphicsLayer);
                    } */
               
               //New Return Data Function               
               function stopsRequestSucceeded(data){
                    var stopsArray = [];
                    
                    //Get Stops
                         for(i=0; i < data.length; i++){
                              stopsArray.push(data[i]);     
                         }     
                         console.log ("Stops Array:", stopsArray);
                         return stopsArray;
               }
               
               //Get data from the stopsRequestSucceeded function, apply symbology and create graphics
               function stopsGraphic(color){
                    
                    var stopObjects = stopsRequestSucceeded();
                    console.log(stopObject); //not logging anything
                    
                    for(i=0; i < stopObjects.length; i++) {
                         
                         //Create Symbology
                         var stopsSMS = new SimpleMarkerSymbol().setSize(15).setColor(new Color([color]));
                         
                         //Create Graphic
                         var stops = new Graphic (new Point (stopObjects[i].Longitude, stopObjects[i].Latitude, map.SpatialReference), stopsSMS);
                         console.log(stops);
                         
                         //Add graphics to graphics layer
                         map.getLayer(stopsGraphicsLayer);
                         stopsGraphicsLayer.add(stops);
                         map.graphics.add(stops);
                         
                    }
               }
          
               
               function requestFailed(error) {
                 console.log("Error: ", error.message);
               }
               
                 });
          
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Call a function within a function using esri/request returned data

KellyHutchins — Wed, 30 Nov 2016 19:32:21 GMT

If I understand your question correctly it looks like you'll need to get the data first and then pass it to the stopsGraphic function. Here's a jsbin showing how this would work.

JS Bin - Collaborative JavaScript Debugging

Re: Call a function within a function using esri/request returned data

RachelAlbritton — Wed, 30 Nov 2016 19:44:38 GMT

Thank you Kelly - That works but I'm not clear as to why. Is there a resource you can point me to?

I appreciate your time.

Re: Call a function within a function using esri/request returned data

KellyHutchins — Sat, 11 Dec 2021 06:34:18 GMT

Rachel,

This article should provide some of the basics.

Dojo Deferreds and Promises - Dojo Toolkit Tutorial

The main point is that instead of trying to call stopsRequestSucceeded from the stopsGraphic function we just wait until the original stopsRequestSucceeded call is finished and then we pass the returned data and a color to the stopsGraphics function.

    //New Return Data Function               
               function stopsRequestSucceeded(data){
                    var stopsArray = [];
                    
                    //Get Stops
                         for(i=0; i < data.length; i++){
                              stopsArray.push(data[i]);     
                         }     
                         console.log ("Stops Array:", stopsArray);
                         return stopsArray;
               }
               
               //Get data from the stopsRequestSucceeded function, apply symbology and create graphics
               function stopsGraphic(color){
                    
                    var stopObjects = stopsRequestSucceeded();

Re: Call a function within a function using esri/request returned data

RachelAlbritton — Wed, 30 Nov 2016 20:24:07 GMT

Actually, the code doesn't seem to acknowledge different colors that are passed through. I just tried 255,0,0 (red) and still had black symbols being returned which I'm assuming is a default color if a color isn't assigned.

EDIT:

It seems to work in your JSBin but if I copy/paste it into an html file the colors don't change.

Thoughts?

Re: Call a function within a function using esri/request returned data

KellyHutchins — Wed, 30 Nov 2016 20:39:17 GMT

I updated it after I sent the link to address the color issue. Can you retest with this version:

JS Bin - Collaborative JavaScript Debugging

Re: Call a function within a function using esri/request returned data

KenBuja — Wed, 30 Nov 2016 20:49:40 GMT

Have you zoomed in on the map after changing the Switch back to off? The graphics layers aren't hidden and the points aren't retaining their position.

Re: Call a function within a function using esri/request returned data

RachelAlbritton — Wed, 30 Nov 2016 20:52:18 GMT

That appears to be working. I see that the brackets just had to be removed from this line in the stopsGraphic function

var stopsSMS = new SimpleMarkerSymbol().setSize(15).setColor(color);

thank you

Re: Call a function within a function using esri/request returned data

KellyHutchins — Wed, 30 Nov 2016 20:57:48 GMT

There are additional issues with the original code including the fact that graphics are added to the map's graphics layer but not cleared. You can clear using this when the off button is clicked.

map.graphics.clear();

Although the code should probably be cleaned up to add to either the graphics layer or the map's graphic layer. Here's a bin showing this in action:

JS Bin - Collaborative JavaScript Debugging