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.
