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);
});
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);
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: