title: How to set origin and destination with mapbox-gl-directions?
body: <p>I'm using Mapbox to integrate in a javascript/php project. So far so good. Works great. Looking around their api I was wondering whether it was possible to have a mix between mapbox-gl-directions and <a href="https://docs.mapbox.com/help/tutorials/getting-started-directions-api/#add-your-origin-and-destination" rel="nofollow noreferrer">mapbox-directions api</a>. They don't seem to be the same thing.I really like the example from <a href="https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-directions/" rel="nofollow noreferrer">mapbox-gl-directions</a> which gives the user options to select between driving, cycling and walking. But I already have coordinates for the origin point and coordinates for the destination point. I don't necessarily need the user to input those coordinates but I would also like to leave the user the option to enter alternative coordinates if he wanted to. How can I add starting and destination points to the mapbox-gl-directions just like the mapbox-directions-api? I've looked everywhere in their docs.</p>
  
  <p><a href="https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-directions/" rel="nofollow noreferrer">mapbox-gl-directions</a> :</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;title&gt;Display driving directions&lt;/title&gt;
  &lt;meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /&gt;
  &lt;script src="https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js"&gt;&lt;/script&gt;
  &lt;link href="https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css" rel="stylesheet" /&gt;
  &lt;style&gt;
      body { margin: 0; padding: 0; }
      #map { position: absolute; top: 0; bottom: 0; width: 100%; };
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.0.2/mapbox-gl-directions.js"&gt;&lt;/script&gt;
  &lt;link
      rel="stylesheet"
      href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.0.2/mapbox-gl-directions.css"
      type="text/css"
  /&gt;
  &lt;div id="map"&gt;&lt;/div&gt;
  
  &lt;script&gt;
      mapboxgl.accessToken = 'pk.eyJ1Ijoid2ViYjI0aCIsImEiOiJjazU3a2lkbW4wNGJrM2RvNnNrNnBzbGlxIn0.GGnF34IsMQyqKNoam241tA';
      var map = new mapboxgl.Map({
          container: 'map',
          style: 'mapbox://styles/mapbox/streets-v11',
          center: [-79.4512, 43.6568],
          zoom: 13
      });
  
      map.addControl(
          new MapboxDirections({
              accessToken: mapboxgl.accessToken
          }),
          'top-left'
      );
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>