Mapbox Linestring inside road

Question

I have a set of GPS coordinates taken from a truck, that I need to put on a map with mapbox and then draw a line to show the truck route.

Is there a way to draw the line that follow the roads? At the moment is very I have just a straight line beetween the coordinates.

Since I have a lot of coordinates I put my code here: JSFiddle

const geojson = data on JSFiddle

const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [13.23065662, 43.2500267],
zoom: 12
});
 
map.on('load', () => {
map.addSource('LineString', {
'type': 'geojson',
'data': geojson
});
map.addLayer({
'id': 'LineString',
'type': 'line',
'source': 'LineString',
'layout': {
'line-join': 'round',
'line-cap': 'round'
},
'paint': {
'line-color': '#BF93E4',
'line-width': 5
}
});
})

Answer 1

You're looking for the Map Matching API.