AnsweredAssumed Answered

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

Question asked by lucclaustres on Mar 27, 2017
Latest reply on Jan 24, 2018 by friesgaard

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

Outcomes