Feature Layer -- No Basemap

GregKnight · ‎04-19-2013

Hi all,

I am trying to implement a feature layer with no basemap. I am creating the feature layer from a feature collection -- created from some geoJSON. I am close to a solution... but my layer is only displaying one feature from the feature collection. Im going to attach the code here, since jsFiddle doesnt support ajax calls.

Any idea what might be going on here?

Thank you,
Greg

KellyHutchins · ‎04-19-2013

The issue may be that your feature collection needs an object id. I made a quick update to your code to test this and if I add an objectid then it displays all the features.

<!DOCTYPE html> <html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">     <title>AB Feature Layer - No Basemap</title>     <link rel="stylesheet" href="http://servicesbeta.esri.com/jsapi/arcgis/3.5/js/esri/css/esri.css">     <style>       html, body, #map {         height: 100%;         width: 100%;         margin: 0;         padding: 0;       }     </style>     <script src="http://servicesbeta.esri.com/jsapi/arcgis/3.5/"></script>     <script>        var map;    var  rmFeatures, grosFeatures;           require([         "dojo/dom-construct",          "esri/map",          "esri/graphic",   "esri/layers/FeatureLayer",         "esri/tasks/FeatureSet",         "dojo/domReady!"],         function(domConstruct) {     loadJson();     //initMap();         }       );        function loadJson(){     var jsonRequest = new esri.request({      url : "feature_collection_rm.json",    handleAs : "json"      //load : jsonLoaded,      //error : jsonLoadError     });     jsonRequest.then( jsonLoaded, jsonLoadError );    }        function jsonLoaded(response, io){     console.log('Loaded JSON features...');     console.log(response);     jsonFeatures = response.featureSet.features;     parseJson(jsonFeatures);       }        function jsonLoadError( error, io ){   console.log('Error loading JSON features...');    }        function parseJson(jsonFeatures){     console.log('Parsing JSON features...');     console.log(jsonFeatures);     this.grosFeatures = [];    this.rmFeatures = [];      for ( i=0; i<jsonFeatures.length; i++ ) {       var jsonFeature = jsonFeatures;       console.log(jsonFeature.properties.objectid);     var polyRings = {          'rings': jsonFeature.geometry.coordinates,           'spatialReference':{'wkid':4326}};     var polyJson = {      'geometry': polyRings,      'symbol':{       'color':[0,0,0,64],       'outline':{'color':[0,0,0,255],'width':1,'type':'esriSLS','style':'esriSLSSolid'},       'type':'esriSFS','style':'esriSFSSolid'      },      'attributes':{       'objectid': i,       'id': jsonFeature.id,         'asset_type': jsonFeature.properties.AssetType         }     };     var graphic = new esri.Graphic( polyJson );           if ( jsonFeature.properties.AssetType === 'gros' ) {     console.log('Asset type is gros...');     this.grosFeatures.push( graphic );     }    else if ( jsonFeature.properties.AssetType === 'rm' ) {     console.log('Asset type is rm...');     this.rmFeatures.push( graphic );    }      }   initMap();    }        function initMap() {     console.log(this.rmFeatures);     console.log('Initializing map...');        // create the layer definition for the feature layer   var layerDefinition = {    'geometryType': 'esriGeometryPolygon',    'fields': [    {     'name': 'id',     'type': 'esriFieldTypeString',     'alias': 'ID'    },    {     'name': 'asset_type',     'type': 'esriFieldTypeString',     'alias': 'Asset Type'    },{     'name': 'objectid',     'type' : 'esriFieldTypeOID',     'alias': 'objectid'    }]   }    // create the feature collection for the feature layer    var featureCollection = {    'layerDefinition': layerDefinition,    'featureSet': {     'features': this.rmFeatures,     'geometryType': 'esriGeometryPolygon'    }   };    var infoTemplate = new esri.InfoTemplate("Area Asset", "${id}");   // create the feature layer   var featureLayer = new esri.layers.FeatureLayer( featureCollection, {    'id': 'ab-gros-rm',    'infoTemplate': infoTemplate,    'mode': esri.layers.FeatureLayer.MODE_SNAPSHOT   });      // create the map   var bounds = new esri.geometry.Extent({     'xmin': 0,     'ymin': 0,     'xmax': 10000,     'ymax': 10000   });   map = new esri.Map('map',{    'extent': bounds   });      // add the feature layer to the map   map.addLayer( featureLayer );         //var fl = map.getLayer('ab-gros-fl');   //var jsonObj = featureLayer.toJson();   //console.log( JSON.stringify( jsonObj ));      //map.graphics.add( graphic );  }                  </script>   </head>   <body>     <div id="map"></div>   </body> </html>

