[GIS] “TypeError: Unable to draw graphic (geometry:null, symbol:null)” after adding tiled and feature layers

arcgis-javascript-apifeature-layer

I'm seeing the following error when attempting to add a tiled and feature layer to the same map when using the ArcGIS Server JS API 3.1:

TypeError: Unable to draw graphic (geometry:null, symbol:null): _c is
undefined
http://serverapi.arcgisonline.com/jsapi/arcgis/3.1compact/js/dojo/dojo/DeferredList.js
Line 8

After defining the map and adding a basemap, I'm iterating through a list of JSON layer definitions, building each layer based on its definition, then adding it to the map. The pseudo code is:

dojo.connect(map, "onLoad", function {
   for layerDef in layerDefs:
      if layerDef.type == tiled:
         layer = buildTiledLayer
      if layerDef.type == feature:
         layer = buildFeatureLayer
      map.addLayer(layer)
}

If I add just the tiled layer, or just the feature layer, there are no problems – it's only when I add both together that I see the error message. Once the error message has shown, an infoWindow is not shown when clicking on the feature layer.

This forum post lead me to suspect the problem may be due to the timing of adding the layers – during debugging I found that if I remove the map.addLayer line, and instead push the layers into an array, I can manually enter map.addLayers(layerArray) in Firebug, once the map has finished loading. In this case, both layers add correctly.

Adding a FeatureLayer ARCGIS JavaScript API isn't relevant as I know the feature layer definition is correct – the feature layer adds without error if it's added without the tiled layer.

Similarly, I believe that the layers are correctly defined since each is loaded correctly without the other.

Does anyone have any advice as to why this error might be occurring, and how to resolve the error?

Thanks

Best Answer

You're right that the layer isn't fully loaded. There's an event that tells you when layers are loaded :

onLayerAddResult(layer, error)

As of v2.0 it triggers after specified layer has been added to the map.

onLayersAddResult(results)

Which triggers after all layers are added to the map using the map.addLayers method.

http://developers.arcgis.com/en/javascript/jsapi/map.html

Maybe better to use that rather than setting a timeout in your application since it's impossible to know exactly how long it will take to load.

Related Solutions

[GIS] How to Zoom to a FeatureLayer Using ArcGIS Javascript API

Thanks so much Derek!! Here is the relevant code, it is quite a mess as I am still learning this whole Javascript thing. Please forgive me :)I did not attach the whole thing because it is over 2000 lines, but hopefully I got all the right pieces. The main issue I am trying to solve now is zooming to a single feature from a row click in a datagrid that is generated after features are manually selected. Hope this makes sense.I really appreciate your help with this!

<script type="text/javascript"> 
  var djConfig = { 
    parseOnLoad: true 
  }; 
 </script> 
 <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.7"></script> 

