Pass custom styles in the options argument

Fixes #45

index.js

@@ -3,6 +3,7 @@
  * @class mapboxgl.Directions
  *
  * @param {Object} options
+ * @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 {String} [options.profile="driving"] Routing profile to use. Options: `driving`, `walking`, `cycling`
  * @param {String} [options.unit="imperial"] Measurement system to be used in navigation instructions. Options: `imperial`, `metric`

src/directions.js

@@ -56,7 +56,7 @@ export default class Directions extends mapboxgl.Control {
   }
 
   mapState() {
-    const { profile } = store.getState();
+    const { profile, styles } = store.getState();
 
     // Emit any default or option set config
     this.actions.eventEmit('directions.profile', { profile });
@@ -75,6 +75,10 @@ export default class Directions extends mapboxgl.Control {
     // Add direction specific styles to the map
     directionsStyle.forEach((style) => { map.addLayer(style); });
 
+    if (styles && styles.length) {
+      styles.forEach((style) => { map.addLayer(style); });
+    }
+
     map.getContainer().addEventListener('mousedown', this.onMouseDown);
     map.getContainer().addEventListener('mousemove', this.onMouseMove, true);
     map.getContainer().addEventListener('mouseup', this.onMouseUp);

src/reducers/index.js

@@ -5,6 +5,7 @@ const initialState = {
   profile: 'driving',
   unit: 'imperial',
   proximity: false,
+  styles: [],
 
   // Container for client registered events
   events: {},