View solution in original post

KellyHutchins · ‎04-19-2013

The issue may be that your feature collection needs an object id. I made a quick update to your code to test this and if I add an objectid then it displays all the features.

<!DOCTYPE html> <html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">     <title>AB Feature Layer - No Basemap</title>     <link rel="stylesheet" href="http://servicesbeta.esri.com/jsapi/arcgis/3.5/js/esri/css/esri.css">     <style>       html, body, #map {         height: 100%;         width: 100%;         margin: 0;         padding: 0;       }     </style>     <script src="http://servicesbeta.esri.com/jsapi/arcgis/3.5/"></script>     <script>        var map;    var  rmFeatures, grosFeatures;           require([         "dojo/dom-construct",          "esri/map",          "esri/graphic",   "esri/layers/FeatureLayer",         "esri/tasks/FeatureSet",         "dojo/domReady!"],         function(domConstruct) {     loadJson();     //initMap();         }       );        function loadJson(){     var jsonRequest = new esri.request({      url : "feature_collection_rm.json",    handleAs : "json"      //load : jsonLoaded,      //error : jsonLoadError     });     jsonRequest.then( jsonLoaded, jsonLoadError );    }        function jsonLoaded(response, io){     console.log('Loaded JSON features...');     console.log(response);     jsonFeatures = response.featureSet.features;     parseJson(jsonFeatures);       }        function jsonLoadError( error, io ){   console.log('Error loading JSON features...');    }        function parseJson(jsonFeatures){     console.log('Parsing JSON features...');     console.log(jsonFeatures);     this.grosFeatures = [];    this.rmFeatures = [];      for ( i=0; i<jsonFeatures.length; i++ ) {       var jsonFeature = jsonFeatures;       console.log(jsonFeature.properties.objectid);     var polyRings = {          'rings': jsonFeature.geometry.coordinates,           'spatialReference':{'wkid':4326}};     var polyJson = {      'geometry': polyRings,      'symbol':{       'color':[0,0,0,64],       'outline':{'color':[0,0,0,255],'width':1,'type':'esriSLS','style':'esriSLSSolid'},       'type':'esriSFS','style':'esriSFSSolid'      },      'attributes':{       'objectid': i,       'id': jsonFeature.id,         'asset_type': jsonFeature.properties.AssetType         }     };     var graphic = new esri.Graphic( polyJson );           if ( jsonFeature.properties.AssetType === 'gros' ) {     console.log('Asset type is gros...');     this.grosFeatures.push( graphic );     }    else if ( jsonFeature.properties.AssetType === 'rm' ) {     console.log('Asset type is rm...');     this.rmFeatures.push( graphic );    }      }   initMap();    }        function initMap() {     console.log(this.rmFeatures);     console.log('Initializing map...');        // create the layer definition for the feature layer   var layerDefinition = {    'geometryType': 'esriGeometryPolygon',    'fields': [    {     'name': 'id',     'type': 'esriFieldTypeString',     'alias': 'ID'    },    {     'name': 'asset_type',     'type': 'esriFieldTypeString',     'alias': 'Asset Type'    },{     'name': 'objectid',     'type' : 'esriFieldTypeOID',     'alias': 'objectid'    }]   }    // create the feature collection for the feature layer    var featureCollection = {    'layerDefinition': layerDefinition,    'featureSet': {     'features': this.rmFeatures,     'geometryType': 'esriGeometryPolygon'    }   };    var infoTemplate = new esri.InfoTemplate("Area Asset", "${id}");   // create the feature layer   var featureLayer = new esri.layers.FeatureLayer( featureCollection, {    'id': 'ab-gros-rm',    'infoTemplate': infoTemplate,    'mode': esri.layers.FeatureLayer.MODE_SNAPSHOT   });      // create the map   var bounds = new esri.geometry.Extent({     'xmin': 0,     'ymin': 0,     'xmax': 10000,     'ymax': 10000   });   map = new esri.Map('map',{    'extent': bounds   });      // add the feature layer to the map   map.addLayer( featureLayer );         //var fl = map.getLayer('ab-gros-fl');   //var jsonObj = featureLayer.toJson();   //console.log( JSON.stringify( jsonObj ));      //map.graphics.add( graphic );  }                  </script>   </head>   <body>     <div id="map"></div>   </body> </html>

Anonymous User · ‎04-20-2013

Original User: gknight

Awesome. Thanks Kelly!