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);
Solved! Go to Solution.
Try to wrap your coords in Number(node.getAttribute('lng')), see if that helps. Although I think you would get a different error if the coords as string was an issue. What if you assign the y/x instead of lat/lon?
If you had a small sample in codepen or similar to debug, would help.
Well I tried that, but it didnt work as well.
Here is sample of the featuresArray.
No errors, code runs fine but layer doesnt display (points dont show up). The title displays in the map options, but points do not show up. Unfortunately, this is part of a big code base, cant upload the codebase
It was good to convert the lat and long to numbers as Rene suggested, but I see in your screenshot the "id" values are still strings. I've seen features not render in cases of duplicate or invalid objectid values, so you should probably convert those to integers as well, whether via Number or parseInt.
Well, I did that too
Ok, I have just changed the id to a diff field and it loads just one point, that too with a mismatch of spatial reference. Any recommendations on this?
Is it really just one point, or a load of points stacked on one another? If it is just one point, I would recommend autogenerating the objectID values as in a previous response.
As for the wrong location, it looks like it's treating your long/lat values as Web Mercator x/y values. You may have to project the coordinates into Web Mercator, which is easily done with webMercatorUtils.lngLatToXY and then use "x" and "y" properties instead of "latitude" and "longitude".
There could be some invalid data. If I add NaN values to coords, no points will display. The one valid point will display if you change to NaN to null though.
https://codepen.io/odoe/pen/ZEVdNBJ?editors=1000
You might need to filter the data to validate it before you create the layer.
Yes, I expected that. So here is NaN value I found.
Is there a way to filter this down.. I did something like this.
featuresArray = featuresArray.filter((obj)=> !isNaN(obj.geometry.latitude || obj.geometry.longitude))
Do the check on both values like !isNaN(obj.geometry.latitude) && !isNaN(obj.geometry.longitude)