Make route padding configurable (#243)

src/controls/inputs.js

@@ -36,19 +36,18 @@ export default class Inputs {
   }
 
   animateToCoordinates(mode, coords) {
-    const { origin, destination } = this.store.getState();
-
+    const { origin, destination, routePadding } = this.store.getState();
+    
     if (origin.geometry &&
         destination.geometry &&
         !isEqual(origin.geometry, destination.geometry)) {
-
       // Animate map to fit bounds.
       const bb = extent({
         type: 'FeatureCollection',
         features: [origin, destination]
       });
 
-      this._map.fitBounds([[bb[0], bb[1]], [bb[2], bb[3]]], { padding: 80 });
+      this._map.fitBounds([[bb[0], bb[1]], [bb[2], bb[3]]], {padding: routePadding});
     } else {
       this._map.flyTo({ center: coords });
     }

src/directions.js

@@ -40,6 +40,7 @@ import Instructions from './controls/instructions';
  * @param {String} [options.placeholderDestination="Choose destination"] If set, this text will appear as the placeholder attribute for the destination input element.
  * @param {Boolean} [options.flyTo=true] If false, animating the map to a selected result is disabled.
  * @param {String} [options.exclude=null] Exclude certain road types from routing. The default is to not exclude anything. Search for `exclude` in `optional parameters`: https://docs.mapbox.com/api/navigation/#retrieve-directions
+ * @param {number | PaddingOptions} [options.routePadding=80] Specify padding surrounding route. A single number of pixels or a [PaddingOptions](https://docs.mapbox.com/mapbox-gl-js/api/#paddingoptions) object.
  * @example
  * var MapboxDirections = require('../src/index');
  * var directions = new MapboxDirections({

src/reducers/index.js

@@ -46,7 +46,8 @@ const initialState = {
 
   // Directions data
   directions: [],
-  routeIndex: 0
+  routeIndex: 0, 
+  routePadding: 80
 };
 
 function data(state = initialState, action) {