Graphic layer won't show

[NigelAlford]

I'm recreating the "multiple graphic layer" example but the graphic layer won't show. I'm using Bing for the basemap and our internal Server Services for the layers Any insight would be great.

Thanks

dojo.require("esri.map");       dojo.require("esri.virtualearth.VETiledLayer");       dojo.require("esri.layers.FeatureLayer");       dojo.require("esri.layers.graphics");       dojo.require("esri.tasks.query");        var map, graphics, BINGMAPS;        function init()        {         var initialExtent = new esri.geometry.Extent({ "xmin": -9414173.061, "ymin": 3995118.342, "xmax": -9398289.375, "ymax": 4014748.679, "spatialReference": { "wkid": 102100} });         map = new esri.Map("map", {extent: initialExtent,wrapAround180: true, logo:false});                  dojo.connect(map, "onLoad", doQueries);         veTileLayer = new esri.virtualearth.VETiledLayer({bingMapsKey: 'AimF6LphvVcbtQZOyiopeyQT8n-QOTukhwoRZwnzKL1MM0_B1Dfc7ppeKmyPByKp',      mapStyle: esri.virtualearth.VETiledLayer.MAP_STYLE_ROAD });         map.addLayer(veTileLayer);       }        function doQueries(map)        {         //Locomotive Query         var locQueryTask = new esri.tasks.QueryTask("http://esoc1.nscorp.com/ArcGISProduction/rest/services/ITGIS/LOCOMOTIVE_LOCATION/MapServer/0");         var locQuery = new esri.tasks.Query();         locQuery.outFields = ["Loc_INIT", "LOC_NUM", "DTM", "LOC_TYPE", "FUEL_LEVEL, ENGINE_ONOFF, ENGINE_TEMP"];         locQuery.returnGeometry = true;         locQueryTask.execute(locQuery, LocSymbology);          //Track Query         var TrackQueryTask = new esri.tasks.QueryTask("http://esoc1.nscorp.com/ArcGISProduction/rest/services/EGIS/ENG_TRACK/MapServer/1");         var TrackQuery = new esri.tasks.Query();         TrackQuery.outFields = ["DIVCODE", "CREATEDATE"];         TrackQuery.returnGeometry = true;         TrackQuery.outSpatialReference = map.spatialReference;         TrackQueryTask.execute(TrackQuery, TrackSymbology);                  //Milepost Query         var MPQueryTask = new esri.tasks.QueryTask("http://esoc1.nscorp.com/ArcGISProduction/rest/services/EGIS/ENG_MPMARK/MapServer/0");         var MPQuery = new esri.tasks.Query();         MPQuery.outFields = [ "MPMARKER", "DIVCODE", "CREATEDATE", "ASSET_PK" ];         MPQuery.returnGeometry = true;         MPQuery.outSpatialReference = map.spatialReference;         MPQueryTask.execute(MPQuery, MPSymbology);                  //Extra Section for another layer to be queried         /*var cityQueryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0/");         var cityQuery = new esri.tasks.Query();         cityQuery.outFields = ["*"];         cityQuery.returnGeometry = true;         cityQuery.outSpatialReference = map.spatialReference;         cityQueryTask.execute(cityQuery, addCityFeatureSetToMap);*/       }              function TrackSymbology(featureSet) {         var TrackSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,97,3]), 2);          //Create graphics layer for cities         var TrackLayer = new esri.layers.GraphicsLayer("http://esoc1.nscorp.com/ArcGISProduction/rest/services/EGIS/ENG_TRACK/MapServer/1");         TrackLayer.setInfoTemplate(new esri.InfoTemplate("Track Division: ","${DIVCODE}","${*}"));                  map.addLayer(TrackLayer);         //map.reorderLayer(TrackLayer,1);          //Add cities to the graphics layer         dojo.forEach(featureSet.features, function(feature) {TrackLayer.add(feature.setSymbol(TrackSymbol));         });       }              function LocSymbology(featureSet) {         var locsymbol =  new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, new dojo.Color([255,0,0]), 3);          //Create graphics layer for Locomotive         var locLayer = new esri.layers.GraphicsLayer("http://esoc1.nscorp.com/ArcGISProduction/rest/services/ITGIS/LOCOMOTIVE_LOCATION/MapServer/0");         locLayer.setInfoTemplate(new esri.InfoTemplate("${LOC_INIT}${LOC_NUM}","${*}"));         map.addLayer(locLayer);         //map.reorderLayer(TrackLayer,1);          //Add Locomotive to the graphics layer         dojo.forEach(featureSet.features, function(feature) {           locLayer.add(feature.setSymbol(locsymbol));         });       }       function MPSymbology(featureSet) {         var MPSymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, new dojo.Color([0,178,238]), 2);          //Create graphics layer for cities         var MPLayer = new esri.layers.GraphicsLayer("http://esoc1.nscorp.com/ArcGISProduction/rest/services/EGIS/ENG_MPMARK/MapServer/0");         MPLayer.setInfoTemplate(new esri.InfoTemplate("MP Number: ","${MPMARKER}","${*}"));                  map.addLayer(MPLayer);         //map.reorderLayer(MPLayer,1);          //Add cities to the graphics layer         dojo.forEach(featureSet.features, function(feature) {         MPLayer.add(feature.setSymbol(MPSymbol));         });       }        dojo.addOnLoad(init);     </script>    </head>   <body>     <div id="map" style="width:100%; height:100%;">      <a href="http://www.mapsd.nscorp.com"><img src="Images/itgispoweredby.png" alt="View Logo" /></a>      </div>   </body>

[TomJacoby]

I don't think that is a valid constructor for the GraphicsLayer, it needs to be new GraphicsLayer() or new GraphicsLayer({<options>}).

I looks to me like maybe you simply want to add an overlay to the map, then add graphics for the cities?  Like this:

var TrackLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://esoc1.nscorp.com/ArcGISProduction/rest/services/EGIS/ENG_TRACK/MapServer/1");

//...then
dojo.forEach(featureSet.features, function(feature) {overlaymap.add(feature.setSymbol(TrackSymbol));

[NigelAlford]

TJacoby2006:

Thanks, I was reaching for a random guess with that graphics layer constructor. I knew it was wrong but I'm trying anything at this point lol. I changed it back and changed the graphic layer construction as recommended to a Tiled Service and that didn't work.  Any more ideas. I like where your headed it seems that the  declaration of the layer as a graphic instead of a tiled or feature service is wrong but nothing seems to be working. I'm questioning if a feature service or mapservice will work for this graphic recreation. I've been stuggling with this for a little while and the ESRI documentation is vague....

Thanks

function TrackSymbology(featureSet) {
        var TrackSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,97,3]), 2);

        //Create graphics layer for cities
        var TrackLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://esoc1.nscorp.com/ArcGISProduction/rest/services/EGIS/ENG_TRACK/MapServer/1");
        TrackLayer.setInfoTemplate(new esri.InfoTemplate("Track Division: ","${DIVCODE}","${*}"));
        
        //map.addLayer(TrackLayer);
        //map.reorderLayer(TrackLayer,1);

        //Add cities to the graphics layer
        dojo.forEach(featureSet.features, function(feature) {overlaymap.add(feature.setSymbol(TrackSymbol));
        });
      }

