Add support for custom instruction compile function.

Author: willwhite

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

@@ -26,6 +26,7 @@ import Instructions from './controls/instructions';
  * @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.
@@ -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

@@ -7,6 +7,7 @@ const initialState = {
   profile: 'mapbox/driving-traffic',
   alternatives: false,
   unit: 'imperial',
+  compile: null,
   proximity: false,
   styles: [],