I can't see my graphics layer

[RachelAlbritton]

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.RouteID);
 //console.log(data.Latitude, data.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);
 }
 
 });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[SteveCole]

Since you're using an ESRI basemap, the spatial reference for the map is Web Mercator. A lat/long coordinate in Web Mercator will end up in a vastly different location. Try specifying the right SpatialReference like this:

var theLatLongPoint = new Point(theInputCoords[1], theInputCoords[0], new SpatialReference({ wkid: 4326 }));‍

Steve

[RachelAlbritton]

Thanks Steve.

I tried changing that in line 113

to

var stops = new Graphic (new Point (data[i].Latitude, data[i].Longitude, new SpatialReference(102100)), stopsSMS, data[i].Description);‍

which is the same spatial reference as my var basemap (line 42), but I still can't see the graphics.

[SteveCole]

Try 4326. It looked like you were passing lat/long coordinate values so you need the lat/long WKID which is 4326.

[RachelAlbritton]

Still nothing.

var stops = new Graphic (new Point (data.Latitude, data.Longitude, new SpatialReference({wkid: 4326})), stopsSMS, data.Description);

[RobertScheitlin__GISP · Accepted solution]

Rachel,

   The proper order for the point constructor using Long and Lat is Point | API Reference | ArcGIS API for JavaScript 3.18 | constructor 

You seem to be doing them in reverse. Also I wonder about your graphics attributes is your data.Description a javascript object or just a sting? The attributes property is expecting a js object.

Something like this:

function stopsRequestSucceeded (data){
  //Assign Symbology
//No need to create the symbol inside the loop repeatedly
  var stopsSMS, atts, stop;
  stopsSMS = new SimpleMarkerSymbol().setSize(30).setColor(new Color([255,0,0]))
  //Get Stops
  for(i=0; i < data.length; i++){
    if (data.RouteID =="15"){
      //console.log(data.RouteID);
      //console.log(data.Latitude, data.Longitude);
 
      //Create Graphic
      atts = {desc: ‍data.Description};‍
//The long comes before the lat.
      stop = new Graphic (new Point(data.Longitude, data.Latitude, new SpatialReference({wkid: 4326})), stopsSMS, atts);
      console.log(stop);
 
      //Add graphics to graphics layer
//Not sure what you are trying to do on the next line
      map.getLayer(stopsGraphicsLayer);
//are you trying to add it to the stopsGrphicLayer or the maps graphics?
      stopsGraphicsLayer.add(stop);
      map.graphics.add(stop);
    }
  }
  //Once all the graphics are added to the graohics layer, show GL
  stopsGraphicsLayer.show();
  console.log("graphics layer added: ");
  console.log(stopsGraphicsLayer);
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RachelAlbritton]

Such a silly oversight - thank you so much Robert!