AnsweredAssumed Answered

I can't see my graphics layer

Question asked by rralbritton on Nov 28, 2016
Latest reply on Nov 29, 2016 by rralbritton

I am using esriRequest to pull XY data from an outside server. I'm wanting to place this data on a graphics layer that can be toggled on/off. Using dev tools in both Chrome and Firefox I can see that I'm successfully making the right calls to grab the data I need, and the graphics appear to be getting the attributes and symbol assigned to them but I can not see the graphics layer on the map. I say "appear" because I can see the object attributes in the console, however, if I look at the layer in the html, the graphic layer is still empty. I do have the graphic set to match the spatial reference of the map. What am I overlooking?

 

Thanks.

require([
"esri/map",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/GraphicsLayer",
"esri/request",
"esri/symbols/SimpleMarkerSymbol",
"esri/graphic",
"esri/SpatialReference",
"esri/geometry/Point",
"esri/Color",
"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,
dom, on, domClass, dojoJson, Switch, parser, ready){

/*
// Wait until DOM is ready *and* all outstanding require() calls have been resolved
ready(function () {
// Parse DOM nodes decorated with the data-dojo-type attribute
parser.parse(); */

// 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"){
console.log("on")
//when switch is turned on - make esriRequest to url & return a response
var vehicleLocations = new esriRequest ({
url: "http://www.uofubus.com/Services/JSONPRelay.svc/GetMapVehiclePoints",
content: {
"apikey": "ride1791",
},
handleAs: 'json',
callbackParamName: "method"
});
vehicleLocations.then(vehicleRequestSucceeded, requestFailed);

var stopsRequest = new esriRequest ({
url: "http://uofubus.com/Services/JSONPRelay.svc/GetStops",
content: {
"apikey": "ride1791",
},
handleAs: "json",
callbackParamName: "method"
});
stopsRequest.then(stopsRequestSucceeded, requestFailed);
}

else
{
vehicleLocationGraphicsLayer.hide();
console.log("hide")

}
});
function vehicleRequestSucceeded(data) {
for (i=0; i < data.length; i++) {
console.log("Vehicle Points: ", data[i].Latitude , data[i].Longitude);
//vehicleLocationGraphicsLayer.show();
}
}

function stopsRequestSucceeded (data){

//Get Stops
for(i=0; i < data.length; i++){
if (data[i].RouteID =="15"){
//console.log(data[i].RouteID);
//console.log(data[i].Latitude, data[i].Longitude);

//Assign Symbology
var stopsSMS = new SimpleMarkerSymbol().setSize(30).setColor(new Color([255,0,0]));

//Create Graphic
var stops = new Graphic (new Point (data[i].Latitude, data[i].Longitude, map.SpatialReference), stopsSMS, data[i].Description);
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 graohics layer, show GL
stopsGraphicsLayer.show();
console.log("graphics layer added: ");
console.log(stopsGraphicsLayer);
}

function requestFailed(error) {
console.log("Error: ", error.message);
}

});

Outcomes