Merge pull request #138 from mapbox/custom-profiles

Custom profiles

Author: willwhite

src/actions/index.js

@@ -61,9 +61,9 @@ function fetchDirections() {
     if (alternatives) options.push('alternatives=true');
     options.push('steps=true');
     options.push('overview=full');
-    options.push('access_token=' + accessToken);
+    if (accessToken) 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/controls/instructions.js

@@ -28,7 +28,7 @@ export default class Instructions {
   render() {
     this.store.subscribe(() => {
       const { hoverMarker, setRouteIndex } = this.actions;
-      const { routeIndex, unit, directions, error } = this.store.getState();
+      const { routeIndex, unit, directions, error, compile } = this.store.getState();
       const shouldRender = !isEqual(directions[routeIndex], this.directions);
 
       if (error) {
@@ -38,6 +38,15 @@ export default class Instructions {
 
       if (directions.length && shouldRender) {
         const direction = this.directions = directions[routeIndex];
+
+        if (compile) {
+          direction.legs.forEach(function(leg) {
+            leg.steps.forEach(function(step) {
+              step.maneuver.instruction = compile('en', step);
+            });
+          });
+        }
+
         this.container.innerHTML = instructionsTemplate({
           routeIndex,
           routes: directions.length,

src/directions.js

@@ -23,9 +23,10 @@ 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 {Function} [options.compile=null] Provide a custom function for generating instruction, compatible with osrm-text-instructions.
  * @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).
  * @param {Object} [options.controls]
  * @param {Boolean} [options.controls.inputs=true] Hide or display the inputs control.
@@ -35,7 +36,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);
@@ -110,7 +111,7 @@ export default class MapboxDirections {
   }
 
   mapState() {
-    const { profile, alternatives, styles, interactive } = store.getState();
+    const { profile, alternatives, styles, interactive, compile } = store.getState();
 
     // Emit any default or option set config
     this.actions.eventEmit('profile', { profile });

src/reducers/index.js

@@ -4,9 +4,10 @@ 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',
+  compile: null,
   proximity: false,
   styles: [],
 

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>