[TomJacoby]

Try removing the '/1' off the URL so it is just "http://esoc1.nscorp.com/ArcGISProduction/rest/services/EGIS/ENG_TRACK/MapServer"

I am still new to this whole API, so I sometimes need to just take stabs at things as well.  So, I would try removing that, and if that doesn't work I would try ArcGISDynamicMapServiceLayer (requires dojo.require("esri.layers.agsdynamic")) and ArcGISImageServiceLayer.  I don't know what the service is, so it could be either of those I suppose.

[derekswingley1]

As Tom pointed out, the GraphicsLayer constructor doesn't take a URL. If you want to point a layer at a URL, use a FeatureLayer. Otherwise, you'll need to do a query (as you're doing) and then add the features to the layer in the queryTask's callback. I recommend using a feature layer.

[NigelAlford]

Derek:
I used a feature layer instead of the graphics layer but did not see the layers still. I corrected the graphics layer constructor I'm reposting the code below. Is my call back correctly used?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Multiple Graphics Layers</title>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8compact"></script>
     <style type="text/css">
      html, body
      {
        height: 100%;
        margin: 0px;
        padding: 0px;
        width: 100%;
      }
            
       .esriSimpleSlider
       div
      {
        height: 30px !important;
        width: 30px !important;
      } 
      </style>
      
    <script type="text/javascript" charset="utf-8">
    
      dojo.require("esri.map");
      dojo.require("esri.virtualearth.VETiledLayer");
      dojo.require("esri.layers.FeatureLayer");
      dojo.require("esri.layers.graphics");
      dojo.require("esri.tasks.query");

      var map, graphics, BINGMAPS;

      function init() 
      {
        var supportsOrientationChange = "onorientationchange" in window,
          orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

        window.addEventListener(orientationEvent, function () {
          orientationChanged();
        }, false);
        
        var initialExtent = new esri.geometry.Extent({ "xmin": -9414173.061, "ymin": 3995118.342, "xmax": -9398289.375, "ymax": 4014748.679, "spatialReference": { "wkid": 102100} });
        map = new esri.Map("map", {extent: initialExtent,wrapAround180: true, logo:false});
        
        dojo.connect(map, "onLoad", doQueries);
        veTileLayer = new esri.virtualearth.VETiledLayer({bingMapsKey: 'AimF6LphvVcbtQZOyiopeyQT8n-QOTukhwoRZwnzKL1MM0_B1Dfc7ppeKmyPByKp',
     mapStyle: esri.virtualearth.VETiledLayer.MAP_STYLE_ROAD });
  
     map.addLayer(veTileLayer);
      }

      function doQueries(map) 
      {
        //Locomotive Query
        var locQueryTask = new esri.tasks.QueryTask("http://esoc1.nscorp.com/ArcGISProduction/rest/services/ITGIS/LOCOMOTIVE_LOCATION/MapServer/0");
        var locQuery = new esri.tasks.Query();
        locQuery.outFields = ["Loc_INIT", "LOC_NUM", "DTM", "LOC_TYPE", "FUEL_LEVEL, ENGINE_ONOFF, ENGINE_TEMP"];
        locQuery.returnGeometry = true;
        locQueryTask.execute(locQuery, LocSymbology);

        //Track Query
        var TrackQueryTask = new esri.tasks.QueryTask("http://esoc1.nscorp.com/ArcGISProduction/rest/services/EGIS/ENG_TRACK/FeatureServer/1");
        var TrackQuery = new esri.tasks.Query();
        TrackQuery.outFields = ["DIVCODE", "CREATEDATE"];
        TrackQuery.returnGeometry = true;
        TrackQuery.outSpatialReference = map.spatialReference;
        TrackQueryTask.execute(TrackQuery, TrackSymbology);
        
        //Milepost Query
        var MPQueryTask = new esri.tasks.QueryTask("http://esoc1.nscorp.com/ArcGISProduction/rest/services/EGIS/ENG_MPMARK/FeatureServer/0");
        var MPQuery = new esri.tasks.Query();
        MPQuery.outFields = [ "MPMARKER", "DIVCODE", "CREATEDATE", "ASSET_PK" ];
        MPQuery.returnGeometry = true;
        MPQuery.outSpatialReference = map.spatialReference;
        MPQueryTask.execute(MPQuery, MPSymbology);
        
        //Extra Section for another layer to be queried
        /*var cityQueryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0/");
        var cityQuery = new esri.tasks.Query();
        cityQuery.outFields = ["*"];
        cityQuery.returnGeometry = true;
        cityQuery.outSpatialReference = map.spatialReference;
        cityQueryTask.execute(cityQuery, addCityFeatureSetToMap);*/
      }
      
      function TrackSymbology(featureSet) 
      {
        var TrackSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,97,3]), 2);

        //Create graphics layer for cities
        var TrackLayer = new esri.GraphicsLayer();
        TrackLayer.setInfoTemplate(new esri.InfoTemplate("Track Division: ","${DIVCODE}","${*}"));
 
        //Add cities to the graphics layer
        dojo.forEach(featureSet.features, function(feature) {TrackLayer.add(feature.setSymbol(TrackSymbol));
        
        map.addLayer(TrackLayer);
        });
      }
      
      function LocSymbology(featureSet) 
      {
        var locsymbol =  new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, new dojo.Color([255,0,0]), 3);

        //Create graphics layer for Locomotive
        var locLayer = new esri.layers.GraphicsLayer();
        locLayer.setInfoTemplate(new esri.InfoTemplate("${LOC_INIT}${LOC_NUM}","${*}"));
        
        //map.reorderLayer(TrackLayer,1);

        //Add Locomotive to the graphics layer
        dojo.forEach(featureSet.features, function(feature) {locLayer.add(feature.setSymbol(locsymbol));
         
        map.addLayer(loclayer);
        });
      }
      function MPSymbology(featureSet) 
      {
        var MPSymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, new dojo.Color([0,178,238]), 2);

        //Create graphics layer for cities
        var MPLayer = new esri.layers.GraphicsLayer();
        MPLayer.setInfoTemplate(new esri.InfoTemplate("MP Number: ","${MPMARKER}","${*}"));
        
        map.addLayer(MPLayer);
        //map.reorderLayer(MPLayer,1);

        //Add cities to the graphics layer
        dojo.forEach(featureSet.features, function(feature) {MPLayer.add(feature.setSymbol(MPSymbol));
        });
        
      }
      
      

      dojo.addOnLoad(init);
    </script>

  </head>
  <body>
    <div id="map" style="width:100%; height:100%;"></div>
  </body>
