I am looking to enhance my map by incorporating multiple features into a single source, rather than just a single line.
In my typescript code, I currently have an array called myRoutes that contains all the routes (coordinates for the lines to be drawn). However, this setup is incorrect as only the first line is getting drawn. Here's how it looks:
myRoutes.forEach((element: any) => {
this.map.addSource("route", {
type: "geojson",
data: {
type: "FeatureCollection",
features: [
{
type: "Feature",
properties: {},
geometry: {
type: "LineString",
coordinates: [
[element.fromLon, element.fromLat],
[element.toLon, element.toLat]
]
}
}
]
},
});
});
this.map.addLayer({ ... });
After checking MapBox's official documentation (link), I discovered that it's possible to add more than one feature in the following manner:
...
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [-121.415061, 40.506229]
}
},
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [-121.505184, 40.488084]
}
},
...
My question now is how can I generate these blocks automatically using a forEach loop in my typescript file with the data from myRoutes?