0

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]]);

  });
Mahmoud Metwally
  • 980
  • 1
  • 10
  • 24

1 Answers1

2

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.

tristen
  • 4,605
  • 4
  • 24
  • 19
  • Thanks for your prompt help, I don't mind using the plugin at all. Yet I couldn't find any information on how to display the path (route) between origin and destination after clicking on the destination marker as shown in my code above? It is essential for my app user to be able to display route between origin and each new destination marker the user click on, along with the route summary (distance, route paths...etc). If you believe I can do this with the plugin can you please guide me on any resource where I can find more information?, thanks – Mahmoud Metwally Apr 10 '16 at 14:09
  • I've managed to display the route between origin and destination using the Mapbox GL plugin, unfortunately couldn't get the mapbox-sdk-js to work. Thanks anyway for your help :) – Mahmoud Metwally Apr 13 '16 at 18:04
  • can you check this, please? https://stackoverflow.com/questions/59266242/consideration-directions-between-two-point-location-in-mapbox-gl-react-native – DevAS Dec 10 '19 at 11:34