Error while creating a FeatureLayer from a GeoJSON source in Web AppBuilder

Question

I followed this sample implementing GeoJSON import "Create a FeatureLayer with client side graphics | ArcGIS API for JavaScript 4.3" but I am stucked on the following error that appears when creating the FeatureLayer : "TypeError: Cannot read property 'path' of null". The GeoJSON data seem to be correctly retrieved however, here is my code : var adsbRenderer = new SimpleRenderer({ symbol: new SimpleMarkerSymbol({ size: 10, color: "#FF4000", outline: { color: [255, 64, 0, 0.4], width: 7 } }) }); // Tentative with GeoJSON // Raise error when creating the FeatureLayer object : "TypeError: Cannot read property 'path' of null" esriRequest({ url: this.config.adsb.adsbBaseUrl, content: { service: 'WFS', version: '1.0.0', request: 'GetFeature', typeName: 'adsb-docker:aircrafts', outputFormat: 'application/json', CQL_FILTER: 'opicao=\'EZY\'' }, handleAs: 'json' }).then(function(geoJson) { // Create an array of Graphics from each GeoJSON feature return arrayUtils.map(geoJson.features, function(feature, i) { return { geometry: new Point({ x: feature.geometry.coordinates[0], y: feature.geometry.coordinates[1] }), // select only the attributes you care about attributes: { id: feature.id, icao: feature.properties.icao, op: feature.properties.op, opicao: feature.properties.opicao, time: feature.properties.time, man: feature.properties.man, mdl: feature.properties.mdl } }; }); }).then(function(graphics) { // Define the specification for each field to create var fields = [ { name: "id", alias: "id", type: "oid" }, { name: "icao", alias: "icao", type: "string" }, { name: "op", alias: "op", type: "string" }, { name: "opicao", alias: "opicao", type: "string" }, { name: "man", alias: "man", type: "string" }, { name: "time", alias: "time", type: "date" }, { name: "mdl", alias: "mdl", type: "string" }]; // Set up popup template for the layer var pTemplate = { title: "{icao}", content: [{ type: "fields", fieldInfos: [{ fieldName: "op", label: "Op", visible: true }, { fieldName: "opicao", label: "Op Icao", visible: true }, { fieldName: "time", label: "Date and time", visible: true }, { fieldName: "man", label: "Manufacturer", visible: true }, { fieldName: "mdl", label: "Model", visible: true }] }], fieldInfos: [{ fieldName: "time", format: { dateFormat: "short-date-short-time" } }] }; this.adsbLayer = new 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: "id", // This must be defined when creating a layer from Graphics renderer: adsbRenderer, // set the visualization on the layer spatialReference: { wkid: 4326 }, geometryType: "point", // Must be set when creating a layer from Graphics popupTemplate: pTemplate }); this.map.addLayer(this.adsbLayer); }).otherwise(function(error) { console.error("Creating ADSB layer failed. ", error); });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

MortenFriesgaard · Answer

When I debug my code, I'm quite sure you also tried to setup this sample in a environment pre 4.0 (e.g. 3.23). To get this to work, using featureCollection is completly correct. Follow this example instead:

Feature collection | ArcGIS API for JavaScript 3.23

MortenFriesgaard · Answer

Hi,

Maybe this is a bit late, but I got it working by wrapping configuration for the FeatureLayer in a featureCollection object like on this page: FeatureLayer | API Reference | ArcGIS API for JavaScript 3.23

var featureCollection = {
  layerDefinition: {
    fields: fields,
    source: graphics, 
    objectIdField: "ObjectID", 
    renderer: absRenderer,
    spatialReference: {
      wkid: 4326
    },
    geometryType: "point",
    popupTemplate: pTemplate
  },
  featureSet: null
};

lyr = new FeatureLayer(featureCollection);