<script type="text/javascript"> 


     var idTask, idParams;
   var grid, store, toolBar;





  var exportMapGP, surveyLink, searchType, findTask, identifyTask, identifyParams, findParams, map, visible = [], HideShowTimer, featureLayer, navToolbar, measurement, features; 
   searchType = "";
  function init() { 

   dojo.connect(map, 'onLoad', function(theMap) {
     //initialize the toolbar
      toolBar = new esri.toolbars.Draw(map);
      dojo.connect(toolBar, "onDrawEnd",onDrawEnd);          
      toolBar.deactivate();

  //resize the map when the browser resizes
  dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
   navToolbar.deactivate();
 featureLayerUrl = "http://slcarcgisdev1/SLCOGIS/rest/services/public/SurveyorFS/MapServer/2";

  featureLayer = new esri.layers.FeatureLayer(featureLayerUrl,{
      mode:esri.layers.FeatureLayer.MODE_ONDEMAND,
      outFields:["*"]
    });

 function onDrawEnd(extent){
  navToolbar.deactivate();
  //id = "control";
  //select features within the draw extent
  var query = new esri.tasks.Query();
  query.geometry = extent;
  featureLayer.selectFeatures(query,esri.layers.FeatureLayer.SELECTION_NEW,function(features,selectionMethod){
var items = dojo.map(features,function(feature){
     return feature.attributes;
});


    //add selected features to the grid
    if (document.getElementById("contSel").checked){
        showPointNameGrid();


    } else if(document.getElementById("survSel").checked){
        showSurveysNameGrid();

    }
    var items = dojo.map(features,function(feature){
      return feature.attributes;
    });
  if(document.getElementById("contSel").checked){
    //showPointNameGrid();
      searchType="selControl2";
    var data = {identifier:"POINT_NAME", items:items};
    var store = new dojo.data.ItemFileReadStore({data:data});
    var grid = dijit.byId('grid4'); 
    grid.setStore(store);
   featureLayer.selectFeatures.clear;


  } else if (document.getElementById("survSel").checked){
     //showSurveysNameGrid();
      searchType="selSurveys2";
    var data = {identifier:"doc_id", items:items};
    var store = new dojo.data.ItemFileReadStore({data:data});
    var grid = dijit.byId('grid5'); 
    grid.setStore(store);
    featureLayer.selectFeatures.clear;

  }     
  });

  }


function toggleSelect (el) 
 {

navToolbar.deactivate();
alert(el.checked);
if (el.checked)
{
    switch (el.id)

    {
    case 'survSel': 

        searchType="selSurveys2";
        document.getElementById('contSel').checked = false;
        featureLayerUrl = "http://slcarcgisdev1/SLCOGIS/rest/services/public/SurveyorFS/MapServer/2";
        featureLayer = new esri.layers.FeatureLayer(featureLayerUrl,{
        mode:esri.layers.FeatureLayer.MODE_ONDEMAND,
        outFields:["*"]
        });

        featureLayer.setSelectionSymbol(new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([200,255,0,0.5]))); 
        map.addLayer(featureLayer);
        featureLayer.selectFeatures.clear;
        break;          

    case 'contSel': 
        searchType="selControl2";
        document.getElementById('survSel').checked = false;
        featureLayerUrl = "http://slcarcgisdev1/SLCOGIS/rest/services/public/SurveyorFS/FeatureServer/0";
        featureLayer = new esri.layers.FeatureLayer(featureLayerUrl,{
        mode:esri.layers.FeatureLayer.MODE_ONDEMAND,
        outFields:["*"]
        });
        featureLayer.setSelectionSymbol(new esri.symbol.SimpleMarkerSymbol().setSize(11).setColor(new dojo.Color([160,214,238])));
        map.addLayer(featureLayer);
        featureLayer.selectFeatures.clear;
        break;
    }
 } else
  {

    switch (el.id)
    {
    case 'survSel': 
        document.getElementById('contSel').checked = true;
        break;

    case 'contSel': 
        document.getElementById('survSel').checked = true;
        break;
    }
  }
 }

     var items = dojo.map(features,function(feature){
     return feature.attributes;
});


    //add selected features to the grid
    if (document.getElementById("contSel").checked){
        showPointNameGrid();


    } else if(document.getElementById("survSel").checked){
        showSurveysNameGrid();

    }
    var items = dojo.map(features,function(feature){
      return feature.attributes;
    });
  if(document.getElementById("contSel").checked){
    //showPointNameGrid();
      searchType="selControl2";
    var data = {identifier:"POINT_NAME", items:items};
    var store = new dojo.data.ItemFileReadStore({data:data});
    var grid = dijit.byId('grid4'); 
    grid.setStore(store);
   featureLayer.selectFeatures.clear;


  } else if (document.getElementById("survSel").checked){
     //showSurveysNameGrid();
      searchType="selSurveys2";
    var data = {identifier:"doc_id", items:items};
    var store = new dojo.data.ItemFileReadStore({data:data});
    var grid = dijit.byId('grid5'); 
    grid.setStore(store);
    featureLayer.selectFeatures.clear;

  }     
  });

  }

  //Zoom to the parcel when the user clicks a row 
  function onRowClickHandler(evt){ 
  if (searchType == "selControl2") { 
        var clickedTaxLotId = grid4.getItem(evt.rowIndex).POINT_NAME; 
        var selectedTaxLot; 
    alert(featureLayer.name);
         var highlightSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([25,50,225,0.3])); 
        dojo.forEach(map.graphics.graphics,function(graphic){ 
          if((feature.attributes) && feature.attributes.POINT_NAME === clickedTaxLotId){ 
            selectedTaxLot = graphic;
            graphic.setSymbol(highlightSymbol);
            //added this part to build infotemplate
             map.infoWindow.setTitle(graphic.getTitle()); 
             map.infoWindow.setContent(graphic.getContent());


            return; 
          } 
    }); 

        if ( selectedTaxLot.geometry.declaredClass == 'esri.geometry.Point' ) {
        map.centerAndZoom(taxLotExtent, 11)
        var sp = map.toScreen(selectedTaxLot.geometry);

        } else {

        var taxLotExtent = selectedTaxLot.geometry.getExtent(); 
        var screenpoint = map.toScreen(selectedTaxLot.geometry.getExtent().getCenter());
        var mappoint = map.toMap(screenpoint);
        map.setExtent(taxLotExtent,true);
        map.infoWindow.show(taxLotExtent.getCenter(), map.getInfoWindowAnchor(screenpoint));
        }




} else if (searchType == "selSurveys2") { 
        var clickedTaxLotId = grid5.getItem(evt.rowIndex).DOCUMENT_N; 
        var selectedTaxLot; 
    alert(featureLayer.name);
         var highlightSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([25,50,225,0.3])); 
        dojo.forEach(map.graphics.graphics,function(graphic){ 
          if((graphic.attributes) && graphic.attributes.DOCUMENT_N === clickedTaxLotId){ 

            selectedTaxLot = graphic;
            graphic.setSymbol(highlightSymbol);
            //added this part to build infotemplate
             map.infoWindow.setTitle(graphic.getTitle()); 
             map.infoWindow.setContent(graphic.getContent());

            return; 
          } 
    }); 

        if ( selectedTaxLot.geometry.declaredClass == 'esri.geometry.Point' ) {
        map.centerAndZoom(taxLotExtent, 11)
        var sp = map.toScreen(selectedTaxLot.geometry);

        } else {

        var taxLotExtent = selectedTaxLot.geometry.getExtent(); 
        var screenpoint = map.toScreen(selectedTaxLot.geometry.getExtent().getCenter());
        var mappoint = map.toMap(screenpoint);
        map.setExtent(taxLotExtent,true);
        map.infoWindow.show(taxLotExtent.getCenter(),    map.getInfoWindowAnchor(screenpoint));
        }


}

}  
</script>

[GIS] Adding a FeatureLayer ARCGIS JavaScript API

The URL passed to esri.layers.FeatureLayer needs to be for a specific layer. Your code points to the root of the feature service.

To fix this, append the layer index of the layer the URL. For instance, in this feature service, the rivers layer is layer 1. To create a feature layer using this layer, you would use this url: http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer/1. This is shown in the ONDEMAND feature layer sample although the sample uses the map service. If you're only displaying data, you can use either the map service for the feature service. If you want to edit the data via the ArcGIS API for JavaScript, you have to use the feature service URL.

Best Answer

Related Solutions

[GIS] How to Zoom to a FeatureLayer Using ArcGIS Javascript API

[GIS] Adding a FeatureLayer ARCGIS JavaScript API

Related Question