AnsweredAssumed Answered

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

Question asked by rralbritton on Nov 30, 2016
Latest reply on Nov 30, 2016 by khutchins-esristaff

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[i].Longitude, data[i].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);
               }
              
                 });
         

Outcomes