Mapbox GL - adding directions to the map

Question

I have a Mapbox GL map with a single layer and multiple markers on that layer, I am trying to draw route + show route information (distance / time / routes to take from origin to destination) in my app using the Directions GL plugin. Unfortunately I can't find any information beyond setting origin / destination (as shown below) in order to display route + route data on my map. The only available information I could find was that mentioned in MapBox GL driving directions example, yet this is not what I really want as I don't want to show the origin / destination as A and B points, nor show the A/ B points search box as in the mapbox.com example above.

Can someone please help me by telling me what I'm missing here and how I can draw the route between origin / destination, display route info using the Mapbox GL plugin? Thanks

  var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v8', 
    center: [userCoordinates.coords.longitude, userCoordinates.coords.latitude],
    zoom: 15
  });


  var directions = new mapboxgl.Directions({
    unit: 'metric',
    profile: 'driving'        
  });



  directions.setOrigin([userCoordinates.coords.longitude, userCoordinates.coords.latitude]);


  map.on('click', function(e) {

    var features = map.queryRenderedFeatures(e.point, { layers: ['gsLayer'] });
    if (!features.length) {
      return;
    }
    var feature = features[0];

    directions.setDestination([feature.geometry.coordinates[0], feature.geometry.coordinates[1]]);

  });

tristen tristen · Accepted Answer · 2016-04-07T03:09:43

It sounds like you don't want to use a plugin at all and instead make a request directly to the Directions API.

I'd recommend taking a look at mapbox-sdk-js - a helpful js lib for making client requests. The API docs for directions can be found here.

Mapbox GL - adding directions to the map

1 Answers