Add support for custom profiles.

Author: willwhite

src/actions/index.js

@@ -63,7 +63,7 @@ function fetchDirections() {
     options.push('overview=full');
     options.push('access_token=' + accessToken);
     request.abort();
-    request.open('GET', `${api}mapbox/${profile}/${query}.json?${options.join('&')}`, true);
+    request.open('GET', `${api}${profile}/${query}.json?${options.join('&')}`, true);
 
     request.onload = () => {
       if (request.status >= 200 && request.status < 400) {

src/controls/inputs.js

@@ -83,7 +83,7 @@ export default class Inputs {
 
     var destinationEl = this.destinationInput.onAdd();
     this.container.querySelector('#mapbox-directions-destination-input').appendChild(destinationEl);
-    
+
 
     this.originInput.on('result', (e) => {
       const coords = e.result.center;
@@ -105,7 +105,7 @@ export default class Inputs {
     const profiles = this.container.querySelectorAll('input[type="radio"]');
     Array.prototype.forEach.call(profiles, (el) => {
       el.addEventListener('change', () => {
-        setProfile(el.id.replace('mapbox-directions-profile-', ''));
+        setProfile(el.value);
       });
     });
 

src/directions.js

@@ -23,7 +23,7 @@ import Instructions from './controls/instructions';
  * @param {Array} [options.styles] Override default layer properties of the [directions source](https://github.com/mapbox/mapbox-gl-directions/blob/master/src/directions_style.js). Documentation for each property are specified in the [Mapbox GL Style Reference](https://www.mapbox.com/mapbox-gl-style-spec/).
  * @param {String} [options.accessToken=null] Required unless `mapboxgl.accessToken` is set globally
  * @param {Boolean} [options.interactive=true] Enable/Disable mouse or touch interactivity from the plugin
- * @param {String} [options.profile="driving-traffic"] Routing profile to use. Options: `driving-traffic`, `driving`, `walking`, `cycling`
+ * @param {String} [options.profile="mapbox/driving-traffic"] Routing profile to use. Options: `mapbox/driving-traffic`, `mapbox/driving`, `mapbox/walking`, `mapbox/cycling`
  * @param {Boolean} [options.alternatives=true] Whether to enable alternatives.
  * @param {String} [options.unit="imperial"] Measurement system to be used in navigation instructions. Options: `imperial`, `metric`
  * @param {Object} [options.geocoder] Pass options available to mapbox-gl-geocoder as [documented here](https://github.com/mapbox/mapbox-gl-geocoder/blob/master/API.md#mapboxglgeocoder).
@@ -35,7 +35,7 @@ import Instructions from './controls/instructions';
  * var directions = new MapboxDirections({
  *   accessToken: 'YOUR-MAPBOX-ACCESS-TOKEN',
  *   unit: 'metric',
- *   profile: 'cycling'
+ *   profile: 'mapbox/cycling'
  * });
  * // add to your mapboxgl map
  * map.addControl(directions);

src/reducers/index.js

@@ -4,7 +4,7 @@ import deepAssign from 'deep-assign';
 const initialState = {
   // Options set on initialization
   api: 'https://api.mapbox.com/directions/v5/',
-  profile: 'driving-traffic',
+  profile: 'mapbox/driving-traffic',
   alternatives: false,
   unit: 'imperial',
   proximity: false,

src/templates/inputs.html

@@ -24,28 +24,32 @@
       id='mapbox-directions-profile-driving-traffic'
       type='radio'
       name='profile'
-      <% if (profile === 'driving-traffic') { %>checked<% } %>
+      value='mapbox/driving-traffic'
+      <% if (profile === 'mapbox/driving-traffic') { %>checked<% } %>
     />
     <label for='mapbox-directions-profile-driving-traffic'>Traffic</label>
     <input
       id='mapbox-directions-profile-driving'
       type='radio'
       name='profile'
-      <% if (profile === 'driving') { %>checked<% } %>
+      value='mapbox/driving'
+      <% if (profile === 'mapbox/driving') { %>checked<% } %>
     />
     <label for='mapbox-directions-profile-driving'>Driving</label>
     <input
       id='mapbox-directions-profile-walking'
       type='radio'
       name='profile'
-      <% if (profile === 'walking') { %>checked<% } %>
+      value='mapbox/walking'
+      <% if (profile === 'mapbox/walking') { %>checked<% } %>
     />
     <label for='mapbox-directions-profile-walking'>Walking</label>
     <input
       id='mapbox-directions-profile-cycling'
       type='radio'
       name='profile'
-      <% if (profile === 'cycling') { %>checked<% } %>
+      value='mapbox/cycling'
+      <% if (profile === 'mapbox/cycling') { %>checked<% } %>
     />
     <label for='mapbox-directions-profile-cycling'>Cycling</label>
   </div>