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);
}
}
});
Your code should be:
vehicleLocationGraphicsLayer.on("graphic-add", function(){
console.log(vehicleLocationGraphicsLayer.graphics);
});
Thanks for the suggestion Robert, but it still doesn't log anything.
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.
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);
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);
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.