Graphic Layer array empty but showing geometry

Question

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); } } }); ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RachelAlbritton · Answer

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.

rscheitlin · Answer

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 · Answer

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