FeatureLayer not rendering, graphics added are not visible

RiteshSangwan — Tue, 16 May 2017 05:07:31 GMT

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.

topic FeatureLayer not rendering, graphics added are not visible in ArcGIS JavaScript Maps SDK Questions

FeatureLayer not rendering, graphics added are not visible