How to use Mapbox Mapmatching API output with mapbox-gl-js?

Question

I am quite new to this , really need guidance,

I understand that with Mapbox Map Matching API, i will get the raw out put of correct location, but what I dont understand, how can i use mapbox map-matching API output with mapbox-gl-js to create correct map?

Do i need to use mapbox-match-js for this ? if yes , how do i pass the geo json?

https://github.com/mapbox/mapbox-match.js/tree/master

L.mapbox.mapmatching(geojson, options, function (error, layer) {
    layer.addTo(map);
    layer.setStyle({
        color: '#9a0202',
        weight: 4,
        opacity: 0.8
    });
});

there is a demo html here, but the raw out put is not same as map-matching API out put,

Can any one please help me with this ?

Thanks for your help.

Answer 1

I had the same problem and this is my solution:

1) Add <script src="https://unpkg.com/[email protected]/dist/mapbox-sdk.js"></script> in my index.html file.

2) Use mapbox.matching:

var mapboxClient = new MapboxClient(mapboxgl.accessToken);
mapboxClient.matching(
// dataToAddLine: array like:  
// [
//    [13.418805122375488, 52.50059890747071],
//    [13.419144630432129, 52.50109481811523]
// ]
  dataToAddLine.features[0].geometry.coordinates
  , function(err, res) {
 // do something with res
   console.log(res);
  }

)

You can test res coordinates here: geojson

I hope this solution helps you too.