AnsweredAssumed Answered

Create InfoTemplate content from 2 separate esriRequests?

Question asked by rralbritton on Dec 13, 2016
Latest reply on Dec 13, 2016 by khutchins-esristaff

I am accessing a service from another provider to create part of an application. I make an esriRequest to grab Lat/Long coordinates and create a graphics. This initial request also contains some attributes that I would like to display in the InfoTemplate (and have done so successfully). However, there is a separate request that is needed to fetch the rest of the attributes that I would like to display within the same infoTemplate. Is this even possible?

 

If not, I would most likely choose to use the data from the SECOND request to show in the infoTemplate and have not had any success in being able to do so. Using Chrom dev tools I can see the request being successfully made, but the infoTemplate remains empty. I think its because I'm not correctly passing in the attributes parameter to the graphic when its getting created. I thought that by returning the 'vehicleTemplateArray' I would be able to achieve this but its not working. How do I make this work?

 

Thank you.

 

               //Create Toggles
               var vehicleInterval;
               
               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).then(function(vehicleResponse){
                         vehicleGraphicFunction(new Color([255,0,0]), vehicleResponse);
                         });
                         
                         vehicleInterval = setInterval(function(){
                              vehicleLocationGraphicsLayer.clear();
                              esriVehicleRequest(15).then(function(vehicleResponse){
                              vehicleGraphicFunction(new Color([255,0,0]), vehicleResponse);
                              });     
                              }, 3000);
                    }
                         
                         else
                         {
                              
                         //Stop setInterval
                         clearVehicleInterval(vehicleInterval);
                         
                         //Clear graphics
                         vehicleLocationGraphicsLayer.clear();
                         
                         //Hide graphics layer
                         vehicleLocationGraphicsLayer.hide();
                         
                         }
                    });
                    

               function clearVehicleInterval (graphicsLayer){
                              clearInterval(graphicsLayer);
                         }
                              
               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);
                    return vehicleRequest;
               }
     
               function vehicleRequestSucceeded(data) {
                    var vehicleArray = [];
                    //Get vehicle points
                    for (i = 0; i < data.length; i++) {
                         vehicleArray.push(data[i]);
                    }
                    return vehicleArray;
               }
               
               function vehicleGraphicFunction(color, data) {
                    var vehicleObjects = data;
                    
                    for (i = 0; i < vehicleObjects.length; i++) {
                         
                         //Create Symbology
                         var vehicleSMS = new SimpleMarkerSymbol().setSize(30).setColor(new Color(color));
                         
                         //Create InfoTemplate
                         //These attributes are part of the intial esriRequest and I CAN show them
                         //I would like to combine this with a second request OR only show the second request
                         //var vehicleInfoTemplate = new InfoTemplate ("<b>Name: </b>"+vehicleObjects[i].Name, "<b>Speed: </b>"+Math.round(vehicleObjects[i].GroundSpeed)+"mph");
                                                  
                         //Create Graphic
                         var vehicleGraphic = new Graphic(new Point(vehicleObjects[i].Longitude, vehicleObjects[i].Latitude, map.SpatialReference), vehicleSMS, vehicleInfoTemplateRequestSucceeded, esriVehicleInfoTemplateRequest(data[i].VehicleID));
                         
                         //Add graphics to graphics layer
                         map.getLayer(vehicleLocationGraphicsLayer);
                         vehicleLocationGraphicsLayer.add(vehicleGraphic);
                         vehicleLocationGraphicsLayer.show();
                    }
               }
               
               function esriVehicleInfoTemplateRequest (vehicleID) {
                    var vehicleInfoTemplateRequest = new esriRequest ({
                         url: "http://www.uofubus.com/Services/JSONPRelay.svc/GetVehicleRouteStopEstimates",
                         content: {
                              vehicleIDStrings: vehicleID, //comma seperated integers of vehicle IDs to retrieve - GetMapVehiclePoints method
                              quantity: 1,
                         },
                         handleAs: "json",
                         callbackParamName: "method"
                    });
                    vehicleInfoTemplateRequest.then(vehicleInfoTemplateRequestSucceeded, requestFailed);
                    return vehicleInfoTemplateRequest;
               }
               
               function vehicleInfoTemplateRequestSucceeded (data){
                    console.log(data);
                    var vehicleTemplateArray = [];
                    for (i = 0; i < data.length; i++){
                         vehicleTemplateArray.push(data[i]);     
                         var vehicleInfoTemplate = new InfoTemplate ("<b>VehicleID: </b>"+data[i].VehicleID, data[i].Estimates[i].Description+": "+data[i].Estimates[i].EstimateTime);     
                    }
                    //console.log(vehicleTemplateArray);
                    return vehicleTemplateArray;     
                    return vehicleInfoTemplate;
               }
               
               function requestFailed(error) {
                 console.log("Error: ", error.message);
               }
               
          });

Outcomes