</html>

[derekswingley1]

Feature layers automatically pull features from the server so you wouldn't need to do the query�?? you create the feature layer and pass the URL to your map service layer to the feature layer in the feature layer's constructor.

Can you verify that your callback (let's use LocSymbology as an example) receives features? What does this show in your LocSymbology function:

console.log("loc feature: ", featureSet);

Also, add the graphics layer to the map before you add your features. I'm not sure if this actually matters but it is the pattern we always use.

[NigelAlford]

The only reason i'm calling this as a query instead of a feature service is because i want to change the symbology and I want to perform individual queries on these layers because we haven't combined them into a single service. Not to mention I would like the query results to show unique qualifiers for each layer to hopefully reduce the blank spaces.
If there is a better way to achieve the custom symbology and multiple query goal I am open to suggestions.

Just confirm that I'm doing this correctly I'm going to post both ways I'm placing the console log in. when Looking at my console log in chrome I don't see anything.

var locQueryTask = new esri.tasks.QueryTask("http://esoc1.nscorp.com/ArcGISProduction/rest/services/ITGIS/LOCOMOTIVE_LOCATION/MapServer/0");
        var locQuery = new esri.tasks.Query();
        locQuery.outFields = ["Loc_INIT", "LOC_NUM", "DTM", "LOC_TYPE", "FUEL_LEVEL, ENGINE_ONOFF, ENGINE_TEMP"];
        locQuery.returnGeometry = true;
        locQueryTask.execute(locQuery, LocSymbology, console.log("loc feature: ", featureSet));

OR

 var locQueryTask = new esri.tasks.QueryTask("http://esoc1.nscorp.com/ArcGISProduction/rest/services/ITGIS/LOCOMOTIVE_LOCATION/MapServer/0");
        var locQuery = new esri.tasks.Query();
        locQuery.outFields = ["Loc_INIT", "LOC_NUM", "DTM", "LOC_TYPE", "FUEL_LEVEL, ENGINE_ONOFF, ENGINE_TEMP"];
        locQuery.returnGeometry = true;
        locQueryTask.execute(locQuery, LocSymbology);
        console.log("loc feature: ", featureSet); 

[derekswingley1]

The only reason i'm calling this as a query instead of a feature service is because i want to change the symbology and I want to perform individual queries on these layers because we haven't combined them into a single service. Not to mention I would like the query results to show unique qualifiers for each layer to hopefully reduce the blank spaces.
If there is a better way to achieve the custom symbology and multiple query goal I am open to suggestions.

That's valid. You could also use feature layer's and set the feature layer's renderer to use custom symbology.

var locQueryTask = new esri.tasks.QueryTask("http://esoc1.nscorp.com/ArcGISProduction/rest/services/ITGIS/LOCOMOTIVE_LOCATION/MapServer/0");
        var locQuery = new esri.tasks.Query();
        locQuery.outFields = ["Loc_INIT", "LOC_NUM", "DTM", "LOC_TYPE", "FUEL_LEVEL, ENGINE_ONOFF, ENGINE_TEMP"];
        locQuery.returnGeometry = true;
        locQueryTask.execute(locQuery, LocSymbology, console.log("loc feature: ", featureSet));

OR

 var locQueryTask = new esri.tasks.QueryTask("http://esoc1.nscorp.com/ArcGISProduction/rest/services/ITGIS/LOCOMOTIVE_LOCATION/MapServer/0");
        var locQuery = new esri.tasks.Query();
        locQuery.outFields = ["Loc_INIT", "LOC_NUM", "DTM", "LOC_TYPE", "FUEL_LEVEL, ENGINE_ONOFF, ENGINE_TEMP"];
        locQuery.returnGeometry = true;
        locQueryTask.execute(locQuery, LocSymbology);
        console.log("loc feature: ", featureSet); 

The console.log statement needs to be in your LocSymbology function. Like this:

function LocSymbology(featureSet) 
{
  console.log("feature set in LocSymbology: ", featureSet);
  ...do other stuff...
}

Let us know what you see in your browser's console after you try this.

[NigelAlford]

ok so a couple of things:

1. I attempted to set up the feature layer renderer and I'm sure that its set up wrong but I'm a little scattered with this side to see the tree in the forest here's my snippet trial for creating the renderer. I created it in a function and passed into the query call back but it was a fail. My immediate guess is that this method should skip the callback and display with an "addLayer" call.

 function TrackRenderer(featureset)
      {
       
       var Track = new esri.layers.FeatureLayer("http://esoc1.nscorp.com/ArcGISProduction/rest/services/EGIS/ENG_TRACK/MapServer/1", {
                    mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
                    outFields: ["DIVCODE", "CREATEDATE"],
                    infoTemplate: infoTemplate
                });
       
       var TLSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,97,3]), 2);
       var TRenderer = new esri.renderer.SimpleRenerer(TLSymbol);
       featureLayer.setRenderer(TRenderer);
      }

