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.
Do the check on both values like !isNaN(obj.geometry.latitude) && !isNaN(obj.geometry.longitude)
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")
}
});
}
Thank you, that worked ok to resolve the error. However the points do not display or load on the webmap.
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")
}
});
}
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)
}
});
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"
}
}
}
});
Tried it. However I receive a type error this time.
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.
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);
Are you getting a new error, the same one, or nothing?