AnsweredAssumed Answered

FeatureLayer not rendering, graphics added are not visible

Question asked by spanhawk on May 15, 2017

I am developing a single page react application and loaded esri api using react-esri-loader and esri-loader.

I am able to initiates a new Map instance as well as new MapView instance.

The map is rendering fine on the page but I am trying to add a FeatureLayer to my map. I am following the sandbox example here. The code is working fine in sandbox environment but nothing is displayed when I add the same code in my app.

 

Below is my code

 

this.map = new this.props.Map({ basemap: 'streets' });  this.mapView = new this.props.MapView({    container: this.mapContainer,    map: this.map,    zoom: this.state.zoom,    center: this.state.center,  });   this.mapView.on('click', this.handleMapViewClick.bind(this));  // this.mapView.watch('extent', this.searchDonors.bind(this));  this.mapView.then(() => {    var data = [      {        location : {          coordinates : [              -73.9472609999999975,              40.7332899999999967          ],          type : "Point"        }      }    ];    var fields = [      {        name: "ObjectID",        alias: "ObjectID",        type: "oid"      }];     // Create an array of Graphics from each GeoJSON feature    const graphics = data.map((feature, i) => ({         geometry: new this.props.Point({          longitude: feature.location.coordinates[0],          latitude: feature.location.coordinates[1]        }),        // select only the attributes you care about        attributes: {          ObjectID: i,        }    }));     var quakesRenderer = new this.props.SimpleRenderer({      symbol: new this.props.SimpleMarkerSymbol({        style: "circle",        size: 20,        color: [211, 255, 0, 0],        outline: {          width: 1,          color: "#FF0055",          style: "solid"        }      }),    });     var lyr = new this.props.FeatureLayer({      source: graphics, // autocast as an array of esri/Graphic      // create an instance of esri/layers/support/Field for each field object      fields: fields, // This is required when creating a layer from Graphics      objectIdField: "ObjectID", // This must be defined when creating a layer from Graphics      renderer: quakesRenderer, // set the visualization on the layer      spatialReference: {        wkid: 4326      },      geometryType: "point", // Must be set when creating a layer from Graphics    });     this.map.add(lyr);  });

 

I am not sure what is the issue with my code, there are no errors in the console.

 

NOTE: this.props.Map, this.props.FeatureLayer are the commonjs module already loaded. I am sure there is no error in loading as I can see the map being loaded on the screen. The only issue is FeatureLayer is not loaded, the marker is not visible on the screen. I am using the latest 4.3 version of the javascript API.

 

I asked this on SO. Here is the link to SO question.

Outcomes