Mapbox directions API with my form?

Question

I'm wanting to implement the directions and geocoder part of the Mapbox API into my own custom styled input. The example on their website uses their geocoder but does not explain how to use a custom styled input form with it. I can't find any examples of this online and I'm finding their documentation very hard to understand for a newbie like me.

Ultimately I want the user to be able to type in a starting point and a destination, once entered the route will be displayed on the map.

I appreciate any help thanks :)

here is a basic version of what I have so far Here is my custom form and basic map

<div id='map'></div>
    <form>
      <fieldset>
          <h2>FROM</h2>
            <input type="text" id="input-space-from" name="from">
          <br>
          <h2>TO</h2>
            <input type="text" id="input-space-to" class="set-width" name="to">
          <br>
      </fieldset>
    </form>

Javascript:

    mapboxgl.accessToken = 'pk.eyJ1IjoiY2FtbXkxMSIsImEiOiJjamFib2p6cGwwMjNhMnhtaGptbmF1azJrIn0.OtcZ5rIhMtthxs7yu6KqmQ';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location
    center: [-74.50, 40], // starting position [lng, lat]
    zoom: 9 // starting zoom
});

CSS:

#map { 
  position:absolute;
  top:200px;
  bottom:0;
  width:100%;
}

h2 {
  font-size: 18px;
  color: #DA7B93;
  font-family: 'Oxygen', sans-serif;
  letter-spacing: 30px;
  margin: 0 auto;
  padding-top: 10px;
  padding-bottom: 5px;
}

fieldset {
  border: none;
  background-color: #2E151B;
}

input {
  color: white;
  font-size: 24px;
  background-color: #376E6F;
  border: none;
  padding: 4px;
}

.set-width {
  width: 321px;
}

#input-space-to {
  margin-bottom: 5px;
  width: 321px;
}

Answer 1

The Mapbox Directions API relies on coordinate pairs for the actual routing from place to place, so it sounds like what you need to do is

1.Make a call with $.getJSON to the Geocoding API with the input from the "From" and "To" input boxes.

2.Collect the geospatial results of that Geocoding response, and pass the coordinate pairs along with your desired mode(car w/traffic, car,bike,walking), to the Directions API in the form of another $.getJSON call.

3.Display result from Directions api response