I am currently using MapBox to display multiple coordinates on a map, but I am encountering an issue where the longitude and latitude values in my return object are showing up as undefined. Could there be a missing configuration that is preventing the data from being properly imported into the object?
I have successfully completed this task in the past without any issues.
Link to photo of data ("index")
Here is the code snippet:
targetLocations() {
const data = []
const timer = setInterval(() => {
for (let i = 0; i < store.state.location.locations.length; i++) {
this.coordinates = [store.state.location.locations[i]]
data.push(this.coordinates)
}
this.map.getSource('data-source').setData({
"type": "FeatureCollection",
"features": data.map(this.targetElements)
});
}, 1000);
},
targetElements(index) { // index returns the expected totals
console.log(index)
const { longitude, latitude, userName, dateTimeStored } = index;
return {
"type": "Feature",
"properties": {
'description': "PID: " + userName + "<br />" + "Lng/Lat: " + index[0] + " / " + index[1] + "<br />" + "Captured At: " + dateTimeStored,
'name': userName,
'capturedAt': dateTimeStored,
},
"geometry": {
"type": "Point",
"coordinates": [longitude, latitude]
}
};
},