Select to view content in your preferred language

featureLayerView: table-not-supported , table feature layer can't be displayed

1667
19
Jump to solution
10-16-2023 02:43 PM
Rohit_Venkat_GandhiMendadhala3
New Contributor III

I am trying to create a featureLayer from an XML response where lat,lon are stored in a featureArray. Instead of creating this as point graphic, I would like to create them as a pointFeatureLayer. However, when I do that I get an error saying table feature layer cant be displayed. I am creating the featureLayer from featuresArray by loading it as FeatureLayerCollection containing lat,lon and id.
Here is the snapshot of the code, I have used.  

 

   fetch(url,{
      method: 'GET',
      mode:'cors',
    }).then((response) => response.text())
    .then(str => new window.DOMParser().parseFromString(str, 'text/xml'))
    .then(async data => {
      const nodes = data.getElementsByTagName('tower');
      const featuresArray = [];
      for (const node of nodes){
          featuresArray.push({
            longitude: node.getAttribute('lng'),
            latitude: node.getAttribute('lat'),
            id:node.getAttribute('id')
          });
        }
      console.log(featuresArray);
      const featureLayer = await this.esri.FeatureLayer({
        source:featuresArray,
        objectIdField:'id',
        title:'TestLayer'
      });
      this.mvs.addToMap(featureLayer);

 

 

0 Kudos
1 Solution

Accepted Solutions
ReneRubalcava
Frequent Contributor II

Do the check on both values like !isNaN(obj.geometry.latitude) && !isNaN(obj.geometry.longitude)

View solution in original post

0 Kudos
19 Replies
JoelBennett
MVP Regular Contributor

I think the problem lies in the structure of the objects in your featuresArray.  Perhaps try the following instead:

for (const node of nodes) {
	featuresArray.push({
		geometry: {
			longitude: node.getAttribute("lng"),
			latitude: node.getAttribute("lat"),
			type: "point"
		},
		attributes: {
			id: node.getAttribute("id")
		}
	});
}
0 Kudos
Rohit_Venkat_GandhiMendadhala3
New Contributor III

Thank you, that worked ok to resolve the error. However the points do not display or load on the webmap.

0 Kudos
JoelBennett
MVP Regular Contributor

It may be because the ObjectID values are expected to be numeric, so you might need to use the following instead:

		attributes: {
			id: parseInt(node.getAttribute("id"), 10)
		}

 

or you could also generate your own:

var oid = 1;

for (const node of nodes) {
	featuresArray.push({
		geometry: {
			longitude: node.getAttribute("lng"),
			latitude: node.getAttribute("lat"),
			type: "point"
		},
		attributes: {
			id: oid++,
			featureID: node.getAttribute("id")
		}
	});
}
0 Kudos
Rohit_Venkat_GandhiMendadhala3
New Contributor III

Tried that, but didnt work. The graphics do not load. I am wondering if there is a need to set symbol like this and even it didnt work.

featuresArray.push({
            geometry:{
              longitude: node.getAttribute('lng'),
              latitude: node.getAttribute('lat'),
              type:'point'
            },
            symbol: {
              type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
              color: "blue",
              size: 10,
              outline: { // autocasts as new SimpleLineSymbol()
                width: 0.5,
                color: "darkblue"
              }
            },
            attributes:{
              id:parseInt(node.getAttribute('id'),10)
            }
          });

 

0 Kudos
JoelBennett
MVP Regular Contributor

Yes, FeatureLayers will ignore the symbol properties on individual graphics.  You'll likely need to set the renderer property on the FeatureLayer.  For example:

 

const featureLayer = await this.esri.FeatureLayer({
	source: featuresArray,
	objectIdField: "id",
	title: "TestLayer",
	renderer: {
		type: "simple",  // autocasts as new SimpleRenderer()
		symbol: {
			type: "simple-marker",  // autocasts as new SimpleMarkerSymbol()
			color: "blue",
			size: 10,
			outline: {  // autocasts as new SimpleLineSymbol()
				width: 0.5,
				color: "darkblue"
			}
		}
	}
});

 

0 Kudos
Rohit_Venkat_GandhiMendadhala3
New Contributor III

Tried it. However I receive a type error this time.

Rohit_Venkat_GandhiMendadhala3_1-1697566838799.png

 

 

0 Kudos
JoelBennett
MVP Regular Contributor

That's a compilation error, as opposed to a runtime error...so you'll need to make the compiler happy.  You may need to import the SimpleRenderer, SimpleMarkerSymbol, and SimpleLineSymbol modules, and use their constructors to instantiate the renderer and its symbol instead of autocasting.

0 Kudos
Rohit_Venkat_GandhiMendadhala3
New Contributor III

Tried importing it, but still didnt work.

 const featureLayer = await this.esri.FeatureLayer({
        source:featuresArray,
        objectIdField:'id',
        title:'TestLayer'
      });
      const simpleMarker = await this.esri.SimpleMarkerSymbol({
        color: 'blue',
        size: 25,
        outline: {
          width: 0.5,
          color: 'darkblue'
        }
      });
      const simpleRenderer = await this.esri.SimpleRenderer({
        symbol: simpleMarker
      });
      featureLayer.renderer = simpleRenderer;

      this.mvs.addToMap(featureLayer);
0 Kudos
JoelBennett
MVP Regular Contributor

Are you getting a new error, the same one, or nothing?

0 Kudos