2. I added the console message and got this in my browser:

Resource interpreted as Script but transferred with MIME type text/plain: "http://esoc1.nscorp.com/ArcGISProduction/rest/services/ITGIS/LOCOMOTIVE_LOCATION/MapServer/0/query?f=json&where=&returnGeometry=true&spatialRel=esriSpatialRelIntersects&outFields=Loc_INIT%2CLOC_NUM%2CDTM%2CLOC_TYPE%2CFUEL_LEVEL%2C%20ENGINE_ONOFF%2C%20ENGINE_TEMP&callback=dojo.io.script.jsonp_dojoIoScript2._jsonpCallback". serverapi.arcgisonline.com:48
dojo.io.script.attach serverapi.arcgisonline.com:48
dojo.io.script.get serverapi.arcgisonline.com:48
esri._request serverapi.arcgisonline.com:48
esri.request serverapi.arcgisonline.com:48
_4.declare.execute query.xd.js:19
esri._createWrappers.dojo.forEach._2fa.(anonymous function) serverapi.arcgisonline.com:48
doQueries MultiQuery.html:64
dojo._listener.getDispatcher serverapi.arcgisonline.com:14
dojo.declare._addLayerHandler serverapi.arcgisonline.com:48
dojo.hitch serverapi.arcgisonline.com:14
dojo.declare._addLayer._4f2 serverapi.arcgisonline.com:48
dojo.declare._addLayer serverapi.arcgisonline.com:48
dojo.declare._addLayerHandler serverapi.arcgisonline.com:48
dojo.hitch serverapi.arcgisonline.com:14
dojo._listener.getDispatcher serverapi.arcgisonline.com:14
_4.declare._initLayer VETiledLayer.xd.js:19
dojo.hitch serverapi.arcgisonline.com:14
esri.request.dfd.addErrback._2ad serverapi.arcgisonline.com:48
_144 serverapi.arcgisonline.com:14
_142 serverapi.arcgisonline.com:14
dojo.Deferred.resolve.callback serverapi.arcgisonline.com:14
(anonymous function) serverapi.arcgisonline.com:48
_144 serverapi.arcgisonline.com:14
_142 serverapi.arcgisonline.com:14
dojo.Deferred.resolve.callback serverapi.arcgisonline.com:14
_144 serverapi.arcgisonline.com:14
_142 serverapi.arcgisonline.com:14
dojo.Deferred.resolve.callback serverapi.arcgisonline.com:14
_144 serverapi.arcgisonline.com:14
_142 serverapi.arcgisonline.com:14
dojo.Deferred.resolve.callback serverapi.arcgisonline.com:14
_144 serverapi.arcgisonline.com:14
_142 serverapi.arcgisonline.com:14
dojo.Deferred.resolve.callback serverapi.arcgisonline.com:14
dojo.io.script._resHandle serverapi.arcgisonline.com:48
func serverapi.arcgisonline.com:14
_2c8 serverapi.arcgisonline.com:14