Graphic Layer array empty but showing geometry

[RachelAlbritton]

I need to access the geometry properties of a graphics array so that I can update the associate attribute values, but when I try and view the properties of my graphics layer the Array is empty - but the graphics are shown on the map. 

I've tried changing the log statement to not anything until the graphics "load", "update" or 'update-end" but then it doesn't log anything. What happening here?

Note: The relevant code starts on line 42

    // 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);

    //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(vehicleResponse);
               vehicleLocationGraphicsLayer.show();
          
               //I've tried "update", 'update-end' as well with no success
               vehicleLocationGraphicsLayer.on("load", function(){
                    console.log(vehicleLocationGraphicsLayer);
               })
               
               //logs an empty array
               //console.log( vehicleLocationGraphicsLayer); 
               
          vehicleInterval = setInterval(function(){
               
               //Make an esriRequest
               esriVehicleRequest(15).then(function(vehicleResponse){

                    //Update each graphic in the GL with data from the esriRequest
                    for (graphics = 0; graphics < vehicleLocationGraphicsLayer.graphics.length; graphics++){
                         //update each graphic in the GL with data from the vehicleResponse
          
                    }
                    
                    //vehicleLocationGraphicsLayer.redraw();
               });     
               }, 2000); 
        });
      } 
       
       else {
            
        //Stop setInterval
        clearVehicleInterval(vehicleInterval);
        //Clear graphics
        vehicleLocationGraphicsLayer.clear();
        //Hide graphics layer
        vehicleLocationGraphicsLayer.hide();
      }
       
    });

    function clearVehicleInterval(graphicsLayer) {
      clearInterval(graphicsLayer);
    }

    function esriVehicleRequest(routeID) {
      return new esriRequest({
        url: "http://www.uofubus.com/Services/JSONPRelay.svc/GetMapVehiclePoints",
        content: {
          apikey: "ride1791",
          routeID: routeID 
        },
        handleAs: "json",
        callbackParamName: "method"
      }).then(function(data) {
        return data;
      });
    }

    function vehicleGraphicFunction(data) {
       var vehicleObjects = data       
       var vehicleGraphic; 
       var vehicleAttributes;
       
          for (i=0; i < vehicleObjects.length; i++ ){
     
               //Create Symbology
               var vehiclePNG = new PictureMarkerSymbol({
                    url: "http://batholithtest.fm.utah.edu/map.utah.edu/app/resources/images/icons/shuttleicons/nightred.png",
                    height: 30,
                    width: 30
               });

                 //Create Graphic
                 vehicleGraphic = new Graphic(new Point(vehicleObjects[i].Longitude, vehicleObjects[i].Latitude, map.SpatialReference), vehiclePNG, vehicleObjects[i].VehicleID);
                 
                 //add graphics to layer
                 vehicleLocationGraphicsLayer.add(vehicleGraphic);
          }                
     }

     });

‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP]

Your code should be:

vehicleLocationGraphicsLayer.on("graphic-add", function(){
  console.log(vehicleLocationGraphicsLayer.graphics);
});‍‍‍

[RachelAlbritton]

Thanks for the suggestion Robert, but it still doesn't log anything.

[RobertScheitlin__GISP]

It may have to do with where you are adding the on event listener. Currently you have it inside a result handler for a call to the esriRequest. You should really have the

vehicleLocationGraphicsLayer.on("graphic-add", function(){
  console.log(vehicleLocationGraphicsLayer.graphics);
});

right after you add the vehicleLocationGraphicsLayer to the map.

[RachelAlbritton]

Thanks Robert. I can get the console.log statement to work prior to the set interval and after the setInterval, but not within the setInterval which is where it would be most helpful so I can troubleshot. Is this not possible?

vehicle.on("stateChanged", function(newstate) {
      if (newstate === "on") {
            
          //Request vehicle locations
        esriVehicleRequest(15).then(function(vehicleResponse) {
               vehicleGraphicFunction(vehicleResponse);
               vehicleLocationGraphicsLayer.show();
          });
          
          console.log(vehicleLocationGraphicsLayer.graphics); //working for the moment
          
               vehicleInterval = setInterval(function(){
                    
                    esriVehicleRequest(15).then(function(vehicleResponse){
                    for (gl = 0; gl<vehicleLocationGraphicsLayer.graphics; gl++){
                         for (i=0; i < vehicleResponse.length; i++){
                         
                         vehicleLocationGraphicsLayer.graphics[gl].attributes = vehicleResponse[i].VehicleID;
                         //console.log(vehicleLocationGraphicsLayer.graphics[gl].attributes);
                         vehicleLocationGraphicsLayer.graphics[gl].geometry.x = vehicleResponse[i].Longitude;
                         //console.log(vehicleLocationGraphicsLayer.graphics[gl].geometry.x);
                         vehicleLocationGraphicsLayer.graphics[gl].geometry.y = vehicleResponse[i].Latitude;
                         //console.log(vehicleLocationGraphicsLayer.graphics[gl].geometry.y);
                         }
                    }     
               });
               
               vehicleLocationGraphicsLayer.redraw();
               //console.log("Test");
               
               }, 2000);     
               
          }

       else {
            
        //Stop setInterval
        clearVehicleInterval(vehicleInterval);
        //Clear graphics
        vehicleLocationGraphicsLayer.clear();
        //Hide graphics layer
        vehicleLocationGraphicsLayer.hide();
       }
      
      console.log ("Post: ", vehicleLocationGraphicsLayer.graphics);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP]

R.,

   So is there an error in the console saying that vehicleLocationGraphicsLayer is undefined or null or what?

There is an issue I see in your code as well with the way you are trying to set attributes and geometry:

vehicleLocationGraphicsLayer.graphics[gl].attributes = vehicleResponse[i].VehicleID;
//console.log(vehicleLocationGraphicsLayer.graphics[gl].attributes);
vehicleLocationGraphicsLayer.graphics[gl].geometry.x = vehicleResponse[i].Longitude;
//console.log(vehicleLocationGraphicsLayer.graphics[gl].geometry.x);
vehicleLocationGraphicsLayer.graphics[gl].geometry.y = vehicleResponse[i].Latitude;
//console.log(vehicleLocationGraphicsLayer.graphics[gl].geometry.y);

should be more like:

vehicleLocationGraphicsLayer.graphics[gl].attributes.VehicleID = vehicleResponse[i].VehicleID;
//console.log(vehicleLocationGraphicsLayer.graphics[gl].attributes);
vehicleLocationGraphicsLayer.graphics[gl].geometry.update(vehicleResponse[i].Latitude, vehicleResponse[i].Longitude);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RachelAlbritton]

Thanks for the tip Robert. There is nothing being logged after the for loop.And the log statements outside the for loop are still inconsistent. Sometimes I get info back and sometimes the array is empty even when graphics are present.