From f49ae026e748e873cd3509761efcfbee793c35fb Mon Sep 17 00:00:00 2001
From: mapsam <matthews.sam@gmail.com>
Date: Thu, 17 Nov 2016 11:16:29 -0800
Subject: [PATCH 01/17] require mapboxgl

---
 dist/mapbox-gl-directions.js | 596 +++++++++++++++++++++--------------
 example/index.html           |  25 --
 example/index.js             |  30 +-
 package.json                 |   7 +-
 src/directions.js            |  39 +--
 index.js => src/index.js     |   8 +-
 6 files changed, 405 insertions(+), 300 deletions(-)
 delete mode 100644 example/index.html
 rename index.js => src/index.js (90%)

diff --git a/dist/mapbox-gl-directions.js b/dist/mapbox-gl-directions.js
index d2533d1..3a383b0 100644
--- a/dist/mapbox-gl-directions.js
+++ b/dist/mapbox-gl-directions.js
@@ -37,7 +37,7 @@ if (window.mapboxgl) {
    * @return {Directions} `this`
    */
 
-},{"./src/directions":36}],2:[function(require,module,exports){
+},{"./src/directions":42}],2:[function(require,module,exports){
 // Copyright Joyent, Inc. and other Node contributors.
 //
 // Permission is hereby granted, free of charge, to any person obtaining a
@@ -3996,13 +3996,13 @@ exports.__esModule = true;
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-exports["default"] = applyMiddleware;
+exports['default'] = applyMiddleware;
 
 var _compose = require('./compose');
 
 var _compose2 = _interopRequireDefault(_compose);
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
 /**
  * Creates a store enhancer that applies middleware to the dispatch method
@@ -4026,8 +4026,8 @@ function applyMiddleware() {
   }
 
   return function (createStore) {
-    return function (reducer, initialState, enhancer) {
-      var store = createStore(reducer, initialState, enhancer);
+    return function (reducer, preloadedState, enhancer) {
+      var store = createStore(reducer, preloadedState, enhancer);
       var _dispatch = store.dispatch;
       var chain = [];
 
@@ -4040,7 +4040,7 @@ function applyMiddleware() {
       chain = middlewares.map(function (middleware) {
         return middleware(middlewareAPI);
       });
-      _dispatch = _compose2["default"].apply(undefined, chain)(store.dispatch);
+      _dispatch = _compose2['default'].apply(undefined, chain)(store.dispatch);
 
       return _extends({}, store, {
         dispatch: _dispatch
@@ -4052,7 +4052,7 @@ function applyMiddleware() {
 'use strict';
 
 exports.__esModule = true;
-exports["default"] = bindActionCreators;
+exports['default'] = bindActionCreators;
 function bindActionCreator(actionCreator, dispatch) {
   return function () {
     return dispatch(actionCreator.apply(undefined, arguments));
@@ -4104,7 +4104,7 @@ function bindActionCreators(actionCreators, dispatch) {
 'use strict';
 
 exports.__esModule = true;
-exports["default"] = combineReducers;
+exports['default'] = combineReducers;
 
 var _createStore = require('./createStore');
 
@@ -4116,7 +4116,7 @@ var _warning = require('./utils/warning');
 
 var _warning2 = _interopRequireDefault(_warning);
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
 function getUndefinedStateErrorMessage(key, action) {
   var actionType = action && action.type;
@@ -4125,20 +4125,24 @@ function getUndefinedStateErrorMessage(key, action) {
   return 'Given action ' + actionName + ', reducer "' + key + '" returned undefined. ' + 'To ignore an action, you must explicitly return the previous state.';
 }
 
-function getUnexpectedStateShapeWarningMessage(inputState, reducers, action) {
+function getUnexpectedStateShapeWarningMessage(inputState, reducers, action, unexpectedKeyCache) {
   var reducerKeys = Object.keys(reducers);
-  var argumentName = action && action.type === _createStore.ActionTypes.INIT ? 'initialState argument passed to createStore' : 'previous state received by the reducer';
+  var argumentName = action && action.type === _createStore.ActionTypes.INIT ? 'preloadedState argument passed to createStore' : 'previous state received by the reducer';
 
   if (reducerKeys.length === 0) {
     return 'Store does not have a valid reducer. Make sure the argument passed ' + 'to combineReducers is an object whose values are reducers.';
   }
 
-  if (!(0, _isPlainObject2["default"])(inputState)) {
+  if (!(0, _isPlainObject2['default'])(inputState)) {
     return 'The ' + argumentName + ' has unexpected type of "' + {}.toString.call(inputState).match(/\s([a-z|A-Z]+)/)[1] + '". Expected argument to be an object with the following ' + ('keys: "' + reducerKeys.join('", "') + '"');
   }
 
   var unexpectedKeys = Object.keys(inputState).filter(function (key) {
-    return !reducers.hasOwnProperty(key);
+    return !reducers.hasOwnProperty(key) && !unexpectedKeyCache[key];
+  });
+
+  unexpectedKeys.forEach(function (key) {
+    unexpectedKeyCache[key] = true;
   });
 
   if (unexpectedKeys.length > 0) {
@@ -4183,12 +4187,23 @@ function combineReducers(reducers) {
   var finalReducers = {};
   for (var i = 0; i < reducerKeys.length; i++) {
     var key = reducerKeys[i];
+
+    if ("production" !== 'production') {
+      if (typeof reducers[key] === 'undefined') {
+        (0, _warning2['default'])('No reducer provided for key "' + key + '"');
+      }
+    }
+
     if (typeof reducers[key] === 'function') {
       finalReducers[key] = reducers[key];
     }
   }
   var finalReducerKeys = Object.keys(finalReducers);
 
+  if ("production" !== 'production') {
+    var unexpectedKeyCache = {};
+  }
+
   var sanityError;
   try {
     assertReducerSanity(finalReducers);
@@ -4205,9 +4220,9 @@ function combineReducers(reducers) {
     }
 
     if ("production" !== 'production') {
-      var warningMessage = getUnexpectedStateShapeWarningMessage(state, finalReducers, action);
+      var warningMessage = getUnexpectedStateShapeWarningMessage(state, finalReducers, action, unexpectedKeyCache);
       if (warningMessage) {
-        (0, _warning2["default"])(warningMessage);
+        (0, _warning2['default'])(warningMessage);
       }
     }
 
@@ -4228,7 +4243,7 @@ function combineReducers(reducers) {
     return hasChanged ? nextState : state;
   };
 }
-},{"./createStore":14,"./utils/warning":16,"lodash/isPlainObject":21}],13:[function(require,module,exports){
+},{"./createStore":14,"./utils/warning":16,"lodash/isPlainObject":26}],13:[function(require,module,exports){
 "use strict";
 
 exports.__esModule = true;
@@ -4253,28 +4268,26 @@ function compose() {
     return function (arg) {
       return arg;
     };
-  } else {
-    var _ret = function () {
-      var last = funcs[funcs.length - 1];
-      var rest = funcs.slice(0, -1);
-      return {
-        v: function v() {
-          return rest.reduceRight(function (composed, f) {
-            return f(composed);
-          }, last.apply(undefined, arguments));
-        }
-      };
-    }();
+  }
 
-    if (typeof _ret === "object") return _ret.v;
+  if (funcs.length === 1) {
+    return funcs[0];
   }
+
+  var last = funcs[funcs.length - 1];
+  var rest = funcs.slice(0, -1);
+  return function () {
+    return rest.reduceRight(function (composed, f) {
+      return f(composed);
+    }, last.apply(undefined, arguments));
+  };
 }
 },{}],14:[function(require,module,exports){
 'use strict';
 
 exports.__esModule = true;
 exports.ActionTypes = undefined;
-exports["default"] = createStore;
+exports['default'] = createStore;
 
 var _isPlainObject = require('lodash/isPlainObject');
 
@@ -4284,7 +4297,7 @@ var _symbolObservable = require('symbol-observable');
 
 var _symbolObservable2 = _interopRequireDefault(_symbolObservable);
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
 /**
  * These are private action types reserved by Redux.
@@ -4307,7 +4320,7 @@ var ActionTypes = exports.ActionTypes = {
  * @param {Function} reducer A function that returns the next state tree, given
  * the current state tree and the action to handle.
  *
- * @param {any} [initialState] The initial state. You may optionally specify it
+ * @param {any} [preloadedState] The initial state. You may optionally specify it
  * to hydrate the state from the server in universal apps, or to restore a
  * previously serialized user session.
  * If you use `combineReducers` to produce the root reducer function, this must be
@@ -4321,12 +4334,12 @@ var ActionTypes = exports.ActionTypes = {
  * @returns {Store} A Redux store that lets you read the state, dispatch actions
  * and subscribe to changes.
  */
-function createStore(reducer, initialState, enhancer) {
+function createStore(reducer, preloadedState, enhancer) {
   var _ref2;
 
-  if (typeof initialState === 'function' && typeof enhancer === 'undefined') {
-    enhancer = initialState;
-    initialState = undefined;
+  if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
+    enhancer = preloadedState;
+    preloadedState = undefined;
   }
 
   if (typeof enhancer !== 'undefined') {
@@ -4334,7 +4347,7 @@ function createStore(reducer, initialState, enhancer) {
       throw new Error('Expected the enhancer to be a function.');
     }
 
-    return enhancer(createStore)(reducer, initialState);
+    return enhancer(createStore)(reducer, preloadedState);
   }
 
   if (typeof reducer !== 'function') {
@@ -4342,7 +4355,7 @@ function createStore(reducer, initialState, enhancer) {
   }
 
   var currentReducer = reducer;
-  var currentState = initialState;
+  var currentState = preloadedState;
   var currentListeners = [];
   var nextListeners = currentListeners;
   var isDispatching = false;
@@ -4434,7 +4447,7 @@ function createStore(reducer, initialState, enhancer) {
    * return something else (for example, a Promise you can await).
    */
   function dispatch(action) {
-    if (!(0, _isPlainObject2["default"])(action)) {
+    if (!(0, _isPlainObject2['default'])(action)) {
       throw new Error('Actions must be plain objects. ' + 'Use custom middleware for async actions.');
     }
 
@@ -4499,7 +4512,6 @@ function createStore(reducer, initialState, enhancer) {
        * be used to unsubscribe the observable from the store, and prevent further
        * emission of values from the observable.
        */
-
       subscribe: function subscribe(observer) {
         if (typeof observer !== 'object') {
           throw new TypeError('Expected the observer to be an object.');
@@ -4515,7 +4527,7 @@ function createStore(reducer, initialState, enhancer) {
         var unsubscribe = outerSubscribe(observeState);
         return { unsubscribe: unsubscribe };
       }
-    }, _ref[_symbolObservable2["default"]] = function () {
+    }, _ref[_symbolObservable2['default']] = function () {
       return this;
     }, _ref;
   }
@@ -4530,9 +4542,9 @@ function createStore(reducer, initialState, enhancer) {
     subscribe: subscribe,
     getState: getState,
     replaceReducer: replaceReducer
-  }, _ref2[_symbolObservable2["default"]] = observable, _ref2;
+  }, _ref2[_symbolObservable2['default']] = observable, _ref2;
 }
-},{"lodash/isPlainObject":21,"symbol-observable":22}],15:[function(require,module,exports){
+},{"lodash/isPlainObject":26,"symbol-observable":27}],15:[function(require,module,exports){
 'use strict';
 
 exports.__esModule = true;
@@ -4562,7 +4574,7 @@ var _warning = require('./utils/warning');
 
 var _warning2 = _interopRequireDefault(_warning);
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
 /*
 * This is a dummy function to check if the function name has been altered by minification.
@@ -4571,19 +4583,19 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 function isCrushed() {}
 
 if ("production" !== 'production' && typeof isCrushed.name === 'string' && isCrushed.name !== 'isCrushed') {
-  (0, _warning2["default"])('You are currently using minified code outside of NODE_ENV === \'production\'. ' + 'This means that you are running a slower development build of Redux. ' + 'You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify ' + 'or DefinePlugin for webpack (http://stackoverflow.com/questions/30030031) ' + 'to ensure you have the correct code for your production build.');
+  (0, _warning2['default'])('You are currently using minified code outside of NODE_ENV === \'production\'. ' + 'This means that you are running a slower development build of Redux. ' + 'You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify ' + 'or DefinePlugin for webpack (http://stackoverflow.com/questions/30030031) ' + 'to ensure you have the correct code for your production build.');
 }
 
-exports.createStore = _createStore2["default"];
-exports.combineReducers = _combineReducers2["default"];
-exports.bindActionCreators = _bindActionCreators2["default"];
-exports.applyMiddleware = _applyMiddleware2["default"];
-exports.compose = _compose2["default"];
+exports.createStore = _createStore2['default'];
+exports.combineReducers = _combineReducers2['default'];
+exports.bindActionCreators = _bindActionCreators2['default'];
+exports.applyMiddleware = _applyMiddleware2['default'];
+exports.compose = _compose2['default'];
 },{"./applyMiddleware":10,"./bindActionCreators":11,"./combineReducers":12,"./compose":13,"./createStore":14,"./utils/warning":16}],16:[function(require,module,exports){
 'use strict';
 
 exports.__esModule = true;
-exports["default"] = warning;
+exports['default'] = warning;
 /**
  * Prints a warning in the console if it exists.
  *
@@ -4606,6 +4618,53 @@ function warning(message) {
   /* eslint-enable no-empty */
 }
 },{}],17:[function(require,module,exports){
+var root = require('./_root');
+
+/** Built-in value references. */
+var Symbol = root.Symbol;
+
+module.exports = Symbol;
+
+},{"./_root":24}],18:[function(require,module,exports){
+var Symbol = require('./_Symbol'),
+    getRawTag = require('./_getRawTag'),
+    objectToString = require('./_objectToString');
+
+/** `Object#toString` result references. */
+var nullTag = '[object Null]',
+    undefinedTag = '[object Undefined]';
+
+/** Built-in value references. */
+var symToStringTag = Symbol ? Symbol.toStringTag : undefined;
+
+/**
+ * The base implementation of `getTag` without fallbacks for buggy environments.
+ *
+ * @private
+ * @param {*} value The value to query.
+ * @returns {string} Returns the `toStringTag`.
+ */
+function baseGetTag(value) {
+  if (value == null) {
+    return value === undefined ? undefinedTag : nullTag;
+  }
+  value = Object(value);
+  return (symToStringTag && symToStringTag in value)
+    ? getRawTag(value)
+    : objectToString(value);
+}
+
+module.exports = baseGetTag;
+
+},{"./_Symbol":17,"./_getRawTag":21,"./_objectToString":22}],19:[function(require,module,exports){
+(function (global){
+/** Detect free variable `global` from Node.js. */
+var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;
+
+module.exports = freeGlobal;
+
+}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
+},{}],20:[function(require,module,exports){
 var overArg = require('./_overArg');
 
 /** Built-in value references. */
@@ -4613,29 +4672,79 @@ var getPrototype = overArg(Object.getPrototypeOf, Object);
 
 module.exports = getPrototype;
 
-},{"./_overArg":19}],18:[function(require,module,exports){
+},{"./_overArg":23}],21:[function(require,module,exports){
+var Symbol = require('./_Symbol');
+
+/** Used for built-in method references. */
+var objectProto = Object.prototype;
+
+/** Used to check objects for own properties. */
+var hasOwnProperty = objectProto.hasOwnProperty;
+
 /**
- * Checks if `value` is a host object in IE < 9.
+ * Used to resolve the
+ * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+ * of values.
+ */
+var nativeObjectToString = objectProto.toString;
+
+/** Built-in value references. */
+var symToStringTag = Symbol ? Symbol.toStringTag : undefined;
+
+/**
+ * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
  *
  * @private
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a host object, else `false`.
+ * @param {*} value The value to query.
+ * @returns {string} Returns the raw `toStringTag`.
  */
-function isHostObject(value) {
-  // Many host objects are `Object` objects that can coerce to strings
-  // despite having improperly defined `toString` methods.
-  var result = false;
-  if (value != null && typeof value.toString != 'function') {
-    try {
-      result = !!(value + '');
-    } catch (e) {}
+function getRawTag(value) {
+  var isOwn = hasOwnProperty.call(value, symToStringTag),
+      tag = value[symToStringTag];
+
+  try {
+    value[symToStringTag] = undefined;
+    var unmasked = true;
+  } catch (e) {}
+
+  var result = nativeObjectToString.call(value);
+  if (unmasked) {
+    if (isOwn) {
+      value[symToStringTag] = tag;
+    } else {
+      delete value[symToStringTag];
+    }
   }
   return result;
 }
 
-module.exports = isHostObject;
+module.exports = getRawTag;
+
+},{"./_Symbol":17}],22:[function(require,module,exports){
+/** Used for built-in method references. */
+var objectProto = Object.prototype;
+
+/**
+ * Used to resolve the
+ * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+ * of values.
+ */
+var nativeObjectToString = objectProto.toString;
+
+/**
+ * Converts `value` to a string using `Object.prototype.toString`.
+ *
+ * @private
+ * @param {*} value The value to convert.
+ * @returns {string} Returns the converted string.
+ */
+function objectToString(value) {
+  return nativeObjectToString.call(value);
+}
+
+module.exports = objectToString;
 
-},{}],19:[function(require,module,exports){
+},{}],23:[function(require,module,exports){
 /**
  * Creates a unary function that invokes `func` with its argument transformed.
  *
@@ -4652,7 +4761,18 @@ function overArg(func, transform) {
 
 module.exports = overArg;
 
-},{}],20:[function(require,module,exports){
+},{}],24:[function(require,module,exports){
+var freeGlobal = require('./_freeGlobal');
+
+/** Detect free variable `self`. */
+var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
+
+/** Used as a reference to the global object. */
+var root = freeGlobal || freeSelf || Function('return this')();
+
+module.exports = root;
+
+},{"./_freeGlobal":19}],25:[function(require,module,exports){
 /**
  * Checks if `value` is object-like. A value is object-like if it's not `null`
  * and has a `typeof` result of "object".
@@ -4678,14 +4798,14 @@ module.exports = overArg;
  * // => false
  */
 function isObjectLike(value) {
-  return !!value && typeof value == 'object';
+  return value != null && typeof value == 'object';
 }
 
 module.exports = isObjectLike;
 
-},{}],21:[function(require,module,exports){
-var getPrototype = require('./_getPrototype'),
-    isHostObject = require('./_isHostObject'),
+},{}],26:[function(require,module,exports){
+var baseGetTag = require('./_baseGetTag'),
+    getPrototype = require('./_getPrototype'),
     isObjectLike = require('./isObjectLike');
 
 /** `Object#toString` result references. */
@@ -4704,13 +4824,6 @@ var hasOwnProperty = objectProto.hasOwnProperty;
 /** Used to infer the `Object` constructor. */
 var objectCtorString = funcToString.call(Object);
 
-/**
- * Used to resolve the
- * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
- * of values.
- */
-var objectToString = objectProto.toString;
-
 /**
  * Checks if `value` is a plain object, that is, an object created by the
  * `Object` constructor or one with a `[[Prototype]]` of `null`.
@@ -4740,8 +4853,7 @@ var objectToString = objectProto.toString;
  * // => true
  */
 function isPlainObject(value) {
-  if (!isObjectLike(value) ||
-      objectToString.call(value) != objectTag || isHostObject(value)) {
+  if (!isObjectLike(value) || baseGetTag(value) != objectTag) {
     return false;
   }
   var proto = getPrototype(value);
@@ -4749,33 +4861,64 @@ function isPlainObject(value) {
     return true;
   }
   var Ctor = hasOwnProperty.call(proto, 'constructor') && proto.constructor;
-  return (typeof Ctor == 'function' &&
-    Ctor instanceof Ctor && funcToString.call(Ctor) == objectCtorString);
+  return typeof Ctor == 'function' && Ctor instanceof Ctor &&
+    funcToString.call(Ctor) == objectCtorString;
 }
 
 module.exports = isPlainObject;
 
-},{"./_getPrototype":17,"./_isHostObject":18,"./isObjectLike":20}],22:[function(require,module,exports){
+},{"./_baseGetTag":18,"./_getPrototype":20,"./isObjectLike":25}],27:[function(require,module,exports){
+module.exports = require('./lib/index');
+
+},{"./lib/index":28}],28:[function(require,module,exports){
 (function (global){
-/* global window */
 'use strict';
 
-module.exports = require('./ponyfill')(global || window || this);
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _ponyfill = require('./ponyfill');
 
+var _ponyfill2 = _interopRequireDefault(_ponyfill);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+var root; /* global window */
+
+
+if (typeof self !== 'undefined') {
+  root = self;
+} else if (typeof window !== 'undefined') {
+  root = window;
+} else if (typeof global !== 'undefined') {
+  root = global;
+} else if (typeof module !== 'undefined') {
+  root = module;
+} else {
+  root = Function('return this')();
+}
+
+var result = (0, _ponyfill2['default'])(root);
+exports['default'] = result;
 }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{"./ponyfill":23}],23:[function(require,module,exports){
+},{"./ponyfill":29}],29:[function(require,module,exports){
 'use strict';
 
-module.exports = function symbolObservablePonyfill(root) {
+Object.defineProperty(exports, "__esModule", {
+	value: true
+});
+exports['default'] = symbolObservablePonyfill;
+function symbolObservablePonyfill(root) {
 	var result;
-	var Symbol = root.Symbol;
+	var _Symbol = root.Symbol;
 
-	if (typeof Symbol === 'function') {
-		if (Symbol.observable) {
-			result = Symbol.observable;
+	if (typeof _Symbol === 'function') {
+		if (_Symbol.observable) {
+			result = _Symbol.observable;
 		} else {
-			result = Symbol('observable');
-			Symbol.observable = result;
+			result = _Symbol('observable');
+			_Symbol.observable = result;
 		}
 	} else {
 		result = '@@observable';
@@ -4783,8 +4926,7 @@ module.exports = function symbolObservablePonyfill(root) {
 
 	return result;
 };
-
-},{}],24:[function(require,module,exports){
+},{}],30:[function(require,module,exports){
 'use strict';
 
 /**
@@ -4843,7 +4985,7 @@ module.exports = function symbolObservablePonyfill(root) {
 var Suggestions = require('./src/suggestions');
 window.Suggestions = module.exports = Suggestions;
 
-},{"./src/suggestions":27}],25:[function(require,module,exports){
+},{"./src/suggestions":33}],31:[function(require,module,exports){
 /*
  * Fuzzy
  * https://github.com/myork/fuzzy
@@ -4868,23 +5010,23 @@ if (typeof exports !== 'undefined') {
 // Return all elements of `array` that have a fuzzy
 // match against `pattern`.
 fuzzy.simpleFilter = function(pattern, array) {
-  return array.filter(function(string) {
-    return fuzzy.test(pattern, string);
+  return array.filter(function(str) {
+    return fuzzy.test(pattern, str);
   });
 };
 
-// Does `pattern` fuzzy match `string`?
-fuzzy.test = function(pattern, string) {
-  return fuzzy.match(pattern, string) !== null;
+// Does `pattern` fuzzy match `str`?
+fuzzy.test = function(pattern, str) {
+  return fuzzy.match(pattern, str) !== null;
 };
 
-// If `pattern` matches `string`, wrap each matching character
+// If `pattern` matches `str`, wrap each matching character
 // in `opts.pre` and `opts.post`. If no match, return null
-fuzzy.match = function(pattern, string, opts) {
+fuzzy.match = function(pattern, str, opts) {
   opts = opts || {};
   var patternIdx = 0
     , result = []
-    , len = string.length
+    , len = str.length
     , totalScore = 0
     , currScore = 0
     // prefix
@@ -4893,15 +5035,15 @@ fuzzy.match = function(pattern, string, opts) {
     , post = opts.post || ''
     // String to compare against. This might be a lowercase version of the
     // raw string
-    , compareString =  opts.caseSensitive && string || string.toLowerCase()
-    , ch, compareChar;
+    , compareString =  opts.caseSensitive && str || str.toLowerCase()
+    , ch;
 
   pattern = opts.caseSensitive && pattern || pattern.toLowerCase();
 
   // For each character in the string, either add it to the result
   // or wrap in template if it's the next string in the pattern
   for(var idx = 0; idx < len; idx++) {
-    ch = string[idx];
+    ch = str[idx];
     if(compareString[idx] === pattern[patternIdx]) {
       ch = pre + ch + post;
       patternIdx += 1;
@@ -4917,6 +5059,8 @@ fuzzy.match = function(pattern, string, opts) {
 
   // return rendered string if we have a match for every char
   if(patternIdx === pattern.length) {
+    // if the string is an exact match with pattern, totalScore should be maxed
+    totalScore = (compareString === pattern) ? Infinity : totalScore;
     return {rendered: result.join(''), score: totalScore};
   }
 
@@ -4948,6 +5092,12 @@ fuzzy.match = function(pattern, string, opts) {
 //      , extract: function(arg) { return arg.crying; }
 //    }
 fuzzy.filter = function(pattern, arr, opts) {
+  if(!arr || arr.length === 0) {
+    return [];
+  }
+  if (typeof pattern !== 'string') {
+    return arr;
+  }
   opts = opts || {};
   return arr
     .reduce(function(prev, element, idx, arr) {
@@ -4981,7 +5131,7 @@ fuzzy.filter = function(pattern, arr, opts) {
 }());
 
 
-},{}],26:[function(require,module,exports){
+},{}],32:[function(require,module,exports){
 'Use strict';
 
 var List = function(component) {
@@ -5068,7 +5218,7 @@ List.prototype.next = function() {
 
 module.exports = List;
 
-},{}],27:[function(require,module,exports){
+},{}],33:[function(require,module,exports){
 'use strict';
 
 var extend = require('xtend');
@@ -5258,7 +5408,7 @@ Suggestions.prototype.getItemValue = function(item) {
 
 module.exports = Suggestions;
 
-},{"./list":26,"fuzzy":25,"xtend":30}],28:[function(require,module,exports){
+},{"./list":32,"fuzzy":31,"xtend":36}],34:[function(require,module,exports){
 var each = require('turf-meta').coordEach;
 
 /**
@@ -5328,7 +5478,7 @@ module.exports = function(layer) {
     return extent;
 };
 
-},{"turf-meta":29}],29:[function(require,module,exports){
+},{"turf-meta":35}],35:[function(require,module,exports){
 /**
  * Lazily iterate over coordinates in any GeoJSON object, similar to
  * Array.forEach.
@@ -5468,7 +5618,7 @@ function propReduce(layer, callback, memo) {
 }
 module.exports.propReduce = propReduce;
 
-},{}],30:[function(require,module,exports){
+},{}],36:[function(require,module,exports){
 module.exports = extend
 
 var hasOwnProperty = Object.prototype.hasOwnProperty;
@@ -5489,7 +5639,7 @@ function extend() {
     return target
 }
 
-},{}],31:[function(require,module,exports){
+},{}],37:[function(require,module,exports){
 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
@@ -5580,12 +5730,11 @@ function setHoverMarker(feature) {
 
 function fetchDirections() {
   return function (dispatch, getState) {
-    var _getState = getState();
-
-    var api = _getState.api;
-    var accessToken = _getState.accessToken;
-    var routeIndex = _getState.routeIndex;
-    var profile = _getState.profile;
+    var _getState = getState(),
+        api = _getState.api,
+        accessToken = _getState.accessToken,
+        routeIndex = _getState.routeIndex,
+        profile = _getState.profile;
 
     var query = buildDirectionsQuery(getState);
 
@@ -5638,12 +5787,10 @@ function fetchDirections() {
  * @param {Function} state
  */
 function buildDirectionsQuery(state) {
-  var _state = state();
-
-  var origin = _state.origin;
-  var destination = _state.destination;
-  var waypoints = _state.waypoints;
-
+  var _state = state(),
+      origin = _state.origin,
+      destination = _state.destination,
+      waypoints = _state.waypoints;
 
   var query = [];
   query = query.concat(origin.geometry.coordinates);
@@ -5749,9 +5896,8 @@ function setRouteIndex(routeIndex) {
 
 function createOrigin(coordinates) {
   return function (dispatch, getState) {
-    var _getState2 = getState();
-
-    var destination = _getState2.destination;
+    var _getState2 = getState(),
+        destination = _getState2.destination;
 
     dispatch(originPoint(coordinates));
     if (destination.geometry) dispatch(fetchDirections());
@@ -5760,9 +5906,8 @@ function createOrigin(coordinates) {
 
 function createDestination(coordinates) {
   return function (dispatch, getState) {
-    var _getState3 = getState();
-
-    var origin = _getState3.origin;
+    var _getState3 = getState(),
+        origin = _getState3.origin;
 
     dispatch(destinationPoint(coordinates));
     if (origin.geometry) dispatch(fetchDirections());
@@ -5771,10 +5916,9 @@ function createDestination(coordinates) {
 
 function setProfile(profile) {
   return function (dispatch, getState) {
-    var _getState4 = getState();
-
-    var origin = _getState4.origin;
-    var destination = _getState4.destination;
+    var _getState4 = getState(),
+        origin = _getState4.origin,
+        destination = _getState4.destination;
 
     dispatch({ type: types.DIRECTIONS_PROFILE, profile: profile });
     dispatch(eventEmit('profile', { profile: profile }));
@@ -5821,10 +5965,9 @@ function setDestinationFromCoordinates(coords) {
 
 function addWaypoint(index, waypoint) {
   return function (dispatch, getState) {
-    var _getState5 = getState();
-
-    var destination = _getState5.destination;
-    var waypoints = _getState5.waypoints;
+    var _getState5 = getState(),
+        destination = _getState5.destination,
+        waypoints = _getState5.waypoints;
 
     waypoints.splice(index, 0, normalizeWaypoint(waypoint));
     dispatch(updateWaypoints(waypoints));
@@ -5834,10 +5977,9 @@ function addWaypoint(index, waypoint) {
 
 function setWaypoint(index, waypoint) {
   return function (dispatch, getState) {
-    var _getState6 = getState();
-
-    var destination = _getState6.destination;
-    var waypoints = _getState6.waypoints;
+    var _getState6 = getState(),
+        destination = _getState6.destination,
+        waypoints = _getState6.waypoints;
 
     waypoints[index] = normalizeWaypoint(waypoint);
     dispatch(updateWaypoints(waypoints));
@@ -5847,10 +5989,9 @@ function setWaypoint(index, waypoint) {
 
 function removeWaypoint(waypoint) {
   return function (dispatch, getState) {
-    var _getState7 = getState();
-
-    var destination = _getState7.destination;
-    var waypoints = _getState7.waypoints;
+    var _getState7 = getState(),
+        destination = _getState7.destination,
+        waypoints = _getState7.waypoints;
 
     waypoints = waypoints.filter(function (way) {
       return !_utils2.default.coordinateMatch(way, waypoint);
@@ -5863,9 +6004,8 @@ function removeWaypoint(waypoint) {
 
 function eventSubscribe(type, fn) {
   return function (dispatch, getState) {
-    var _getState8 = getState();
-
-    var events = _getState8.events;
+    var _getState8 = getState(),
+        events = _getState8.events;
 
     events[type] = events[type] || [];
     events[type].push(fn);
@@ -5880,10 +6020,8 @@ function eventEmit(type, data) {
   var _this = this;
 
   return function (dispatch, getState) {
-    var _getState9 = getState();
-
-    var events = _getState9.events;
-
+    var _getState9 = getState(),
+        events = _getState9.events;
 
     if (!events[type]) {
       return {
@@ -5900,7 +6038,7 @@ function eventEmit(type, data) {
   };
 }
 
-},{"../constants/action_types":32,"../utils":39}],32:[function(require,module,exports){
+},{"../constants/action_types":38,"../utils":45}],38:[function(require,module,exports){
 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
@@ -5923,10 +6061,10 @@ var ROUTE_INDEX = exports.ROUTE_INDEX = 'ROUTE_INDEX';
 var SET_OPTIONS = exports.SET_OPTIONS = 'SET_OPTIONS';
 var WAYPOINTS = exports.WAYPOINTS = 'WAYPOINTS';
 
-},{}],33:[function(require,module,exports){
+},{}],39:[function(require,module,exports){
 'use strict';
 
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
 
 var Typeahead = require('suggestions');
 var debounce = require('lodash.debounce');
@@ -6231,7 +6369,7 @@ Geocoder.prototype = {
 
 module.exports = Geocoder;
 
-},{"events":2,"lodash.debounce":3,"suggestions":24,"xtend":30}],34:[function(require,module,exports){
+},{"events":2,"lodash.debounce":3,"suggestions":30,"xtend":36}],40:[function(require,module,exports){
 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
@@ -6277,12 +6415,10 @@ var Inputs = function () {
   function Inputs(el, store, actions, map) {
     _classCallCheck(this, Inputs);
 
-    var _store$getState = store.getState();
-
-    var originQuery = _store$getState.originQuery;
-    var destinationQuery = _store$getState.destinationQuery;
-    var profile = _store$getState.profile;
-
+    var _store$getState = store.getState(),
+        originQuery = _store$getState.originQuery,
+        destinationQuery = _store$getState.destinationQuery,
+        profile = _store$getState.profile;
 
     el.innerHTML = tmpl({
       originQuery: originQuery,
@@ -6302,11 +6438,9 @@ var Inputs = function () {
   _createClass(Inputs, [{
     key: 'animateToCoordinates',
     value: function animateToCoordinates(mode, coords) {
-      var _store$getState2 = this.store.getState();
-
-      var origin = _store$getState2.origin;
-      var destination = _store$getState2.destination;
-
+      var _store$getState2 = this.store.getState(),
+          origin = _store$getState2.origin,
+          destination = _store$getState2.destination;
 
       if (origin.geometry && destination.geometry && !(0, _lodash4.default)(origin.geometry, destination.geometry)) {
 
@@ -6326,18 +6460,16 @@ var Inputs = function () {
     value: function onAdd() {
       var _this = this;
 
-      var _actions = this.actions;
-      var clearOrigin = _actions.clearOrigin;
-      var clearDestination = _actions.clearDestination;
-      var createOrigin = _actions.createOrigin;
-      var createDestination = _actions.createDestination;
-      var setProfile = _actions.setProfile;
-      var reverse = _actions.reverse;
-
-      var _store$getState3 = this.store.getState();
-
-      var geocoder = _store$getState3.geocoder;
+      var _actions = this.actions,
+          clearOrigin = _actions.clearOrigin,
+          clearDestination = _actions.clearDestination,
+          createOrigin = _actions.createOrigin,
+          createDestination = _actions.createDestination,
+          setProfile = _actions.setProfile,
+          reverse = _actions.reverse;
 
+      var _store$getState3 = this.store.getState(),
+          geocoder = _store$getState3.geocoder;
 
       this.originInput = new _geocoder2.default(Object.assign({}, {
         flyTo: false,
@@ -6381,10 +6513,9 @@ var Inputs = function () {
 
       // Reversing Origin / Destination
       this.container.querySelector('.js-reverse-inputs').addEventListener('click', function () {
-        var _store$getState4 = _this.store.getState();
-
-        var origin = _store$getState4.origin;
-        var destination = _store$getState4.destination;
+        var _store$getState4 = _this.store.getState(),
+            origin = _store$getState4.origin,
+            destination = _store$getState4.destination;
 
         if (origin) _this.actions.queryDestination(origin.geometry.coordinates);
         if (destination) _this.actions.queryOrigin(destination.geometry.coordinates);
@@ -6397,13 +6528,11 @@ var Inputs = function () {
       var _this2 = this;
 
       this.store.subscribe(function () {
-        var _store$getState5 = _this2.store.getState();
-
-        var originQuery = _store$getState5.originQuery;
-        var destinationQuery = _store$getState5.destinationQuery;
-        var originQueryCoordinates = _store$getState5.originQueryCoordinates;
-        var destinationQueryCoordinates = _store$getState5.destinationQueryCoordinates;
-
+        var _store$getState5 = _this2.store.getState(),
+            originQuery = _store$getState5.originQuery,
+            destinationQuery = _store$getState5.destinationQuery,
+            originQueryCoordinates = _store$getState5.originQueryCoordinates,
+            destinationQueryCoordinates = _store$getState5.destinationQueryCoordinates;
 
         if (originQuery) {
           _this2.originInput.query(originQuery);
@@ -6435,7 +6564,7 @@ var Inputs = function () {
 
 exports.default = Inputs;
 
-},{"./geocoder":33,"lodash.isequal":4,"lodash.template":5,"turf-extent":28}],35:[function(require,module,exports){
+},{"./geocoder":39,"lodash.isequal":4,"lodash.template":5,"turf-extent":34}],41:[function(require,module,exports){
 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
@@ -6492,16 +6621,15 @@ var Instructions = function () {
       var _this = this;
 
       this.store.subscribe(function () {
-        var _actions = _this.actions;
-        var hoverMarker = _actions.hoverMarker;
-        var setRouteIndex = _actions.setRouteIndex;
-
-        var _store$getState = _this.store.getState();
+        var _actions = _this.actions,
+            hoverMarker = _actions.hoverMarker,
+            setRouteIndex = _actions.setRouteIndex;
 
-        var routeIndex = _store$getState.routeIndex;
-        var unit = _store$getState.unit;
-        var directions = _store$getState.directions;
-        var error = _store$getState.error;
+        var _store$getState = _this.store.getState(),
+            routeIndex = _store$getState.routeIndex,
+            unit = _store$getState.unit,
+            directions = _store$getState.directions,
+            error = _store$getState.error;
 
         var shouldRender = !(0, _lodash4.default)(directions[routeIndex], _this.directions);
 
@@ -6561,7 +6689,7 @@ var Instructions = function () {
 
 exports.default = Instructions;
 
-},{"../utils":39,"lodash.isequal":4,"lodash.template":5}],36:[function(require,module,exports){
+},{"../utils":45,"lodash.isequal":4,"lodash.template":5}],42:[function(require,module,exports){
 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
@@ -6655,11 +6783,9 @@ var Directions = function () {
 
       this._map = map;
 
-      var _store$getState = store.getState();
-
-      var container = _store$getState.container;
-      var controls = _store$getState.controls;
-
+      var _store$getState = store.getState(),
+          container = _store$getState.container,
+          controls = _store$getState.controls;
 
       this.container = container ? typeof container === 'string' ? document.getElementById(container) : container : this._map.getContainer();
 
@@ -6703,14 +6829,14 @@ var Directions = function () {
     value: function mapState() {
       var _this2 = this;
 
-      var _store$getState2 = store.getState();
-
-      var profile = _store$getState2.profile;
-      var styles = _store$getState2.styles;
-      var interactive = _store$getState2.interactive;
+      var _store$getState2 = store.getState(),
+          profile = _store$getState2.profile,
+          styles = _store$getState2.styles,
+          interactive = _store$getState2.interactive;
 
       // Emit any default or option set config
 
+
       this.actions.eventEmit('profile', { profile: profile });
 
       var geojson = {
@@ -6748,14 +6874,12 @@ var Directions = function () {
       var _this3 = this;
 
       store.subscribe(function () {
-        var _store$getState3 = store.getState();
-
-        var origin = _store$getState3.origin;
-        var destination = _store$getState3.destination;
-        var hoverMarker = _store$getState3.hoverMarker;
-        var directions = _store$getState3.directions;
-        var routeIndex = _store$getState3.routeIndex;
-
+        var _store$getState3 = store.getState(),
+            origin = _store$getState3.origin,
+            destination = _store$getState3.destination,
+            hoverMarker = _store$getState3.hoverMarker,
+            directions = _store$getState3.directions,
+            routeIndex = _store$getState3.routeIndex;
 
         var geojson = {
           type: 'FeatureCollection',
@@ -6809,9 +6933,8 @@ var Directions = function () {
     value: function _onClick(e) {
       var _this4 = this;
 
-      var _store$getState4 = store.getState();
-
-      var origin = _store$getState4.origin;
+      var _store$getState4 = store.getState(),
+          origin = _store$getState4.origin;
 
       var coords = [e.lngLat.lng, e.lngLat.lat];
 
@@ -6847,10 +6970,8 @@ var Directions = function () {
     value: function _move(e) {
       var _this5 = this;
 
-      var _store$getState5 = store.getState();
-
-      var hoverMarker = _store$getState5.hoverMarker;
-
+      var _store$getState5 = store.getState(),
+          hoverMarker = _store$getState5.hoverMarker;
 
       var features = this._map.queryRenderedFeatures(e.point, {
         layers: ['directions-route-line-alt', 'directions-route-line', 'directions-origin-point', 'directions-destination-point', 'directions-hover-point']
@@ -6911,12 +7032,10 @@ var Directions = function () {
     value: function _onDragUp() {
       if (!this.isDragging) return;
 
-      var _store$getState6 = store.getState();
-
-      var hoverMarker = _store$getState6.hoverMarker;
-      var origin = _store$getState6.origin;
-      var destination = _store$getState6.destination;
-
+      var _store$getState6 = store.getState(),
+          hoverMarker = _store$getState6.hoverMarker,
+          origin = _store$getState6.origin,
+          destination = _store$getState6.destination;
 
       switch (this.isDragging.layer.id) {
         case 'directions-origin-point':
@@ -7088,9 +7207,8 @@ var Directions = function () {
   }, {
     key: 'removeWaypoint',
     value: function removeWaypoint(index) {
-      var _store$getState7 = store.getState();
-
-      var waypoints = _store$getState7.waypoints;
+      var _store$getState7 = store.getState(),
+          waypoints = _store$getState7.waypoints;
 
       this.actions.removeWaypoint(waypoints[index]);
       return this;
@@ -7135,7 +7253,7 @@ var Directions = function () {
 
 exports.default = Directions;
 
-},{"./actions":31,"./controls/inputs":34,"./controls/instructions":35,"./directions_style":37,"./reducers":38,"./utils":39,"polyline":8,"redux":15,"redux-thunk":9}],37:[function(require,module,exports){
+},{"./actions":37,"./controls/inputs":40,"./controls/instructions":41,"./directions_style":43,"./reducers":44,"./utils":45,"polyline":8,"redux":15,"redux-thunk":9}],43:[function(require,module,exports){
 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
@@ -7251,7 +7369,7 @@ var style = [{
 
 exports.default = style;
 
-},{}],38:[function(require,module,exports){
+},{}],44:[function(require,module,exports){
 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
@@ -7304,7 +7422,7 @@ var initialState = {
 };
 
 function data() {
-  var state = arguments.length <= 0 || arguments[0] === undefined ? initialState : arguments[0];
+  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
   var action = arguments[1];
 
   switch (action.type) {
@@ -7396,7 +7514,7 @@ function data() {
 
 exports.default = data;
 
-},{"../constants/action_types.js":32}],39:[function(require,module,exports){
+},{"../constants/action_types.js":38}],45:[function(require,module,exports){
 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
diff --git a/example/index.html b/example/index.html
deleted file mode 100644
index e3c3855..0000000
--- a/example/index.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title></title>
-    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <link href='../dist/mapbox-gl-directions.css' rel='stylesheet' />
-    <link href='https://api.mapbox.com/mapbox-gl-js/v0.22.1/mapbox-gl.css' rel='stylesheet' />
-    <style>
-      body { margin:0; padding:0; }
-      .map {
-        position:absolute;
-        width:100%;
-        height:100%;
-        top:0;
-        right:0;
-        }
-    </style>
-  </head>
-  <body>
-    <div id='map' class='map'></div>
-    <div id='directions'></div>
-    <script src='https://api.mapbox.com/mapbox-gl-js/v0.22.1/mapbox-gl.js'></script>
-    <script src='bundle.js'></script>
-  </body>
-</html>
diff --git a/example/index.js b/example/index.js
index b4adb37..1655d94 100644
--- a/example/index.js
+++ b/example/index.js
@@ -1,26 +1,38 @@
 'use strict';
-/* global mapboxgl */
-
-var Directions = require('../index');
-
+var mapboxgl = require('mapbox-gl');
+var MapboxGeocoder = require('../src/index');
+var insertCss = require('insert-css');
+var fs = require('fs');
 mapboxgl.accessToken = window.localStorage.getItem('MapboxAccessToken');
 
+insertCss(fs.readFileSync('./node_modules/mapbox-gl/dist/mapbox-gl.css', 'utf8'));
+var mapDiv = document.body.appendChild(document.createElement('div'));
+mapDiv.style = 'position:absolute;top:0;right:0;left:0;bottom:0;';
+
 var map = new mapboxgl.Map({
   hash: true,
-  container: 'map',
+  container: mapDiv,
   style: 'mapbox://styles/mapbox/streets-v9',
   center: [-79.4512, 43.6568],
   zoom: 13
 });
 
-var directions = new mapboxgl.Directions({
+// ui
+// var button = document.body.appendChild(document.createElement('button'));
+// button.style = 'position:absolute;top:10px;left:10px;z-index:10;';
+var button = document.createElement('button');
+button.style = 'z-index:10;';
+button.textContent = 'click me';
+
+// directions
+var MapboxDirections = require('../src/index');
+var directions = new MapboxDirections({
+  accessToken: window.localStorage.getItem('MapboxAccessToken'),
   unit: 'metric',
   profile: 'cycling',
   container: 'directions'
 });
-
-var button = document.createElement('button');
-button.textContent = 'click me';
+window.directions = directions;
 
 map.getContainer().querySelector('.mapboxgl-ctrl-bottom-left').appendChild(button);
 map.addControl(directions);
diff --git a/package.json b/package.json
index 717abcc..0e2ff7d 100644
--- a/package.json
+++ b/package.json
@@ -12,10 +12,10 @@
   "scripts": {
     "prepublish": "npm run build",
     "start": "NODE_ENV=development budo example/index.js:example/bundle.js --live",
-    "build": "NODE_ENV=production browserify -s mapboxDirections index.js > dist/mapbox-gl-directions.js",
+    "build": "NODE_ENV=production browserify -s MapboxDirections lib/index.js > dist/mapbox-gl-directions.js",
     "test": "NODE_ENV=test npm run lint && browserify test/index.js | smokestack -b firefox | tap-status",
     "docs": "documentation build --format=md > API.md",
-    "lint": "eslint --no-eslintrc -c .eslintrc index.js src"
+    "lint": "eslint --no-eslintrc -c .eslintrc src"
   },
   "repository": {
     "type": "git",
@@ -45,9 +45,10 @@
     "budo": "^8.3.0",
     "documentation": "^4.0.0-beta5",
     "eslint": "^2.13.1",
+    "insert-css": "^2.0.0",
     "json-loader": "0.5.4",
     "lodash.once": "^4.0.0",
-    "mapbox-gl": "^0.22.1",
+    "mapbox-gl": "^0.27.0",
     "smokestack": "^3.3.1",
     "tap-status": "^1.0.1",
     "tape": "^4.6.0",
diff --git a/src/directions.js b/src/directions.js
index 14a6a3d..7ab7f9c 100644
--- a/src/directions.js
+++ b/src/directions.js
@@ -20,38 +20,41 @@ export default class Directions {
   constructor(options) {
     this.actions = bindActionCreators(actions, store.dispatch);
     this.actions.setOptions(options || {});
+    this.options = options || {};
 
     this.onDragDown = this._onDragDown.bind(this);
     this.onDragMove = this._onDragMove.bind(this);
     this.onDragUp = this._onDragUp.bind(this);
     this.move = this._move.bind(this);
     this.onClick = this._onClick.bind(this);
-  }
-
-  addTo(map) {
-      this._map = map;
-      var container = this._container = this.onAdd(map);
-      if (this.options && this.options.position) {
-          var pos = this.options.position;
-          var corner = map._controlCorners[pos];
-          container.className += ' mapboxgl-ctrl';
-          if (pos.indexOf('bottom') !== -1) {
-              corner.insertBefore(container, corner.firstChild);
-          } else {
-              corner.appendChild(container);
-          }
-      }
 
-      return this;
+    console.log('main constructor', this);
   }
 
+  // addTo(map) {
+  //     this._map = map;
+  //     var container = this._container = this.onAdd(map);
+  //     if (this.options && this.options.position) {
+  //         var pos = this.options.position;
+  //         var corner = map._controlCorners[pos];
+  //         container.className += ' mapboxgl-ctrl';
+  //         if (pos.indexOf('bottom') !== -1) {
+  //             corner.insertBefore(container, corner.firstChild);
+  //         } else {
+  //             corner.appendChild(container);
+  //         }
+  //     }
+
+  //     return this;
+  // }
+
   onAdd(map) {
     this._map = map;
 
     const { container, controls } = store.getState();
 
-    this.container = container ? typeof container === 'string' ?
-      document.getElementById(container) : container : this._map.getContainer();
+    // this.container = container ? typeof container === 'string' ?
+    //   document.getElementById(container) : container : this._map.getContainer();
 
     // Add controls to the page
     const inputEl = document.createElement('div');
diff --git a/index.js b/src/index.js
similarity index 90%
rename from index.js
rename to src/index.js
index a4ffc7a..39b89e3 100644
--- a/index.js
+++ b/src/index.js
@@ -23,10 +23,6 @@
  * map.addControl(directions);
  * @return {Directions} `this`
  */
-import Directions from './src/directions';
+import MapboxDirections from './directions';
 
-if (window.mapboxgl) {
-  mapboxgl.Directions = Directions;
-} else if (typeof module !== 'undefined') {
-  module.exports = Directions;
-}
+module.exports = MapboxDirections;
\ No newline at end of file

From f11514e48fb2715c1dc71d7af2f7b9598df893d9 Mon Sep 17 00:00:00 2001
From: mapsam <matthews.sam@gmail.com>
Date: Thu, 17 Nov 2016 13:36:30 -0800
Subject: [PATCH 02/17] remove container

---
 example/index.js         | 11 +++++++----
 src/actions/index.js     |  1 +
 src/controls/geocoder.js | 32 ++++++++++----------------------
 src/controls/inputs.js   |  8 ++++++--
 src/directions.js        | 16 +++++++++-------
 test/index.js            |  2 +-
 6 files changed, 34 insertions(+), 36 deletions(-)

diff --git a/example/index.js b/example/index.js
index 1655d94..b853fec 100644
--- a/example/index.js
+++ b/example/index.js
@@ -5,11 +5,15 @@ var insertCss = require('insert-css');
 var fs = require('fs');
 mapboxgl.accessToken = window.localStorage.getItem('MapboxAccessToken');
 
+// var directionsDiv = document.body.appendChild(document.createElement('div'));
+// directionsDiv.id = 'directions';
+
+insertCss(fs.readFileSync('./dist/mapbox-gl-directions.css', 'utf8'));
 insertCss(fs.readFileSync('./node_modules/mapbox-gl/dist/mapbox-gl.css', 'utf8'));
 var mapDiv = document.body.appendChild(document.createElement('div'));
 mapDiv.style = 'position:absolute;top:0;right:0;left:0;bottom:0;';
 
-var map = new mapboxgl.Map({
+var map = window.map = new mapboxgl.Map({
   hash: true,
   container: mapDiv,
   style: 'mapbox://styles/mapbox/streets-v9',
@@ -18,8 +22,6 @@ var map = new mapboxgl.Map({
 });
 
 // ui
-// var button = document.body.appendChild(document.createElement('button'));
-// button.style = 'position:absolute;top:10px;left:10px;z-index:10;';
 var button = document.createElement('button');
 button.style = 'z-index:10;';
 button.textContent = 'click me';
@@ -30,7 +32,8 @@ var directions = new MapboxDirections({
   accessToken: window.localStorage.getItem('MapboxAccessToken'),
   unit: 'metric',
   profile: 'cycling',
-  container: 'directions'
+  container: 'directions',
+  instructions: false
 });
 window.directions = directions;
 
diff --git a/src/actions/index.js b/src/actions/index.js
index f55f960..9bd50cc 100644
--- a/src/actions/index.js
+++ b/src/actions/index.js
@@ -142,6 +142,7 @@ function setError(error) {
 }
 
 export function queryOrigin(query) {
+  console.log('querying origin');
   return {
     type: types.ORIGIN_QUERY,
     query
diff --git a/src/controls/geocoder.js b/src/controls/geocoder.js
index 5adfa4e..9c31031 100644
--- a/src/controls/geocoder.js
+++ b/src/controls/geocoder.js
@@ -5,6 +5,8 @@ var debounce = require('lodash.debounce');
 var extend = require('xtend');
 var EventEmitter = require('events').EventEmitter;
 
+import utils from '../utils'
+
 // Mapbox Geocoder version
 var API = 'https://api.mapbox.com/geocoding/v5/mapbox.places/';
 
@@ -36,30 +38,14 @@ function Geocoder(options) {
 Geocoder.prototype = {
 
   options: {
-    position: 'top-left',
     placeholder: 'Search',
     zoom: 16,
     flyTo: true
   },
 
-  addTo: function (map) {
-      this._map = map;
-      var container = this._container = this.onAdd(map);
-      if (this.options && this.options.position) {
-          var pos = this.options.position;
-          var corner = map._controlCorners[pos];
-          container.className += ' mapboxgl-ctrl';
-          if (pos.indexOf('bottom') !== -1) {
-              corner.insertBefore(container, corner.firstChild);
-          } else {
-              corner.appendChild(container);
-          }
-      }
-
-      return this;
-  },
-
   onAdd: function(map) {
+    this._map = map;
+
     this.request = new XMLHttpRequest();
 
     this.container = this.options.container ?
@@ -141,6 +127,8 @@ Geocoder.prototype = {
     this._loadingEl.classList.add('active');
     this.fire('loading');
 
+    console.log('geocoder this', this);
+
     var options = [];
     if (this.options.proximity) options.push('proximity=' + this.options.proximity.join());
     if (this.options.bbox) options.push('bbox=' + this.options.bbox.join());
@@ -199,8 +187,8 @@ Geocoder.prototype = {
     if (!input) return;
     if (typeof input === 'object' && input.length) {
       input = [
-        mapboxgl.util.wrap(input[0], -180, 180),
-        mapboxgl.util.wrap(input[1], -180, 180)
+        utils.wrap(input[0]),
+        utils.wrap(input[1])
       ].join();
     }
 
@@ -218,8 +206,8 @@ Geocoder.prototype = {
     if (!input) return;
     if (typeof input === 'object' && input.length) {
       input = [
-        mapboxgl.util.wrap(input[0], -180, 180),
-        mapboxgl.util.wrap(input[1], -180, 180)
+        utils.wrap(input[0]),
+        utils.wrap(input[1])
       ].join();
     }
 
diff --git a/src/controls/inputs.js b/src/controls/inputs.js
index ba6aa0e..7a79b51 100644
--- a/src/controls/inputs.js
+++ b/src/controls/inputs.js
@@ -65,10 +65,13 @@ export default class Inputs {
 
     const { geocoder } = this.store.getState();
 
+    console.log('geocoder from state', geocoder);
+
     this.originInput = new Geocoder(Object.assign({}, {
       flyTo: false,
       placeholder: 'Choose a starting place',
-      container: this.container.querySelector('#mapbox-directions-origin-input')
+      container: this.container.querySelector('#mapbox-directions-origin-input'),
+      accessToken: this.accessToken
     }, geocoder));
 
     this._map.addControl(this.originInput);
@@ -76,7 +79,8 @@ export default class Inputs {
     this.destinationInput = new Geocoder(Object.assign({}, {
       flyTo: false,
       placeholder: 'Choose destination',
-      container: this.container.querySelector('#mapbox-directions-destination-input')
+      container: this.container.querySelector('#mapbox-directions-destination-input'),
+      accessToken: this.accessToken
     }, geocoder));
 
     this._map.addControl(this.destinationInput);
diff --git a/src/directions.js b/src/directions.js
index 7ab7f9c..9c2f75d 100644
--- a/src/directions.js
+++ b/src/directions.js
@@ -27,8 +27,6 @@ export default class Directions {
     this.onDragUp = this._onDragUp.bind(this);
     this.move = this._move.bind(this);
     this.onClick = this._onClick.bind(this);
-
-    console.log('main constructor', this);
   }
 
   // addTo(map) {
@@ -50,11 +48,12 @@ export default class Directions {
 
   onAdd(map) {
     this._map = map;
+    console.log(this._map);
 
-    const { container, controls } = store.getState();
+    const { controls } = store.getState();
 
-    // this.container = container ? typeof container === 'string' ?
-    //   document.getElementById(container) : container : this._map.getContainer();
+    var el = document.createElement('div');
+    el.className = 'mapboxgl-ctrl-directions mapboxgl-ctrl';
 
     // Add controls to the page
     const inputEl = document.createElement('div');
@@ -69,12 +68,14 @@ export default class Directions {
       setRouteIndex: this.actions.setRouteIndex
     }, this._map);
 
-    if (controls.inputs) this.container.appendChild(inputEl);
-    if (controls.instructions) this.container.appendChild(directionsEl);
+    if (controls.inputs) el.appendChild(inputEl);
+    if (controls.instructions) el.appendChild(directionsEl);
 
     this.subscribedActions();
     if (this._map.loaded()) this.mapState()
     else this._map.on('load', () => this.mapState());
+
+    return el;
   }
 
   /**
@@ -357,6 +358,7 @@ export default class Directions {
    */
   setOrigin(query) {
     if (typeof query === 'string') {
+      console.log('this is a query');
       this.actions.queryOrigin(query);
     } else {
       this.actions.setOriginFromCoordinates(query);
diff --git a/test/index.js b/test/index.js
index f0a0c4c..e790dcd 100644
--- a/test/index.js
+++ b/test/index.js
@@ -2,7 +2,7 @@
 
 const test = require('tape');
 window.mapboxgl = require('mapbox-gl');
-require('../index');
+require('../src/index');
 
 mapboxgl.accessToken = process.env.MapboxAccessToken;
 

From 01f32c26c28ef6c2cac0c8e3fb1dfc5e6c11ba60 Mon Sep 17 00:00:00 2001
From: mapsam <matthews.sam@gmail.com>
Date: Thu, 17 Nov 2016 15:48:51 -0800
Subject: [PATCH 03/17] make 0.27.0 work

---
 .gitignore                             |   1 +
 dist/mapbox-gl-directions.js           | 251 ++++++++++++-------------
 example/index.js                       |  12 +-
 package.json                           |   5 +-
 src/controls/geocoder.js               |  10 -
 src/controls/inputs.js                 |  16 +-
 src/directions.js                      |  21 +--
 src/index.js                           |   1 -
 {dist => src}/mapbox-gl-directions.css |  19 +-
 src/templates/instructions.html        |  48 ++---
 test/test.directions.js                |   2 +
 test/test.inputs.js                    |   3 +-
 test/test.instructions.js              |   3 +-
 test/test.options.js                   |   3 +-
 14 files changed, 183 insertions(+), 212 deletions(-)
 rename {dist => src}/mapbox-gl-directions.css (98%)

diff --git a/.gitignore b/.gitignore
index 4f19409..09b5414 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 env.test.sh
 node_modules/
+dist/
\ No newline at end of file
diff --git a/dist/mapbox-gl-directions.js b/dist/mapbox-gl-directions.js
index 3a383b0..22c8611 100644
--- a/dist/mapbox-gl-directions.js
+++ b/dist/mapbox-gl-directions.js
@@ -1,43 +1,4 @@
-(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.mapboxDirections = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
-'use strict';
-
-var _directions = require('./src/directions');
-
-var _directions2 = _interopRequireDefault(_directions);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-if (window.mapboxgl) {
-  mapboxgl.Directions = _directions2.default;
-} else if (typeof module !== 'undefined') {
-  module.exports = _directions2.default;
-} /**
-   * A directions component using Mapbox Directions APi
-   * @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 {Boolean} [options.interactive=true] Enable/Disable mouse or touch interactivity from the plugin
-   * @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`
-   * @param {string|Element} options.container HTML element to initialize the map in (or element id as string). If no container is passed map.getContainer() is used instead.
-   * @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.
-   * @param {Boolean} [options.controls.instructions=true] Hide or display the instructions control.
-   * @example
-   * var directions = new mapboxgl.Directions({
-   *   container: 'directions',
-   *   unit: 'metric',
-   *   profile: 'walking'
-   * });
-   *
-   * map.addControl(directions);
-   * @return {Directions} `this`
-   */
-
-},{"./src/directions":42}],2:[function(require,module,exports){
+(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.MapboxDirections = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
 // Copyright Joyent, Inc. and other Node contributors.
 //
 // Permission is hereby granted, free of charge, to any person obtaining a
@@ -341,7 +302,7 @@ function isUndefined(arg) {
   return arg === void 0;
 }
 
-},{}],3:[function(require,module,exports){
+},{}],2:[function(require,module,exports){
 (function (global){
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -722,7 +683,7 @@ function toNumber(value) {
 module.exports = debounce;
 
 }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{}],4:[function(require,module,exports){
+},{}],3:[function(require,module,exports){
 (function (global){
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -2375,7 +2336,7 @@ function keys(object) {
 module.exports = isEqual;
 
 }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{}],5:[function(require,module,exports){
+},{}],4:[function(require,module,exports){
 (function (global){
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -3511,7 +3472,7 @@ var attempt = baseRest(function(func, args) {
 module.exports = template;
 
 }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{"lodash._reinterpolate":6,"lodash.templatesettings":7}],6:[function(require,module,exports){
+},{"lodash._reinterpolate":5,"lodash.templatesettings":6}],5:[function(require,module,exports){
 /**
  * lodash 3.0.0 (Custom Build) <https://lodash.com/>
  * Build: `lodash modern modularize exports="npm" -o ./`
@@ -3526,7 +3487,7 @@ var reInterpolate = /<%=([\s\S]+?)%>/g;
 
 module.exports = reInterpolate;
 
-},{}],7:[function(require,module,exports){
+},{}],6:[function(require,module,exports){
 (function (global){
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -3810,7 +3771,7 @@ function escape(string) {
 module.exports = templateSettings;
 
 }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{"lodash._reinterpolate":6}],8:[function(require,module,exports){
+},{"lodash._reinterpolate":5}],7:[function(require,module,exports){
 'use strict';
 
 /**
@@ -3965,7 +3926,7 @@ if (typeof module === 'object' && module.exports) {
     module.exports = polyline;
 }
 
-},{}],9:[function(require,module,exports){
+},{}],8:[function(require,module,exports){
 'use strict';
 
 exports.__esModule = true;
@@ -3989,7 +3950,7 @@ var thunk = createThunkMiddleware();
 thunk.withExtraArgument = createThunkMiddleware;
 
 exports['default'] = thunk;
-},{}],10:[function(require,module,exports){
+},{}],9:[function(require,module,exports){
 'use strict';
 
 exports.__esModule = true;
@@ -4048,7 +4009,7 @@ function applyMiddleware() {
     };
   };
 }
-},{"./compose":13}],11:[function(require,module,exports){
+},{"./compose":12}],10:[function(require,module,exports){
 'use strict';
 
 exports.__esModule = true;
@@ -4100,7 +4061,7 @@ function bindActionCreators(actionCreators, dispatch) {
   }
   return boundActionCreators;
 }
-},{}],12:[function(require,module,exports){
+},{}],11:[function(require,module,exports){
 'use strict';
 
 exports.__esModule = true;
@@ -4243,7 +4204,7 @@ function combineReducers(reducers) {
     return hasChanged ? nextState : state;
   };
 }
-},{"./createStore":14,"./utils/warning":16,"lodash/isPlainObject":26}],13:[function(require,module,exports){
+},{"./createStore":13,"./utils/warning":15,"lodash/isPlainObject":25}],12:[function(require,module,exports){
 "use strict";
 
 exports.__esModule = true;
@@ -4282,7 +4243,7 @@ function compose() {
     }, last.apply(undefined, arguments));
   };
 }
-},{}],14:[function(require,module,exports){
+},{}],13:[function(require,module,exports){
 'use strict';
 
 exports.__esModule = true;
@@ -4544,7 +4505,7 @@ function createStore(reducer, preloadedState, enhancer) {
     replaceReducer: replaceReducer
   }, _ref2[_symbolObservable2['default']] = observable, _ref2;
 }
-},{"lodash/isPlainObject":26,"symbol-observable":27}],15:[function(require,module,exports){
+},{"lodash/isPlainObject":25,"symbol-observable":26}],14:[function(require,module,exports){
 'use strict';
 
 exports.__esModule = true;
@@ -4591,7 +4552,7 @@ exports.combineReducers = _combineReducers2['default'];
 exports.bindActionCreators = _bindActionCreators2['default'];
 exports.applyMiddleware = _applyMiddleware2['default'];
 exports.compose = _compose2['default'];
-},{"./applyMiddleware":10,"./bindActionCreators":11,"./combineReducers":12,"./compose":13,"./createStore":14,"./utils/warning":16}],16:[function(require,module,exports){
+},{"./applyMiddleware":9,"./bindActionCreators":10,"./combineReducers":11,"./compose":12,"./createStore":13,"./utils/warning":15}],15:[function(require,module,exports){
 'use strict';
 
 exports.__esModule = true;
@@ -4617,7 +4578,7 @@ function warning(message) {
   } catch (e) {}
   /* eslint-enable no-empty */
 }
-},{}],17:[function(require,module,exports){
+},{}],16:[function(require,module,exports){
 var root = require('./_root');
 
 /** Built-in value references. */
@@ -4625,7 +4586,7 @@ var Symbol = root.Symbol;
 
 module.exports = Symbol;
 
-},{"./_root":24}],18:[function(require,module,exports){
+},{"./_root":23}],17:[function(require,module,exports){
 var Symbol = require('./_Symbol'),
     getRawTag = require('./_getRawTag'),
     objectToString = require('./_objectToString');
@@ -4656,7 +4617,7 @@ function baseGetTag(value) {
 
 module.exports = baseGetTag;
 
-},{"./_Symbol":17,"./_getRawTag":21,"./_objectToString":22}],19:[function(require,module,exports){
+},{"./_Symbol":16,"./_getRawTag":20,"./_objectToString":21}],18:[function(require,module,exports){
 (function (global){
 /** Detect free variable `global` from Node.js. */
 var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;
@@ -4664,7 +4625,7 @@ var freeGlobal = typeof global == 'object' && global && global.Object === Object
 module.exports = freeGlobal;
 
 }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{}],20:[function(require,module,exports){
+},{}],19:[function(require,module,exports){
 var overArg = require('./_overArg');
 
 /** Built-in value references. */
@@ -4672,7 +4633,7 @@ var getPrototype = overArg(Object.getPrototypeOf, Object);
 
 module.exports = getPrototype;
 
-},{"./_overArg":23}],21:[function(require,module,exports){
+},{"./_overArg":22}],20:[function(require,module,exports){
 var Symbol = require('./_Symbol');
 
 /** Used for built-in method references. */
@@ -4720,7 +4681,7 @@ function getRawTag(value) {
 
 module.exports = getRawTag;
 
-},{"./_Symbol":17}],22:[function(require,module,exports){
+},{"./_Symbol":16}],21:[function(require,module,exports){
 /** Used for built-in method references. */
 var objectProto = Object.prototype;
 
@@ -4744,7 +4705,7 @@ function objectToString(value) {
 
 module.exports = objectToString;
 
-},{}],23:[function(require,module,exports){
+},{}],22:[function(require,module,exports){
 /**
  * Creates a unary function that invokes `func` with its argument transformed.
  *
@@ -4761,7 +4722,7 @@ function overArg(func, transform) {
 
 module.exports = overArg;
 
-},{}],24:[function(require,module,exports){
+},{}],23:[function(require,module,exports){
 var freeGlobal = require('./_freeGlobal');
 
 /** Detect free variable `self`. */
@@ -4772,7 +4733,7 @@ var root = freeGlobal || freeSelf || Function('return this')();
 
 module.exports = root;
 
-},{"./_freeGlobal":19}],25:[function(require,module,exports){
+},{"./_freeGlobal":18}],24:[function(require,module,exports){
 /**
  * Checks if `value` is object-like. A value is object-like if it's not `null`
  * and has a `typeof` result of "object".
@@ -4803,7 +4764,7 @@ function isObjectLike(value) {
 
 module.exports = isObjectLike;
 
-},{}],26:[function(require,module,exports){
+},{}],25:[function(require,module,exports){
 var baseGetTag = require('./_baseGetTag'),
     getPrototype = require('./_getPrototype'),
     isObjectLike = require('./isObjectLike');
@@ -4867,10 +4828,10 @@ function isPlainObject(value) {
 
 module.exports = isPlainObject;
 
-},{"./_baseGetTag":18,"./_getPrototype":20,"./isObjectLike":25}],27:[function(require,module,exports){
+},{"./_baseGetTag":17,"./_getPrototype":19,"./isObjectLike":24}],26:[function(require,module,exports){
 module.exports = require('./lib/index');
 
-},{"./lib/index":28}],28:[function(require,module,exports){
+},{"./lib/index":27}],27:[function(require,module,exports){
 (function (global){
 'use strict';
 
@@ -4902,7 +4863,7 @@ if (typeof self !== 'undefined') {
 var result = (0, _ponyfill2['default'])(root);
 exports['default'] = result;
 }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{"./ponyfill":29}],29:[function(require,module,exports){
+},{"./ponyfill":28}],28:[function(require,module,exports){
 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
@@ -4926,7 +4887,7 @@ function symbolObservablePonyfill(root) {
 
 	return result;
 };
-},{}],30:[function(require,module,exports){
+},{}],29:[function(require,module,exports){
 'use strict';
 
 /**
@@ -4985,7 +4946,7 @@ function symbolObservablePonyfill(root) {
 var Suggestions = require('./src/suggestions');
 window.Suggestions = module.exports = Suggestions;
 
-},{"./src/suggestions":33}],31:[function(require,module,exports){
+},{"./src/suggestions":32}],30:[function(require,module,exports){
 /*
  * Fuzzy
  * https://github.com/myork/fuzzy
@@ -5131,7 +5092,7 @@ fuzzy.filter = function(pattern, arr, opts) {
 }());
 
 
-},{}],32:[function(require,module,exports){
+},{}],31:[function(require,module,exports){
 'Use strict';
 
 var List = function(component) {
@@ -5218,7 +5179,7 @@ List.prototype.next = function() {
 
 module.exports = List;
 
-},{}],33:[function(require,module,exports){
+},{}],32:[function(require,module,exports){
 'use strict';
 
 var extend = require('xtend');
@@ -5408,7 +5369,7 @@ Suggestions.prototype.getItemValue = function(item) {
 
 module.exports = Suggestions;
 
-},{"./list":32,"fuzzy":31,"xtend":36}],34:[function(require,module,exports){
+},{"./list":31,"fuzzy":30,"xtend":35}],33:[function(require,module,exports){
 var each = require('turf-meta').coordEach;
 
 /**
@@ -5478,7 +5439,7 @@ module.exports = function(layer) {
     return extent;
 };
 
-},{"turf-meta":35}],35:[function(require,module,exports){
+},{"turf-meta":34}],34:[function(require,module,exports){
 /**
  * Lazily iterate over coordinates in any GeoJSON object, similar to
  * Array.forEach.
@@ -5618,7 +5579,7 @@ function propReduce(layer, callback, memo) {
 }
 module.exports.propReduce = propReduce;
 
-},{}],36:[function(require,module,exports){
+},{}],35:[function(require,module,exports){
 module.exports = extend
 
 var hasOwnProperty = Object.prototype.hasOwnProperty;
@@ -5639,7 +5600,7 @@ function extend() {
     return target
 }
 
-},{}],37:[function(require,module,exports){
+},{}],36:[function(require,module,exports){
 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
@@ -5826,6 +5787,7 @@ function setError(error) {
 }
 
 function queryOrigin(query) {
+  console.log('querying origin');
   return {
     type: types.ORIGIN_QUERY,
     query: query
@@ -6038,7 +6000,7 @@ function eventEmit(type, data) {
   };
 }
 
-},{"../constants/action_types":38,"../utils":45}],38:[function(require,module,exports){
+},{"../constants/action_types":37,"../utils":45}],37:[function(require,module,exports){
 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
@@ -6061,11 +6023,17 @@ var ROUTE_INDEX = exports.ROUTE_INDEX = 'ROUTE_INDEX';
 var SET_OPTIONS = exports.SET_OPTIONS = 'SET_OPTIONS';
 var WAYPOINTS = exports.WAYPOINTS = 'WAYPOINTS';
 
-},{}],39:[function(require,module,exports){
+},{}],38:[function(require,module,exports){
 'use strict';
 
 var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
 
+var _utils = require('../utils');
+
+var _utils2 = _interopRequireDefault(_utils);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 var Typeahead = require('suggestions');
 var debounce = require('lodash.debounce');
 var extend = require('xtend');
@@ -6102,30 +6070,14 @@ function Geocoder(options) {
 Geocoder.prototype = {
 
   options: {
-    position: 'top-left',
     placeholder: 'Search',
     zoom: 16,
     flyTo: true
   },
 
-  addTo: function addTo(map) {
+  onAdd: function onAdd(map) {
     this._map = map;
-    var container = this._container = this.onAdd(map);
-    if (this.options && this.options.position) {
-      var pos = this.options.position;
-      var corner = map._controlCorners[pos];
-      container.className += ' mapboxgl-ctrl';
-      if (pos.indexOf('bottom') !== -1) {
-        corner.insertBefore(container, corner.firstChild);
-      } else {
-        corner.appendChild(container);
-      }
-    }
-
-    return this;
-  },
 
-  onAdd: function onAdd(map) {
     this.request = new XMLHttpRequest();
 
     this.container = this.options.container ? typeof this.options.container === 'string' ? document.getElementById(this.options.container) : this.options.container : map.getContainer();
@@ -6204,6 +6156,8 @@ Geocoder.prototype = {
     this._loadingEl.classList.add('active');
     this.fire('loading');
 
+    console.log('geocoder this', this);
+
     var options = [];
     if (this.options.proximity) options.push('proximity=' + this.options.proximity.join());
     if (this.options.bbox) options.push('bbox=' + this.options.bbox.join());
@@ -6261,7 +6215,7 @@ Geocoder.prototype = {
   _query: function _query(input) {
     if (!input) return;
     if ((typeof input === 'undefined' ? 'undefined' : _typeof(input)) === 'object' && input.length) {
-      input = [mapboxgl.util.wrap(input[0], -180, 180), mapboxgl.util.wrap(input[1], -180, 180)].join();
+      input = [_utils2.default.wrap(input[0]), _utils2.default.wrap(input[1])].join();
     }
 
     this._geocode(input, function (results) {
@@ -6277,7 +6231,7 @@ Geocoder.prototype = {
   _setInput: function _setInput(input) {
     if (!input) return;
     if ((typeof input === 'undefined' ? 'undefined' : _typeof(input)) === 'object' && input.length) {
-      input = [mapboxgl.util.wrap(input[0], -180, 180), mapboxgl.util.wrap(input[1], -180, 180)].join();
+      input = [_utils2.default.wrap(input[0]), _utils2.default.wrap(input[1])].join();
     }
 
     // Set input value to passed value and clear everything else.
@@ -6369,7 +6323,7 @@ Geocoder.prototype = {
 
 module.exports = Geocoder;
 
-},{"events":2,"lodash.debounce":3,"suggestions":30,"xtend":36}],40:[function(require,module,exports){
+},{"../utils":45,"events":1,"lodash.debounce":2,"suggestions":29,"xtend":35}],39:[function(require,module,exports){
 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
@@ -6471,10 +6425,13 @@ var Inputs = function () {
       var _store$getState3 = this.store.getState(),
           geocoder = _store$getState3.geocoder;
 
+      console.log('geocoder from state', geocoder);
+
       this.originInput = new _geocoder2.default(Object.assign({}, {
         flyTo: false,
         placeholder: 'Choose a starting place',
-        container: this.container.querySelector('#mapbox-directions-origin-input')
+        container: this.container.querySelector('#mapbox-directions-origin-input'),
+        accessToken: this.accessToken
       }, geocoder));
 
       this._map.addControl(this.originInput);
@@ -6482,7 +6439,8 @@ var Inputs = function () {
       this.destinationInput = new _geocoder2.default(Object.assign({}, {
         flyTo: false,
         placeholder: 'Choose destination',
-        container: this.container.querySelector('#mapbox-directions-destination-input')
+        container: this.container.querySelector('#mapbox-directions-destination-input'),
+        accessToken: this.accessToken
       }, geocoder));
 
       this._map.addControl(this.destinationInput);
@@ -6564,7 +6522,7 @@ var Inputs = function () {
 
 exports.default = Inputs;
 
-},{"./geocoder":39,"lodash.isequal":4,"lodash.template":5,"turf-extent":34}],41:[function(require,module,exports){
+},{"./geocoder":38,"lodash.isequal":3,"lodash.template":4,"turf-extent":33}],40:[function(require,module,exports){
 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
@@ -6689,7 +6647,7 @@ var Instructions = function () {
 
 exports.default = Instructions;
 
-},{"../utils":45,"lodash.isequal":4,"lodash.template":5}],42:[function(require,module,exports){
+},{"../utils":45,"lodash.isequal":3,"lodash.template":4}],41:[function(require,module,exports){
 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
@@ -6750,6 +6708,7 @@ var Directions = function () {
 
     this.actions = (0, _redux.bindActionCreators)(actions, store.dispatch);
     this.actions.setOptions(options || {});
+    this.options = options || {};
 
     this.onDragDown = this._onDragDown.bind(this);
     this.onDragMove = this._onDragMove.bind(this);
@@ -6758,36 +6717,36 @@ var Directions = function () {
     this.onClick = this._onClick.bind(this);
   }
 
-  _createClass(Directions, [{
-    key: 'addTo',
-    value: function addTo(map) {
-      this._map = map;
-      var container = this._container = this.onAdd(map);
-      if (this.options && this.options.position) {
-        var pos = this.options.position;
-        var corner = map._controlCorners[pos];
-        container.className += ' mapboxgl-ctrl';
-        if (pos.indexOf('bottom') !== -1) {
-          corner.insertBefore(container, corner.firstChild);
-        } else {
-          corner.appendChild(container);
-        }
-      }
+  // addTo(map) {
+  //     this._map = map;
+  //     var container = this._container = this.onAdd(map);
+  //     if (this.options && this.options.position) {
+  //         var pos = this.options.position;
+  //         var corner = map._controlCorners[pos];
+  //         container.className += ' mapboxgl-ctrl';
+  //         if (pos.indexOf('bottom') !== -1) {
+  //             corner.insertBefore(container, corner.firstChild);
+  //         } else {
+  //             corner.appendChild(container);
+  //         }
+  //     }
+
+  //     return this;
+  // }
 
-      return this;
-    }
-  }, {
+  _createClass(Directions, [{
     key: 'onAdd',
     value: function onAdd(map) {
       var _this = this;
 
       this._map = map;
+      console.log(this._map);
 
       var _store$getState = store.getState(),
-          container = _store$getState.container,
           controls = _store$getState.controls;
 
-      this.container = container ? typeof container === 'string' ? document.getElementById(container) : container : this._map.getContainer();
+      var el = document.createElement('div');
+      el.className = 'mapboxgl-ctrl-directions mapboxgl-ctrl';
 
       // Add controls to the page
       var inputEl = document.createElement('div');
@@ -6802,13 +6761,15 @@ var Directions = function () {
         setRouteIndex: this.actions.setRouteIndex
       }, this._map);
 
-      if (controls.inputs) this.container.appendChild(inputEl);
-      if (controls.instructions) this.container.appendChild(directionsEl);
+      if (controls.inputs) el.appendChild(inputEl);
+      if (controls.instructions) el.appendChild(directionsEl);
 
       this.subscribedActions();
       if (this._map.loaded()) this.mapState();else this._map.on('load', function () {
         return _this.mapState();
       });
+
+      return el;
     }
 
     /**
@@ -7115,6 +7076,7 @@ var Directions = function () {
     key: 'setOrigin',
     value: function setOrigin(query) {
       if (typeof query === 'string') {
+        console.log('this is a query');
         this.actions.queryOrigin(query);
       } else {
         this.actions.setOriginFromCoordinates(query);
@@ -7253,7 +7215,7 @@ var Directions = function () {
 
 exports.default = Directions;
 
-},{"./actions":37,"./controls/inputs":40,"./controls/instructions":41,"./directions_style":43,"./reducers":44,"./utils":45,"polyline":8,"redux":15,"redux-thunk":9}],43:[function(require,module,exports){
+},{"./actions":36,"./controls/inputs":39,"./controls/instructions":40,"./directions_style":42,"./reducers":44,"./utils":45,"polyline":7,"redux":14,"redux-thunk":8}],42:[function(require,module,exports){
 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
@@ -7369,7 +7331,42 @@ var style = [{
 
 exports.default = style;
 
-},{}],44:[function(require,module,exports){
+},{}],43:[function(require,module,exports){
+'use strict';
+
+var _directions = require('./directions');
+
+var _directions2 = _interopRequireDefault(_directions);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+module.exports = _directions2.default; /**
+                                        * A directions component using Mapbox Directions APi
+                                        * @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 {Boolean} [options.interactive=true] Enable/Disable mouse or touch interactivity from the plugin
+                                        * @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`
+                                        * @param {string|Element} options.container HTML element to initialize the map in (or element id as string). If no container is passed map.getContainer() is used instead.
+                                        * @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.
+                                        * @param {Boolean} [options.controls.instructions=true] Hide or display the instructions control.
+                                        * @example
+                                        * var directions = new mapboxgl.Directions({
+                                        *   container: 'directions',
+                                        *   unit: 'metric',
+                                        *   profile: 'walking'
+                                        * });
+                                        *
+                                        * map.addControl(directions);
+                                        * @return {Directions} `this`
+                                        */
+
+},{"./directions":41}],44:[function(require,module,exports){
 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
@@ -7514,7 +7511,7 @@ function data() {
 
 exports.default = data;
 
-},{"../constants/action_types.js":38}],45:[function(require,module,exports){
+},{"../constants/action_types.js":37}],45:[function(require,module,exports){
 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
@@ -7574,5 +7571,5 @@ var format = {
 
 exports.default = { format: format, coordinateMatch: coordinateMatch, createPoint: createPoint, validCoords: validCoords, wrap: wrap };
 
-},{}]},{},[1])(1)
+},{}]},{},[43])(43)
 });
\ No newline at end of file
diff --git a/example/index.js b/example/index.js
index b853fec..334d2bd 100644
--- a/example/index.js
+++ b/example/index.js
@@ -1,6 +1,5 @@
 'use strict';
 var mapboxgl = require('mapbox-gl');
-var MapboxGeocoder = require('../src/index');
 var insertCss = require('insert-css');
 var fs = require('fs');
 mapboxgl.accessToken = window.localStorage.getItem('MapboxAccessToken');
@@ -23,7 +22,6 @@ var map = window.map = new mapboxgl.Map({
 
 // ui
 var button = document.createElement('button');
-button.style = 'z-index:10;';
 button.textContent = 'click me';
 
 // directions
@@ -31,18 +29,16 @@ var MapboxDirections = require('../src/index');
 var directions = new MapboxDirections({
   accessToken: window.localStorage.getItem('MapboxAccessToken'),
   unit: 'metric',
-  profile: 'cycling',
-  container: 'directions',
-  instructions: false
+  profile: 'cycling'
 });
 window.directions = directions;
 
-map.getContainer().querySelector('.mapboxgl-ctrl-bottom-left').appendChild(button);
-map.addControl(directions);
+map.getContainer().querySelector('.mapboxgl-ctrl-top-right').appendChild(button);
+map.addControl(directions, 'top-left');
 
 map.on('load', () => {
   button.addEventListener('click', function() {
     directions.setOrigin([-79.4512, 43.6568]);
     directions.setDestination('Montreal Quebec');
   });
-});
+});
\ No newline at end of file
diff --git a/package.json b/package.json
index 0e2ff7d..9f0fba8 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "mapbox-gl-directions",
   "version": "2.2.0",
   "description": "A mapboxgl plugin for the Mapbox Directions API",
-  "main": "dist/mapbox-gl-directions.js",
+  "main": "./src/index.js",
   "browserify": {
     "transform": [
       "babelify",
@@ -12,7 +12,7 @@
   "scripts": {
     "prepublish": "npm run build",
     "start": "NODE_ENV=development budo example/index.js:example/bundle.js --live",
-    "build": "NODE_ENV=production browserify -s MapboxDirections lib/index.js > dist/mapbox-gl-directions.js",
+    "build": "NODE_ENV=production browserify -s MapboxDirections src/index.js > dist/mapbox-gl-directions.js",
     "test": "NODE_ENV=test npm run lint && browserify test/index.js | smokestack -b firefox | tap-status",
     "docs": "documentation build --format=md > API.md",
     "lint": "eslint --no-eslintrc -c .eslintrc src"
@@ -60,6 +60,7 @@
     "lodash.debounce": "^4.0.6",
     "lodash.isequal": "^4.2.0",
     "lodash.template": "^4.2.5",
+    "mapbox-gl-geocoder": "^2.0.0",
     "polyline": "^0.2.0",
     "redux": "^3.5.2",
     "redux-thunk": "^2.1.0",
diff --git a/src/controls/geocoder.js b/src/controls/geocoder.js
index 9c31031..24aa4c4 100644
--- a/src/controls/geocoder.js
+++ b/src/controls/geocoder.js
@@ -48,12 +48,6 @@ Geocoder.prototype = {
 
     this.request = new XMLHttpRequest();
 
-    this.container = this.options.container ?
-      typeof this.options.container === 'string' ?
-      document.getElementById(this.options.container) :
-      this.options.container :
-      map.getContainer();
-
     // Template
     var el = document.createElement('div');
     el.className = 'mapboxgl-ctrl-geocoder';
@@ -112,8 +106,6 @@ Geocoder.prototype = {
     el.appendChild(input);
     el.appendChild(actions);
 
-    this.container.appendChild(el);
-
     // Override the control being added to control containers
     if (this.options.container) this.options.position = false;
 
@@ -127,8 +119,6 @@ Geocoder.prototype = {
     this._loadingEl.classList.add('active');
     this.fire('loading');
 
-    console.log('geocoder this', this);
-
     var options = [];
     if (this.options.proximity) options.push('proximity=' + this.options.proximity.join());
     if (this.options.bbox) options.push('bbox=' + this.options.bbox.join());
diff --git a/src/controls/inputs.js b/src/controls/inputs.js
index 7a79b51..c7cc44b 100644
--- a/src/controls/inputs.js
+++ b/src/controls/inputs.js
@@ -65,25 +65,25 @@ export default class Inputs {
 
     const { geocoder } = this.store.getState();
 
-    console.log('geocoder from state', geocoder);
-
     this.originInput = new Geocoder(Object.assign({}, {
       flyTo: false,
       placeholder: 'Choose a starting place',
-      container: this.container.querySelector('#mapbox-directions-origin-input'),
-      accessToken: this.accessToken
+      accessToken: 'waka'
     }, geocoder));
 
-    this._map.addControl(this.originInput);
+    var originEl = this.originInput.onAdd();
+    var originContainerEl = this.container.querySelector('#mapbox-directions-origin-input');
+    originContainerEl.appendChild(originEl);
 
     this.destinationInput = new Geocoder(Object.assign({}, {
       flyTo: false,
       placeholder: 'Choose destination',
-      container: this.container.querySelector('#mapbox-directions-destination-input'),
-      accessToken: this.accessToken
+      accessToken: 'waka'
     }, geocoder));
 
-    this._map.addControl(this.destinationInput);
+    var destinationEl = this.destinationInput.onAdd();
+    this.container.querySelector('#mapbox-directions-destination-input').appendChild(destinationEl);
+    
 
     this.originInput.on('result', (e) => {
       const coords = e.result.center;
diff --git a/src/directions.js b/src/directions.js
index 9c2f75d..0e34586 100644
--- a/src/directions.js
+++ b/src/directions.js
@@ -29,26 +29,8 @@ export default class Directions {
     this.onClick = this._onClick.bind(this);
   }
 
-  // addTo(map) {
-  //     this._map = map;
-  //     var container = this._container = this.onAdd(map);
-  //     if (this.options && this.options.position) {
-  //         var pos = this.options.position;
-  //         var corner = map._controlCorners[pos];
-  //         container.className += ' mapboxgl-ctrl';
-  //         if (pos.indexOf('bottom') !== -1) {
-  //             corner.insertBefore(container, corner.firstChild);
-  //         } else {
-  //             corner.appendChild(container);
-  //         }
-  //     }
-
-  //     return this;
-  // }
-
   onAdd(map) {
     this._map = map;
-    console.log(this._map);
 
     const { controls } = store.getState();
 
@@ -69,7 +51,7 @@ export default class Directions {
     }, this._map);
 
     if (controls.inputs) el.appendChild(inputEl);
-    if (controls.instructions) el.appendChild(directionsEl);
+    el.appendChild(directionsEl);
 
     this.subscribedActions();
     if (this._map.loaded()) this.mapState()
@@ -358,7 +340,6 @@ export default class Directions {
    */
   setOrigin(query) {
     if (typeof query === 'string') {
-      console.log('this is a query');
       this.actions.queryOrigin(query);
     } else {
       this.actions.setOriginFromCoordinates(query);
diff --git a/src/index.js b/src/index.js
index 39b89e3..14f3cd2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -8,7 +8,6 @@
  * @param {Boolean} [options.interactive=true] Enable/Disable mouse or touch interactivity from the plugin
  * @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`
- * @param {string|Element} options.container HTML element to initialize the map in (or element id as string). If no container is passed map.getContainer() is used instead.
  * @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.
diff --git a/dist/mapbox-gl-directions.css b/src/mapbox-gl-directions.css
similarity index 98%
rename from dist/mapbox-gl-directions.css
rename to src/mapbox-gl-directions.css
index 33262e3..8c7e212 100644
--- a/dist/mapbox-gl-directions.css
+++ b/src/mapbox-gl-directions.css
@@ -160,14 +160,14 @@
 
 /* Layout containers */
 .directions-control {
-  position:absolute;
   width:33.3333%;
   max-width:300px;
-  min-width:200px;
+  min-width:250px;
   z-index:1;
   }
   .directions-control.directions-control-directions {
     background:rgba(0,0,0,0.75);
+    margin: 7px 0 0;
     color:#fff;
     top:0;
     right:0;
@@ -211,7 +211,7 @@
   z-index:10;
   background:white;
   left:50px;
-  top:30px;
+  top:40px;
   cursor:pointer;
   }
 
@@ -295,7 +295,7 @@
 
 /* Route Summary */
 .mapbox-directions-route-summary {
-  position:fixed;
+  position: relative;
   z-index:1;
   width:100%;
   min-height:50px;
@@ -306,7 +306,6 @@
   line-height:28px;
   }
   .mapbox-directions-route-summary + .mapbox-directions-instructions {
-    padding-top:50px;
     }
   .mapbox-directions-route-summary h1 {
     font-weight:500;
@@ -321,11 +320,11 @@
     }
 
   /* Alt route selection */
-  .mapbox-directions-multiple {
-    min-height:75px;
+  .mapbox-directions-instructions {
+      overflow: scroll;
     }
-    .mapbox-directions-multiple + .mapbox-directions-instructions {
-      padding-top:75px;
+    .mapbox-directions-instructions-wrapper {
+      max-height: 500px;
       }
   .mapbox-directions-routes {
     margin:0 0 10px;
@@ -431,7 +430,7 @@
 .mapbox-directions-routes { float:right; margin-right:10px; }
 .directions-control.directions-control-directions { top:auto; max-height:40%; }
 .mapbox-directions-multiple { min-height:50px; }
-.mapbox-directions-multiple + .mapbox-directions-instructions { padding-top:50px; }
+
 }
 
 @-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } }
diff --git a/src/templates/instructions.html b/src/templates/instructions.html
index 2daeada..1ac7bc7 100644
--- a/src/templates/instructions.html
+++ b/src/templates/instructions.html
@@ -13,29 +13,31 @@ <h1><%- duration %></h1>
   </div>
 
   <div class='mapbox-directions-instructions'>
-    <ol class='mapbox-directions-steps'>
-      <% steps.forEach(function(step) { %>
-        <%
-          var distance = step.distance ? format(step.distance) : false;
-          var icon = step.maneuver.type.replace(/\s+/g, '-').toLowerCase();
-          var lng = step.maneuver.location.coordinates[0];
-          var lat = step.maneuver.location.coordinates[1];
-        %>
-        <li
-          data-lat='<%= lat %>'
-          data-lng='<%= lng %>'
-          class='mapbox-directions-step'>
-          <span class='directions-icon directions-icon-<%= icon %>'></span>
-          <div class='mapbox-directions-step-maneuver'>
-            <%= step.maneuver.instruction %>
-          </div>
-          <% if (step.distance) { %>
-            <div class='mapbox-directions-step-distance'>
-              <%= distance %>
+    <div class='mapbox-directions-instructions-wrapper'>
+      <ol class='mapbox-directions-steps'>
+        <% steps.forEach(function(step) { %>
+          <%
+            var distance = step.distance ? format(step.distance) : false;
+            var icon = step.maneuver.type.replace(/\s+/g, '-').toLowerCase();
+            var lng = step.maneuver.location.coordinates[0];
+            var lat = step.maneuver.location.coordinates[1];
+          %>
+          <li
+            data-lat='<%= lat %>'
+            data-lng='<%= lng %>'
+            class='mapbox-directions-step'>
+            <span class='directions-icon directions-icon-<%= icon %>'></span>
+            <div class='mapbox-directions-step-maneuver'>
+              <%= step.maneuver.instruction %>
             </div>
-          <% } %>
-        </li>
-      <% }); %>
-    </ol>
+            <% if (step.distance) { %>
+              <div class='mapbox-directions-step-distance'>
+                <%= distance %>
+              </div>
+            <% } %>
+          </li>
+        <% }); %>
+      </ol>
+    </div>
   </div>
 </div>
diff --git a/test/test.directions.js b/test/test.directions.js
index 8dc8a15..d5f2c12 100644
--- a/test/test.directions.js
+++ b/test/test.directions.js
@@ -10,6 +10,8 @@ test('directions', (tt) => {
     container = document.createElement('div');
     map = new mapboxgl.Map({ container: container });
     directions = new mapboxgl.Directions(opts);
+    var MapboxDirections = require('..');
+    var directions = new MapboxDirections(opts);
     map.addControl(directions);
   }
 
diff --git a/test/test.inputs.js b/test/test.inputs.js
index 154d852..81eaad5 100644
--- a/test/test.inputs.js
+++ b/test/test.inputs.js
@@ -15,7 +15,8 @@ test('Directions#inputControl', tt => {
   function setup(opts) {
     container = document.createElement('div');
     map = new mapboxgl.Map({ container: container });
-    directions = new mapboxgl.Directions(opts);
+    var MapboxDirections = require('..');
+    var directions = new MapboxDirections(opts);
     map.addControl(directions);
   }
 
diff --git a/test/test.instructions.js b/test/test.instructions.js
index 90413aa..213dd3f 100644
--- a/test/test.instructions.js
+++ b/test/test.instructions.js
@@ -9,7 +9,8 @@ test('Directions#instructionControl', tt => {
   function setup(opts) {
     container = document.createElement('div');
     map = new mapboxgl.Map({ container: container });
-    directions = new mapboxgl.Directions(opts);
+    var MapboxDirections = require('..');
+    var directions = new MapboxDirections(opts);
     map.addControl(directions);
   }
 
diff --git a/test/test.options.js b/test/test.options.js
index d34194e..bc0ed9f 100644
--- a/test/test.options.js
+++ b/test/test.options.js
@@ -9,7 +9,8 @@ test('Directions#option', tt => {
   function setup(opts) {
     container = document.createElement('div');
     map = new mapboxgl.Map({ container: container });
-    directions = new mapboxgl.Directions(opts);
+    var MapboxDirections = require('..');
+    var directions = new MapboxDirections(opts);
     map.addControl(directions);
   }
 

From aa9e3e7b2db3a744e8e855ca1df219710625d1b1 Mon Sep 17 00:00:00 2001
From: mapsam <matthews.sam@gmail.com>
Date: Fri, 18 Nov 2016 09:14:50 -0800
Subject: [PATCH 04/17] no more require, get tests running

---
 example/index.js          | 2 +-
 package.json              | 2 +-
 src/controls/geocoder.js  | 9 ++++-----
 src/controls/inputs.js    | 4 ++--
 test/test.directions.js   | 5 ++---
 test/test.inputs.js       | 2 +-
 test/test.instructions.js | 2 +-
 test/test.options.js      | 2 +-
 8 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/example/index.js b/example/index.js
index 334d2bd..50730aa 100644
--- a/example/index.js
+++ b/example/index.js
@@ -7,7 +7,7 @@ mapboxgl.accessToken = window.localStorage.getItem('MapboxAccessToken');
 // var directionsDiv = document.body.appendChild(document.createElement('div'));
 // directionsDiv.id = 'directions';
 
-insertCss(fs.readFileSync('./dist/mapbox-gl-directions.css', 'utf8'));
+insertCss(fs.readFileSync('./src/mapbox-gl-directions.css', 'utf8'));
 insertCss(fs.readFileSync('./node_modules/mapbox-gl/dist/mapbox-gl.css', 'utf8'));
 var mapDiv = document.body.appendChild(document.createElement('div'));
 mapDiv.style = 'position:absolute;top:0;right:0;left:0;bottom:0;';
diff --git a/package.json b/package.json
index 9f0fba8..edc54cd 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
   "scripts": {
     "prepublish": "npm run build",
     "start": "NODE_ENV=development budo example/index.js:example/bundle.js --live",
-    "build": "NODE_ENV=production browserify -s MapboxDirections src/index.js > dist/mapbox-gl-directions.js",
+    "build": "NODE_ENV=production mkdir -p dist && browserify -s MapboxDirections src/index.js > dist/mapbox-gl-directions.js",
     "test": "NODE_ENV=test npm run lint && browserify test/index.js | smokestack -b firefox | tap-status",
     "docs": "documentation build --format=md > API.md",
     "lint": "eslint --no-eslintrc -c .eslintrc src"
diff --git a/src/controls/geocoder.js b/src/controls/geocoder.js
index 24aa4c4..a292b6d 100644
--- a/src/controls/geocoder.js
+++ b/src/controls/geocoder.js
@@ -1,10 +1,9 @@
 'use strict';
 
-var Typeahead = require('suggestions');
-var debounce = require('lodash.debounce');
-var extend = require('xtend');
-var EventEmitter = require('events').EventEmitter;
-
+import Typeahead from 'suggestions';
+import debounce from 'lodash.debounce';
+import extend from 'xtend';
+import { EventEmitter } from 'events';
 import utils from '../utils'
 
 // Mapbox Geocoder version
diff --git a/src/controls/inputs.js b/src/controls/inputs.js
index c7cc44b..6fe3ed0 100644
--- a/src/controls/inputs.js
+++ b/src/controls/inputs.js
@@ -68,7 +68,7 @@ export default class Inputs {
     this.originInput = new Geocoder(Object.assign({}, {
       flyTo: false,
       placeholder: 'Choose a starting place',
-      accessToken: 'waka'
+      accessToken: 'pk.eyJ1IjoibWFwc2FtIiwiYSI6ImNpaWR1MXlxcDAxMTJ1M2tzYWUyeTdpY24ifQ.QG1jCTgj-WYwJa2y1W0wMw'
     }, geocoder));
 
     var originEl = this.originInput.onAdd();
@@ -78,7 +78,7 @@ export default class Inputs {
     this.destinationInput = new Geocoder(Object.assign({}, {
       flyTo: false,
       placeholder: 'Choose destination',
-      accessToken: 'waka'
+      accessToken: 'pk.eyJ1IjoibWFwc2FtIiwiYSI6ImNpaWR1MXlxcDAxMTJ1M2tzYWUyeTdpY24ifQ.QG1jCTgj-WYwJa2y1W0wMw'
     }, geocoder));
 
     var destinationEl = this.destinationInput.onAdd();
diff --git a/test/test.directions.js b/test/test.directions.js
index d5f2c12..cf99f7e 100644
--- a/test/test.directions.js
+++ b/test/test.directions.js
@@ -9,9 +9,8 @@ test('directions', (tt) => {
   function setup(opts) {
     container = document.createElement('div');
     map = new mapboxgl.Map({ container: container });
-    directions = new mapboxgl.Directions(opts);
-    var MapboxDirections = require('..');
-    var directions = new MapboxDirections(opts);
+    const MapboxDirections = require('..');
+    directions = new MapboxDirections(opts);
     map.addControl(directions);
   }
 
diff --git a/test/test.inputs.js b/test/test.inputs.js
index 81eaad5..ff6dde7 100644
--- a/test/test.inputs.js
+++ b/test/test.inputs.js
@@ -16,7 +16,7 @@ test('Directions#inputControl', tt => {
     container = document.createElement('div');
     map = new mapboxgl.Map({ container: container });
     var MapboxDirections = require('..');
-    var directions = new MapboxDirections(opts);
+    directions = new MapboxDirections(opts);
     map.addControl(directions);
   }
 
diff --git a/test/test.instructions.js b/test/test.instructions.js
index 213dd3f..f230416 100644
--- a/test/test.instructions.js
+++ b/test/test.instructions.js
@@ -10,7 +10,7 @@ test('Directions#instructionControl', tt => {
     container = document.createElement('div');
     map = new mapboxgl.Map({ container: container });
     var MapboxDirections = require('..');
-    var directions = new MapboxDirections(opts);
+    directions = new MapboxDirections(opts);
     map.addControl(directions);
   }
 
diff --git a/test/test.options.js b/test/test.options.js
index bc0ed9f..3c5c9c1 100644
--- a/test/test.options.js
+++ b/test/test.options.js
@@ -10,7 +10,7 @@ test('Directions#option', tt => {
     container = document.createElement('div');
     map = new mapboxgl.Map({ container: container });
     var MapboxDirections = require('..');
-    var directions = new MapboxDirections(opts);
+    directions = new MapboxDirections(opts);
     map.addControl(directions);
   }
 

From fc59fc7ceb6901901461160aee11f00d87a1cc8e Mon Sep 17 00:00:00 2001
From: mapsam <matthews.sam@gmail.com>
Date: Fri, 18 Nov 2016 09:16:17 -0800
Subject: [PATCH 05/17] remove dist

---
 dist/mapbox-gl-directions.js             | 7575 ----------------------
 {dist => src}/icons/arrive.svg           |    0
 {dist => src}/icons/bear-left.svg        |    0
 {dist => src}/icons/bear-right.svg       |    0
 {dist => src}/icons/continue.svg         |    0
 {dist => src}/icons/depart.svg           |    0
 {dist => src}/icons/enter-roundabout.svg |    0
 {dist => src}/icons/error.svg            |    0
 {dist => src}/icons/reverse.svg          |    0
 {dist => src}/icons/sharp-left.svg       |    0
 {dist => src}/icons/sharp-right.svg      |    0
 {dist => src}/icons/turn-left.svg        |    0
 {dist => src}/icons/turn-right.svg       |    0
 {dist => src}/icons/u-turn.svg           |    0
 {dist => src}/icons/waypoint.svg         |    0
 15 files changed, 7575 deletions(-)
 delete mode 100644 dist/mapbox-gl-directions.js
 rename {dist => src}/icons/arrive.svg (100%)
 rename {dist => src}/icons/bear-left.svg (100%)
 rename {dist => src}/icons/bear-right.svg (100%)
 rename {dist => src}/icons/continue.svg (100%)
 rename {dist => src}/icons/depart.svg (100%)
 rename {dist => src}/icons/enter-roundabout.svg (100%)
 rename {dist => src}/icons/error.svg (100%)
 rename {dist => src}/icons/reverse.svg (100%)
 rename {dist => src}/icons/sharp-left.svg (100%)
 rename {dist => src}/icons/sharp-right.svg (100%)
 rename {dist => src}/icons/turn-left.svg (100%)
 rename {dist => src}/icons/turn-right.svg (100%)
 rename {dist => src}/icons/u-turn.svg (100%)
 rename {dist => src}/icons/waypoint.svg (100%)

diff --git a/dist/mapbox-gl-directions.js b/dist/mapbox-gl-directions.js
deleted file mode 100644
index 22c8611..0000000
--- a/dist/mapbox-gl-directions.js
+++ /dev/null
@@ -1,7575 +0,0 @@
-(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.MapboxDirections = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
-// Copyright Joyent, Inc. and other Node contributors.
-//
-// Permission is hereby granted, free of charge, to any person obtaining a
-// copy of this software and associated documentation files (the
-// "Software"), to deal in the Software without restriction, including
-// without limitation the rights to use, copy, modify, merge, publish,
-// distribute, sublicense, and/or sell copies of the Software, and to permit
-// persons to whom the Software is furnished to do so, subject to the
-// following conditions:
-//
-// The above copyright notice and this permission notice shall be included
-// in all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
-// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN
-// NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
-// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
-// OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
-// USE OR OTHER DEALINGS IN THE SOFTWARE.
-
-function EventEmitter() {
-  this._events = this._events || {};
-  this._maxListeners = this._maxListeners || undefined;
-}
-module.exports = EventEmitter;
-
-// Backwards-compat with node 0.10.x
-EventEmitter.EventEmitter = EventEmitter;
-
-EventEmitter.prototype._events = undefined;
-EventEmitter.prototype._maxListeners = undefined;
-
-// By default EventEmitters will print a warning if more than 10 listeners are
-// added to it. This is a useful default which helps finding memory leaks.
-EventEmitter.defaultMaxListeners = 10;
-
-// Obviously not all Emitters should be limited to 10. This function allows
-// that to be increased. Set to zero for unlimited.
-EventEmitter.prototype.setMaxListeners = function(n) {
-  if (!isNumber(n) || n < 0 || isNaN(n))
-    throw TypeError('n must be a positive number');
-  this._maxListeners = n;
-  return this;
-};
-
-EventEmitter.prototype.emit = function(type) {
-  var er, handler, len, args, i, listeners;
-
-  if (!this._events)
-    this._events = {};
-
-  // If there is no 'error' event listener then throw.
-  if (type === 'error') {
-    if (!this._events.error ||
-        (isObject(this._events.error) && !this._events.error.length)) {
-      er = arguments[1];
-      if (er instanceof Error) {
-        throw er; // Unhandled 'error' event
-      } else {
-        // At least give some kind of context to the user
-        var err = new Error('Uncaught, unspecified "error" event. (' + er + ')');
-        err.context = er;
-        throw err;
-      }
-    }
-  }
-
-  handler = this._events[type];
-
-  if (isUndefined(handler))
-    return false;
-
-  if (isFunction(handler)) {
-    switch (arguments.length) {
-      // fast cases
-      case 1:
-        handler.call(this);
-        break;
-      case 2:
-        handler.call(this, arguments[1]);
-        break;
-      case 3:
-        handler.call(this, arguments[1], arguments[2]);
-        break;
-      // slower
-      default:
-        args = Array.prototype.slice.call(arguments, 1);
-        handler.apply(this, args);
-    }
-  } else if (isObject(handler)) {
-    args = Array.prototype.slice.call(arguments, 1);
-    listeners = handler.slice();
-    len = listeners.length;
-    for (i = 0; i < len; i++)
-      listeners[i].apply(this, args);
-  }
-
-  return true;
-};
-
-EventEmitter.prototype.addListener = function(type, listener) {
-  var m;
-
-  if (!isFunction(listener))
-    throw TypeError('listener must be a function');
-
-  if (!this._events)
-    this._events = {};
-
-  // To avoid recursion in the case that type === "newListener"! Before
-  // adding it to the listeners, first emit "newListener".
-  if (this._events.newListener)
-    this.emit('newListener', type,
-              isFunction(listener.listener) ?
-              listener.listener : listener);
-
-  if (!this._events[type])
-    // Optimize the case of one listener. Don't need the extra array object.
-    this._events[type] = listener;
-  else if (isObject(this._events[type]))
-    // If we've already got an array, just append.
-    this._events[type].push(listener);
-  else
-    // Adding the second element, need to change to array.
-    this._events[type] = [this._events[type], listener];
-
-  // Check for listener leak
-  if (isObject(this._events[type]) && !this._events[type].warned) {
-    if (!isUndefined(this._maxListeners)) {
-      m = this._maxListeners;
-    } else {
-      m = EventEmitter.defaultMaxListeners;
-    }
-
-    if (m && m > 0 && this._events[type].length > m) {
-      this._events[type].warned = true;
-      console.error('(node) warning: possible EventEmitter memory ' +
-                    'leak detected. %d listeners added. ' +
-                    'Use emitter.setMaxListeners() to increase limit.',
-                    this._events[type].length);
-      if (typeof console.trace === 'function') {
-        // not supported in IE 10
-        console.trace();
-      }
-    }
-  }
-
-  return this;
-};
-
-EventEmitter.prototype.on = EventEmitter.prototype.addListener;
-
-EventEmitter.prototype.once = function(type, listener) {
-  if (!isFunction(listener))
-    throw TypeError('listener must be a function');
-
-  var fired = false;
-
-  function g() {
-    this.removeListener(type, g);
-
-    if (!fired) {
-      fired = true;
-      listener.apply(this, arguments);
-    }
-  }
-
-  g.listener = listener;
-  this.on(type, g);
-
-  return this;
-};
-
-// emits a 'removeListener' event iff the listener was removed
-EventEmitter.prototype.removeListener = function(type, listener) {
-  var list, position, length, i;
-
-  if (!isFunction(listener))
-    throw TypeError('listener must be a function');
-
-  if (!this._events || !this._events[type])
-    return this;
-
-  list = this._events[type];
-  length = list.length;
-  position = -1;
-
-  if (list === listener ||
-      (isFunction(list.listener) && list.listener === listener)) {
-    delete this._events[type];
-    if (this._events.removeListener)
-      this.emit('removeListener', type, listener);
-
-  } else if (isObject(list)) {
-    for (i = length; i-- > 0;) {
-      if (list[i] === listener ||
-          (list[i].listener && list[i].listener === listener)) {
-        position = i;
-        break;
-      }
-    }
-
-    if (position < 0)
-      return this;
-
-    if (list.length === 1) {
-      list.length = 0;
-      delete this._events[type];
-    } else {
-      list.splice(position, 1);
-    }
-
-    if (this._events.removeListener)
-      this.emit('removeListener', type, listener);
-  }
-
-  return this;
-};
-
-EventEmitter.prototype.removeAllListeners = function(type) {
-  var key, listeners;
-
-  if (!this._events)
-    return this;
-
-  // not listening for removeListener, no need to emit
-  if (!this._events.removeListener) {
-    if (arguments.length === 0)
-      this._events = {};
-    else if (this._events[type])
-      delete this._events[type];
-    return this;
-  }
-
-  // emit removeListener for all listeners on all events
-  if (arguments.length === 0) {
-    for (key in this._events) {
-      if (key === 'removeListener') continue;
-      this.removeAllListeners(key);
-    }
-    this.removeAllListeners('removeListener');
-    this._events = {};
-    return this;
-  }
-
-  listeners = this._events[type];
-
-  if (isFunction(listeners)) {
-    this.removeListener(type, listeners);
-  } else if (listeners) {
-    // LIFO order
-    while (listeners.length)
-      this.removeListener(type, listeners[listeners.length - 1]);
-  }
-  delete this._events[type];
-
-  return this;
-};
-
-EventEmitter.prototype.listeners = function(type) {
-  var ret;
-  if (!this._events || !this._events[type])
-    ret = [];
-  else if (isFunction(this._events[type]))
-    ret = [this._events[type]];
-  else
-    ret = this._events[type].slice();
-  return ret;
-};
-
-EventEmitter.prototype.listenerCount = function(type) {
-  if (this._events) {
-    var evlistener = this._events[type];
-
-    if (isFunction(evlistener))
-      return 1;
-    else if (evlistener)
-      return evlistener.length;
-  }
-  return 0;
-};
-
-EventEmitter.listenerCount = function(emitter, type) {
-  return emitter.listenerCount(type);
-};
-
-function isFunction(arg) {
-  return typeof arg === 'function';
-}
-
-function isNumber(arg) {
-  return typeof arg === 'number';
-}
-
-function isObject(arg) {
-  return typeof arg === 'object' && arg !== null;
-}
-
-function isUndefined(arg) {
-  return arg === void 0;
-}
-
-},{}],2:[function(require,module,exports){
-(function (global){
-/**
- * lodash (Custom Build) <https://lodash.com/>
- * Build: `lodash modularize exports="npm" -o ./`
- * Copyright jQuery Foundation and other contributors <https://jquery.org/>
- * Released under MIT license <https://lodash.com/license>
- * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
- * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
- */
-
-/** Used as the `TypeError` message for "Functions" methods. */
-var FUNC_ERROR_TEXT = 'Expected a function';
-
-/** Used as references for various `Number` constants. */
-var NAN = 0 / 0;
-
-/** `Object#toString` result references. */
-var symbolTag = '[object Symbol]';
-
-/** Used to match leading and trailing whitespace. */
-var reTrim = /^\s+|\s+$/g;
-
-/** Used to detect bad signed hexadecimal string values. */
-var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
-
-/** Used to detect binary string values. */
-var reIsBinary = /^0b[01]+$/i;
-
-/** Used to detect octal string values. */
-var reIsOctal = /^0o[0-7]+$/i;
-
-/** Built-in method references without a dependency on `root`. */
-var freeParseInt = parseInt;
-
-/** Detect free variable `global` from Node.js. */
-var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;
-
-/** Detect free variable `self`. */
-var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
-
-/** Used as a reference to the global object. */
-var root = freeGlobal || freeSelf || Function('return this')();
-
-/** Used for built-in method references. */
-var objectProto = Object.prototype;
-
-/**
- * Used to resolve the
- * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
- * of values.
- */
-var objectToString = objectProto.toString;
-
-/* Built-in method references for those with the same name as other `lodash` methods. */
-var nativeMax = Math.max,
-    nativeMin = Math.min;
-
-/**
- * Gets the timestamp of the number of milliseconds that have elapsed since
- * the Unix epoch (1 January 1970 00:00:00 UTC).
- *
- * @static
- * @memberOf _
- * @since 2.4.0
- * @category Date
- * @returns {number} Returns the timestamp.
- * @example
- *
- * _.defer(function(stamp) {
- *   console.log(_.now() - stamp);
- * }, _.now());
- * // => Logs the number of milliseconds it took for the deferred invocation.
- */
-var now = function() {
-  return root.Date.now();
-};
-
-/**
- * Creates a debounced function that delays invoking `func` until after `wait`
- * milliseconds have elapsed since the last time the debounced function was
- * invoked. The debounced function comes with a `cancel` method to cancel
- * delayed `func` invocations and a `flush` method to immediately invoke them.
- * Provide `options` to indicate whether `func` should be invoked on the
- * leading and/or trailing edge of the `wait` timeout. The `func` is invoked
- * with the last arguments provided to the debounced function. Subsequent
- * calls to the debounced function return the result of the last `func`
- * invocation.
- *
- * **Note:** If `leading` and `trailing` options are `true`, `func` is
- * invoked on the trailing edge of the timeout only if the debounced function
- * is invoked more than once during the `wait` timeout.
- *
- * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
- * until to the next tick, similar to `setTimeout` with a timeout of `0`.
- *
- * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
- * for details over the differences between `_.debounce` and `_.throttle`.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Function
- * @param {Function} func The function to debounce.
- * @param {number} [wait=0] The number of milliseconds to delay.
- * @param {Object} [options={}] The options object.
- * @param {boolean} [options.leading=false]
- *  Specify invoking on the leading edge of the timeout.
- * @param {number} [options.maxWait]
- *  The maximum time `func` is allowed to be delayed before it's invoked.
- * @param {boolean} [options.trailing=true]
- *  Specify invoking on the trailing edge of the timeout.
- * @returns {Function} Returns the new debounced function.
- * @example
- *
- * // Avoid costly calculations while the window size is in flux.
- * jQuery(window).on('resize', _.debounce(calculateLayout, 150));
- *
- * // Invoke `sendMail` when clicked, debouncing subsequent calls.
- * jQuery(element).on('click', _.debounce(sendMail, 300, {
- *   'leading': true,
- *   'trailing': false
- * }));
- *
- * // Ensure `batchLog` is invoked once after 1 second of debounced calls.
- * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
- * var source = new EventSource('/stream');
- * jQuery(source).on('message', debounced);
- *
- * // Cancel the trailing debounced invocation.
- * jQuery(window).on('popstate', debounced.cancel);
- */
-function debounce(func, wait, options) {
-  var lastArgs,
-      lastThis,
-      maxWait,
-      result,
-      timerId,
-      lastCallTime,
-      lastInvokeTime = 0,
-      leading = false,
-      maxing = false,
-      trailing = true;
-
-  if (typeof func != 'function') {
-    throw new TypeError(FUNC_ERROR_TEXT);
-  }
-  wait = toNumber(wait) || 0;
-  if (isObject(options)) {
-    leading = !!options.leading;
-    maxing = 'maxWait' in options;
-    maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
-    trailing = 'trailing' in options ? !!options.trailing : trailing;
-  }
-
-  function invokeFunc(time) {
-    var args = lastArgs,
-        thisArg = lastThis;
-
-    lastArgs = lastThis = undefined;
-    lastInvokeTime = time;
-    result = func.apply(thisArg, args);
-    return result;
-  }
-
-  function leadingEdge(time) {
-    // Reset any `maxWait` timer.
-    lastInvokeTime = time;
-    // Start the timer for the trailing edge.
-    timerId = setTimeout(timerExpired, wait);
-    // Invoke the leading edge.
-    return leading ? invokeFunc(time) : result;
-  }
-
-  function remainingWait(time) {
-    var timeSinceLastCall = time - lastCallTime,
-        timeSinceLastInvoke = time - lastInvokeTime,
-        result = wait - timeSinceLastCall;
-
-    return maxing ? nativeMin(result, maxWait - timeSinceLastInvoke) : result;
-  }
-
-  function shouldInvoke(time) {
-    var timeSinceLastCall = time - lastCallTime,
-        timeSinceLastInvoke = time - lastInvokeTime;
-
-    // Either this is the first call, activity has stopped and we're at the
-    // trailing edge, the system time has gone backwards and we're treating
-    // it as the trailing edge, or we've hit the `maxWait` limit.
-    return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||
-      (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));
-  }
-
-  function timerExpired() {
-    var time = now();
-    if (shouldInvoke(time)) {
-      return trailingEdge(time);
-    }
-    // Restart the timer.
-    timerId = setTimeout(timerExpired, remainingWait(time));
-  }
-
-  function trailingEdge(time) {
-    timerId = undefined;
-
-    // Only invoke if we have `lastArgs` which means `func` has been
-    // debounced at least once.
-    if (trailing && lastArgs) {
-      return invokeFunc(time);
-    }
-    lastArgs = lastThis = undefined;
-    return result;
-  }
-
-  function cancel() {
-    if (timerId !== undefined) {
-      clearTimeout(timerId);
-    }
-    lastInvokeTime = 0;
-    lastArgs = lastCallTime = lastThis = timerId = undefined;
-  }
-
-  function flush() {
-    return timerId === undefined ? result : trailingEdge(now());
-  }
-
-  function debounced() {
-    var time = now(),
-        isInvoking = shouldInvoke(time);
-
-    lastArgs = arguments;
-    lastThis = this;
-    lastCallTime = time;
-
-    if (isInvoking) {
-      if (timerId === undefined) {
-        return leadingEdge(lastCallTime);
-      }
-      if (maxing) {
-        // Handle invocations in a tight loop.
-        timerId = setTimeout(timerExpired, wait);
-        return invokeFunc(lastCallTime);
-      }
-    }
-    if (timerId === undefined) {
-      timerId = setTimeout(timerExpired, wait);
-    }
-    return result;
-  }
-  debounced.cancel = cancel;
-  debounced.flush = flush;
-  return debounced;
-}
-
-/**
- * Checks if `value` is the
- * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
- * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is an object, else `false`.
- * @example
- *
- * _.isObject({});
- * // => true
- *
- * _.isObject([1, 2, 3]);
- * // => true
- *
- * _.isObject(_.noop);
- * // => true
- *
- * _.isObject(null);
- * // => false
- */
-function isObject(value) {
-  var type = typeof value;
-  return !!value && (type == 'object' || type == 'function');
-}
-
-/**
- * Checks if `value` is object-like. A value is object-like if it's not `null`
- * and has a `typeof` result of "object".
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
- * @example
- *
- * _.isObjectLike({});
- * // => true
- *
- * _.isObjectLike([1, 2, 3]);
- * // => true
- *
- * _.isObjectLike(_.noop);
- * // => false
- *
- * _.isObjectLike(null);
- * // => false
- */
-function isObjectLike(value) {
-  return !!value && typeof value == 'object';
-}
-
-/**
- * Checks if `value` is classified as a `Symbol` primitive or object.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
- * @example
- *
- * _.isSymbol(Symbol.iterator);
- * // => true
- *
- * _.isSymbol('abc');
- * // => false
- */
-function isSymbol(value) {
-  return typeof value == 'symbol' ||
-    (isObjectLike(value) && objectToString.call(value) == symbolTag);
-}
-
-/**
- * Converts `value` to a number.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to process.
- * @returns {number} Returns the number.
- * @example
- *
- * _.toNumber(3.2);
- * // => 3.2
- *
- * _.toNumber(Number.MIN_VALUE);
- * // => 5e-324
- *
- * _.toNumber(Infinity);
- * // => Infinity
- *
- * _.toNumber('3.2');
- * // => 3.2
- */
-function toNumber(value) {
-  if (typeof value == 'number') {
-    return value;
-  }
-  if (isSymbol(value)) {
-    return NAN;
-  }
-  if (isObject(value)) {
-    var other = typeof value.valueOf == 'function' ? value.valueOf() : value;
-    value = isObject(other) ? (other + '') : other;
-  }
-  if (typeof value != 'string') {
-    return value === 0 ? value : +value;
-  }
-  value = value.replace(reTrim, '');
-  var isBinary = reIsBinary.test(value);
-  return (isBinary || reIsOctal.test(value))
-    ? freeParseInt(value.slice(2), isBinary ? 2 : 8)
-    : (reIsBadHex.test(value) ? NAN : +value);
-}
-
-module.exports = debounce;
-
-}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{}],3:[function(require,module,exports){
-(function (global){
-/**
- * lodash (Custom Build) <https://lodash.com/>
- * Build: `lodash modularize exports="npm" -o ./`
- * Copyright jQuery Foundation and other contributors <https://jquery.org/>
- * Released under MIT license <https://lodash.com/license>
- * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
- * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
- */
-
-/** Used as the size to enable large array optimizations. */
-var LARGE_ARRAY_SIZE = 200;
-
-/** Used to stand-in for `undefined` hash values. */
-var HASH_UNDEFINED = '__lodash_hash_undefined__';
-
-/** Used to compose bitmasks for comparison styles. */
-var UNORDERED_COMPARE_FLAG = 1,
-    PARTIAL_COMPARE_FLAG = 2;
-
-/** Used as references for various `Number` constants. */
-var MAX_SAFE_INTEGER = 9007199254740991;
-
-/** `Object#toString` result references. */
-var argsTag = '[object Arguments]',
-    arrayTag = '[object Array]',
-    boolTag = '[object Boolean]',
-    dateTag = '[object Date]',
-    errorTag = '[object Error]',
-    funcTag = '[object Function]',
-    genTag = '[object GeneratorFunction]',
-    mapTag = '[object Map]',
-    numberTag = '[object Number]',
-    objectTag = '[object Object]',
-    promiseTag = '[object Promise]',
-    regexpTag = '[object RegExp]',
-    setTag = '[object Set]',
-    stringTag = '[object String]',
-    symbolTag = '[object Symbol]',
-    weakMapTag = '[object WeakMap]';
-
-var arrayBufferTag = '[object ArrayBuffer]',
-    dataViewTag = '[object DataView]',
-    float32Tag = '[object Float32Array]',
-    float64Tag = '[object Float64Array]',
-    int8Tag = '[object Int8Array]',
-    int16Tag = '[object Int16Array]',
-    int32Tag = '[object Int32Array]',
-    uint8Tag = '[object Uint8Array]',
-    uint8ClampedTag = '[object Uint8ClampedArray]',
-    uint16Tag = '[object Uint16Array]',
-    uint32Tag = '[object Uint32Array]';
-
-/**
- * Used to match `RegExp`
- * [syntax characters](http://ecma-international.org/ecma-262/7.0/#sec-patterns).
- */
-var reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
-
-/** Used to detect host constructors (Safari). */
-var reIsHostCtor = /^\[object .+?Constructor\]$/;
-
-/** Used to detect unsigned integer values. */
-var reIsUint = /^(?:0|[1-9]\d*)$/;
-
-/** Used to identify `toStringTag` values of typed arrays. */
-var typedArrayTags = {};
-typedArrayTags[float32Tag] = typedArrayTags[float64Tag] =
-typedArrayTags[int8Tag] = typedArrayTags[int16Tag] =
-typedArrayTags[int32Tag] = typedArrayTags[uint8Tag] =
-typedArrayTags[uint8ClampedTag] = typedArrayTags[uint16Tag] =
-typedArrayTags[uint32Tag] = true;
-typedArrayTags[argsTag] = typedArrayTags[arrayTag] =
-typedArrayTags[arrayBufferTag] = typedArrayTags[boolTag] =
-typedArrayTags[dataViewTag] = typedArrayTags[dateTag] =
-typedArrayTags[errorTag] = typedArrayTags[funcTag] =
-typedArrayTags[mapTag] = typedArrayTags[numberTag] =
-typedArrayTags[objectTag] = typedArrayTags[regexpTag] =
-typedArrayTags[setTag] = typedArrayTags[stringTag] =
-typedArrayTags[weakMapTag] = false;
-
-/** Detect free variable `global` from Node.js. */
-var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;
-
-/** Detect free variable `self`. */
-var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
-
-/** Used as a reference to the global object. */
-var root = freeGlobal || freeSelf || Function('return this')();
-
-/** Detect free variable `exports`. */
-var freeExports = typeof exports == 'object' && exports && !exports.nodeType && exports;
-
-/** Detect free variable `module`. */
-var freeModule = freeExports && typeof module == 'object' && module && !module.nodeType && module;
-
-/** Detect the popular CommonJS extension `module.exports`. */
-var moduleExports = freeModule && freeModule.exports === freeExports;
-
-/** Detect free variable `process` from Node.js. */
-var freeProcess = moduleExports && freeGlobal.process;
-
-/** Used to access faster Node.js helpers. */
-var nodeUtil = (function() {
-  try {
-    return freeProcess && freeProcess.binding('util');
-  } catch (e) {}
-}());
-
-/* Node.js helper references. */
-var nodeIsTypedArray = nodeUtil && nodeUtil.isTypedArray;
-
-/**
- * A specialized version of `_.some` for arrays without support for iteratee
- * shorthands.
- *
- * @private
- * @param {Array} [array] The array to iterate over.
- * @param {Function} predicate The function invoked per iteration.
- * @returns {boolean} Returns `true` if any element passes the predicate check,
- *  else `false`.
- */
-function arraySome(array, predicate) {
-  var index = -1,
-      length = array ? array.length : 0;
-
-  while (++index < length) {
-    if (predicate(array[index], index, array)) {
-      return true;
-    }
-  }
-  return false;
-}
-
-/**
- * The base implementation of `_.times` without support for iteratee shorthands
- * or max array length checks.
- *
- * @private
- * @param {number} n The number of times to invoke `iteratee`.
- * @param {Function} iteratee The function invoked per iteration.
- * @returns {Array} Returns the array of results.
- */
-function baseTimes(n, iteratee) {
-  var index = -1,
-      result = Array(n);
-
-  while (++index < n) {
-    result[index] = iteratee(index);
-  }
-  return result;
-}
-
-/**
- * The base implementation of `_.unary` without support for storing metadata.
- *
- * @private
- * @param {Function} func The function to cap arguments for.
- * @returns {Function} Returns the new capped function.
- */
-function baseUnary(func) {
-  return function(value) {
-    return func(value);
-  };
-}
-
-/**
- * Gets the value at `key` of `object`.
- *
- * @private
- * @param {Object} [object] The object to query.
- * @param {string} key The key of the property to get.
- * @returns {*} Returns the property value.
- */
-function getValue(object, key) {
-  return object == null ? undefined : object[key];
-}
-
-/**
- * Checks if `value` is a host object in IE < 9.
- *
- * @private
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a host object, else `false`.
- */
-function isHostObject(value) {
-  // Many host objects are `Object` objects that can coerce to strings
-  // despite having improperly defined `toString` methods.
-  var result = false;
-  if (value != null && typeof value.toString != 'function') {
-    try {
-      result = !!(value + '');
-    } catch (e) {}
-  }
-  return result;
-}
-
-/**
- * Converts `map` to its key-value pairs.
- *
- * @private
- * @param {Object} map The map to convert.
- * @returns {Array} Returns the key-value pairs.
- */
-function mapToArray(map) {
-  var index = -1,
-      result = Array(map.size);
-
-  map.forEach(function(value, key) {
-    result[++index] = [key, value];
-  });
-  return result;
-}
-
-/**
- * Creates a unary function that invokes `func` with its argument transformed.
- *
- * @private
- * @param {Function} func The function to wrap.
- * @param {Function} transform The argument transform.
- * @returns {Function} Returns the new function.
- */
-function overArg(func, transform) {
-  return function(arg) {
-    return func(transform(arg));
-  };
-}
-
-/**
- * Converts `set` to an array of its values.
- *
- * @private
- * @param {Object} set The set to convert.
- * @returns {Array} Returns the values.
- */
-function setToArray(set) {
-  var index = -1,
-      result = Array(set.size);
-
-  set.forEach(function(value) {
-    result[++index] = value;
-  });
-  return result;
-}
-
-/** Used for built-in method references. */
-var arrayProto = Array.prototype,
-    funcProto = Function.prototype,
-    objectProto = Object.prototype;
-
-/** Used to detect overreaching core-js shims. */
-var coreJsData = root['__core-js_shared__'];
-
-/** Used to detect methods masquerading as native. */
-var maskSrcKey = (function() {
-  var uid = /[^.]+$/.exec(coreJsData && coreJsData.keys && coreJsData.keys.IE_PROTO || '');
-  return uid ? ('Symbol(src)_1.' + uid) : '';
-}());
-
-/** Used to resolve the decompiled source of functions. */
-var funcToString = funcProto.toString;
-
-/** Used to check objects for own properties. */
-var hasOwnProperty = objectProto.hasOwnProperty;
-
-/**
- * Used to resolve the
- * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
- * of values.
- */
-var objectToString = objectProto.toString;
-
-/** Used to detect if a method is native. */
-var reIsNative = RegExp('^' +
-  funcToString.call(hasOwnProperty).replace(reRegExpChar, '\\$&')
-  .replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, '$1.*?') + '$'
-);
-
-/** Built-in value references. */
-var Symbol = root.Symbol,
-    Uint8Array = root.Uint8Array,
-    propertyIsEnumerable = objectProto.propertyIsEnumerable,
-    splice = arrayProto.splice;
-
-/* Built-in method references for those with the same name as other `lodash` methods. */
-var nativeKeys = overArg(Object.keys, Object);
-
-/* Built-in method references that are verified to be native. */
-var DataView = getNative(root, 'DataView'),
-    Map = getNative(root, 'Map'),
-    Promise = getNative(root, 'Promise'),
-    Set = getNative(root, 'Set'),
-    WeakMap = getNative(root, 'WeakMap'),
-    nativeCreate = getNative(Object, 'create');
-
-/** Used to detect maps, sets, and weakmaps. */
-var dataViewCtorString = toSource(DataView),
-    mapCtorString = toSource(Map),
-    promiseCtorString = toSource(Promise),
-    setCtorString = toSource(Set),
-    weakMapCtorString = toSource(WeakMap);
-
-/** Used to convert symbols to primitives and strings. */
-var symbolProto = Symbol ? Symbol.prototype : undefined,
-    symbolValueOf = symbolProto ? symbolProto.valueOf : undefined;
-
-/**
- * Creates a hash object.
- *
- * @private
- * @constructor
- * @param {Array} [entries] The key-value pairs to cache.
- */
-function Hash(entries) {
-  var index = -1,
-      length = entries ? entries.length : 0;
-
-  this.clear();
-  while (++index < length) {
-    var entry = entries[index];
-    this.set(entry[0], entry[1]);
-  }
-}
-
-/**
- * Removes all key-value entries from the hash.
- *
- * @private
- * @name clear
- * @memberOf Hash
- */
-function hashClear() {
-  this.__data__ = nativeCreate ? nativeCreate(null) : {};
-}
-
-/**
- * Removes `key` and its value from the hash.
- *
- * @private
- * @name delete
- * @memberOf Hash
- * @param {Object} hash The hash to modify.
- * @param {string} key The key of the value to remove.
- * @returns {boolean} Returns `true` if the entry was removed, else `false`.
- */
-function hashDelete(key) {
-  return this.has(key) && delete this.__data__[key];
-}
-
-/**
- * Gets the hash value for `key`.
- *
- * @private
- * @name get
- * @memberOf Hash
- * @param {string} key The key of the value to get.
- * @returns {*} Returns the entry value.
- */
-function hashGet(key) {
-  var data = this.__data__;
-  if (nativeCreate) {
-    var result = data[key];
-    return result === HASH_UNDEFINED ? undefined : result;
-  }
-  return hasOwnProperty.call(data, key) ? data[key] : undefined;
-}
-
-/**
- * Checks if a hash value for `key` exists.
- *
- * @private
- * @name has
- * @memberOf Hash
- * @param {string} key The key of the entry to check.
- * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
- */
-function hashHas(key) {
-  var data = this.__data__;
-  return nativeCreate ? data[key] !== undefined : hasOwnProperty.call(data, key);
-}
-
-/**
- * Sets the hash `key` to `value`.
- *
- * @private
- * @name set
- * @memberOf Hash
- * @param {string} key The key of the value to set.
- * @param {*} value The value to set.
- * @returns {Object} Returns the hash instance.
- */
-function hashSet(key, value) {
-  var data = this.__data__;
-  data[key] = (nativeCreate && value === undefined) ? HASH_UNDEFINED : value;
-  return this;
-}
-
-// Add methods to `Hash`.
-Hash.prototype.clear = hashClear;
-Hash.prototype['delete'] = hashDelete;
-Hash.prototype.get = hashGet;
-Hash.prototype.has = hashHas;
-Hash.prototype.set = hashSet;
-
-/**
- * Creates an list cache object.
- *
- * @private
- * @constructor
- * @param {Array} [entries] The key-value pairs to cache.
- */
-function ListCache(entries) {
-  var index = -1,
-      length = entries ? entries.length : 0;
-
-  this.clear();
-  while (++index < length) {
-    var entry = entries[index];
-    this.set(entry[0], entry[1]);
-  }
-}
-
-/**
- * Removes all key-value entries from the list cache.
- *
- * @private
- * @name clear
- * @memberOf ListCache
- */
-function listCacheClear() {
-  this.__data__ = [];
-}
-
-/**
- * Removes `key` and its value from the list cache.
- *
- * @private
- * @name delete
- * @memberOf ListCache
- * @param {string} key The key of the value to remove.
- * @returns {boolean} Returns `true` if the entry was removed, else `false`.
- */
-function listCacheDelete(key) {
-  var data = this.__data__,
-      index = assocIndexOf(data, key);
-
-  if (index < 0) {
-    return false;
-  }
-  var lastIndex = data.length - 1;
-  if (index == lastIndex) {
-    data.pop();
-  } else {
-    splice.call(data, index, 1);
-  }
-  return true;
-}
-
-/**
- * Gets the list cache value for `key`.
- *
- * @private
- * @name get
- * @memberOf ListCache
- * @param {string} key The key of the value to get.
- * @returns {*} Returns the entry value.
- */
-function listCacheGet(key) {
-  var data = this.__data__,
-      index = assocIndexOf(data, key);
-
-  return index < 0 ? undefined : data[index][1];
-}
-
-/**
- * Checks if a list cache value for `key` exists.
- *
- * @private
- * @name has
- * @memberOf ListCache
- * @param {string} key The key of the entry to check.
- * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
- */
-function listCacheHas(key) {
-  return assocIndexOf(this.__data__, key) > -1;
-}
-
-/**
- * Sets the list cache `key` to `value`.
- *
- * @private
- * @name set
- * @memberOf ListCache
- * @param {string} key The key of the value to set.
- * @param {*} value The value to set.
- * @returns {Object} Returns the list cache instance.
- */
-function listCacheSet(key, value) {
-  var data = this.__data__,
-      index = assocIndexOf(data, key);
-
-  if (index < 0) {
-    data.push([key, value]);
-  } else {
-    data[index][1] = value;
-  }
-  return this;
-}
-
-// Add methods to `ListCache`.
-ListCache.prototype.clear = listCacheClear;
-ListCache.prototype['delete'] = listCacheDelete;
-ListCache.prototype.get = listCacheGet;
-ListCache.prototype.has = listCacheHas;
-ListCache.prototype.set = listCacheSet;
-
-/**
- * Creates a map cache object to store key-value pairs.
- *
- * @private
- * @constructor
- * @param {Array} [entries] The key-value pairs to cache.
- */
-function MapCache(entries) {
-  var index = -1,
-      length = entries ? entries.length : 0;
-
-  this.clear();
-  while (++index < length) {
-    var entry = entries[index];
-    this.set(entry[0], entry[1]);
-  }
-}
-
-/**
- * Removes all key-value entries from the map.
- *
- * @private
- * @name clear
- * @memberOf MapCache
- */
-function mapCacheClear() {
-  this.__data__ = {
-    'hash': new Hash,
-    'map': new (Map || ListCache),
-    'string': new Hash
-  };
-}
-
-/**
- * Removes `key` and its value from the map.
- *
- * @private
- * @name delete
- * @memberOf MapCache
- * @param {string} key The key of the value to remove.
- * @returns {boolean} Returns `true` if the entry was removed, else `false`.
- */
-function mapCacheDelete(key) {
-  return getMapData(this, key)['delete'](key);
-}
-
-/**
- * Gets the map value for `key`.
- *
- * @private
- * @name get
- * @memberOf MapCache
- * @param {string} key The key of the value to get.
- * @returns {*} Returns the entry value.
- */
-function mapCacheGet(key) {
-  return getMapData(this, key).get(key);
-}
-
-/**
- * Checks if a map value for `key` exists.
- *
- * @private
- * @name has
- * @memberOf MapCache
- * @param {string} key The key of the entry to check.
- * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
- */
-function mapCacheHas(key) {
-  return getMapData(this, key).has(key);
-}
-
-/**
- * Sets the map `key` to `value`.
- *
- * @private
- * @name set
- * @memberOf MapCache
- * @param {string} key The key of the value to set.
- * @param {*} value The value to set.
- * @returns {Object} Returns the map cache instance.
- */
-function mapCacheSet(key, value) {
-  getMapData(this, key).set(key, value);
-  return this;
-}
-
-// Add methods to `MapCache`.
-MapCache.prototype.clear = mapCacheClear;
-MapCache.prototype['delete'] = mapCacheDelete;
-MapCache.prototype.get = mapCacheGet;
-MapCache.prototype.has = mapCacheHas;
-MapCache.prototype.set = mapCacheSet;
-
-/**
- *
- * Creates an array cache object to store unique values.
- *
- * @private
- * @constructor
- * @param {Array} [values] The values to cache.
- */
-function SetCache(values) {
-  var index = -1,
-      length = values ? values.length : 0;
-
-  this.__data__ = new MapCache;
-  while (++index < length) {
-    this.add(values[index]);
-  }
-}
-
-/**
- * Adds `value` to the array cache.
- *
- * @private
- * @name add
- * @memberOf SetCache
- * @alias push
- * @param {*} value The value to cache.
- * @returns {Object} Returns the cache instance.
- */
-function setCacheAdd(value) {
-  this.__data__.set(value, HASH_UNDEFINED);
-  return this;
-}
-
-/**
- * Checks if `value` is in the array cache.
- *
- * @private
- * @name has
- * @memberOf SetCache
- * @param {*} value The value to search for.
- * @returns {number} Returns `true` if `value` is found, else `false`.
- */
-function setCacheHas(value) {
-  return this.__data__.has(value);
-}
-
-// Add methods to `SetCache`.
-SetCache.prototype.add = SetCache.prototype.push = setCacheAdd;
-SetCache.prototype.has = setCacheHas;
-
-/**
- * Creates a stack cache object to store key-value pairs.
- *
- * @private
- * @constructor
- * @param {Array} [entries] The key-value pairs to cache.
- */
-function Stack(entries) {
-  this.__data__ = new ListCache(entries);
-}
-
-/**
- * Removes all key-value entries from the stack.
- *
- * @private
- * @name clear
- * @memberOf Stack
- */
-function stackClear() {
-  this.__data__ = new ListCache;
-}
-
-/**
- * Removes `key` and its value from the stack.
- *
- * @private
- * @name delete
- * @memberOf Stack
- * @param {string} key The key of the value to remove.
- * @returns {boolean} Returns `true` if the entry was removed, else `false`.
- */
-function stackDelete(key) {
-  return this.__data__['delete'](key);
-}
-
-/**
- * Gets the stack value for `key`.
- *
- * @private
- * @name get
- * @memberOf Stack
- * @param {string} key The key of the value to get.
- * @returns {*} Returns the entry value.
- */
-function stackGet(key) {
-  return this.__data__.get(key);
-}
-
-/**
- * Checks if a stack value for `key` exists.
- *
- * @private
- * @name has
- * @memberOf Stack
- * @param {string} key The key of the entry to check.
- * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
- */
-function stackHas(key) {
-  return this.__data__.has(key);
-}
-
-/**
- * Sets the stack `key` to `value`.
- *
- * @private
- * @name set
- * @memberOf Stack
- * @param {string} key The key of the value to set.
- * @param {*} value The value to set.
- * @returns {Object} Returns the stack cache instance.
- */
-function stackSet(key, value) {
-  var cache = this.__data__;
-  if (cache instanceof ListCache) {
-    var pairs = cache.__data__;
-    if (!Map || (pairs.length < LARGE_ARRAY_SIZE - 1)) {
-      pairs.push([key, value]);
-      return this;
-    }
-    cache = this.__data__ = new MapCache(pairs);
-  }
-  cache.set(key, value);
-  return this;
-}
-
-// Add methods to `Stack`.
-Stack.prototype.clear = stackClear;
-Stack.prototype['delete'] = stackDelete;
-Stack.prototype.get = stackGet;
-Stack.prototype.has = stackHas;
-Stack.prototype.set = stackSet;
-
-/**
- * Creates an array of the enumerable property names of the array-like `value`.
- *
- * @private
- * @param {*} value The value to query.
- * @param {boolean} inherited Specify returning inherited property names.
- * @returns {Array} Returns the array of property names.
- */
-function arrayLikeKeys(value, inherited) {
-  // Safari 8.1 makes `arguments.callee` enumerable in strict mode.
-  // Safari 9 makes `arguments.length` enumerable in strict mode.
-  var result = (isArray(value) || isArguments(value))
-    ? baseTimes(value.length, String)
-    : [];
-
-  var length = result.length,
-      skipIndexes = !!length;
-
-  for (var key in value) {
-    if ((inherited || hasOwnProperty.call(value, key)) &&
-        !(skipIndexes && (key == 'length' || isIndex(key, length)))) {
-      result.push(key);
-    }
-  }
-  return result;
-}
-
-/**
- * Gets the index at which the `key` is found in `array` of key-value pairs.
- *
- * @private
- * @param {Array} array The array to inspect.
- * @param {*} key The key to search for.
- * @returns {number} Returns the index of the matched value, else `-1`.
- */
-function assocIndexOf(array, key) {
-  var length = array.length;
-  while (length--) {
-    if (eq(array[length][0], key)) {
-      return length;
-    }
-  }
-  return -1;
-}
-
-/**
- * The base implementation of `getTag`.
- *
- * @private
- * @param {*} value The value to query.
- * @returns {string} Returns the `toStringTag`.
- */
-function baseGetTag(value) {
-  return objectToString.call(value);
-}
-
-/**
- * The base implementation of `_.isEqual` which supports partial comparisons
- * and tracks traversed objects.
- *
- * @private
- * @param {*} value The value to compare.
- * @param {*} other The other value to compare.
- * @param {Function} [customizer] The function to customize comparisons.
- * @param {boolean} [bitmask] The bitmask of comparison flags.
- *  The bitmask may be composed of the following flags:
- *     1 - Unordered comparison
- *     2 - Partial comparison
- * @param {Object} [stack] Tracks traversed `value` and `other` objects.
- * @returns {boolean} Returns `true` if the values are equivalent, else `false`.
- */
-function baseIsEqual(value, other, customizer, bitmask, stack) {
-  if (value === other) {
-    return true;
-  }
-  if (value == null || other == null || (!isObject(value) && !isObjectLike(other))) {
-    return value !== value && other !== other;
-  }
-  return baseIsEqualDeep(value, other, baseIsEqual, customizer, bitmask, stack);
-}
-
-/**
- * A specialized version of `baseIsEqual` for arrays and objects which performs
- * deep comparisons and tracks traversed objects enabling objects with circular
- * references to be compared.
- *
- * @private
- * @param {Object} object The object to compare.
- * @param {Object} other The other object to compare.
- * @param {Function} equalFunc The function to determine equivalents of values.
- * @param {Function} [customizer] The function to customize comparisons.
- * @param {number} [bitmask] The bitmask of comparison flags. See `baseIsEqual`
- *  for more details.
- * @param {Object} [stack] Tracks traversed `object` and `other` objects.
- * @returns {boolean} Returns `true` if the objects are equivalent, else `false`.
- */
-function baseIsEqualDeep(object, other, equalFunc, customizer, bitmask, stack) {
-  var objIsArr = isArray(object),
-      othIsArr = isArray(other),
-      objTag = arrayTag,
-      othTag = arrayTag;
-
-  if (!objIsArr) {
-    objTag = getTag(object);
-    objTag = objTag == argsTag ? objectTag : objTag;
-  }
-  if (!othIsArr) {
-    othTag = getTag(other);
-    othTag = othTag == argsTag ? objectTag : othTag;
-  }
-  var objIsObj = objTag == objectTag && !isHostObject(object),
-      othIsObj = othTag == objectTag && !isHostObject(other),
-      isSameTag = objTag == othTag;
-
-  if (isSameTag && !objIsObj) {
-    stack || (stack = new Stack);
-    return (objIsArr || isTypedArray(object))
-      ? equalArrays(object, other, equalFunc, customizer, bitmask, stack)
-      : equalByTag(object, other, objTag, equalFunc, customizer, bitmask, stack);
-  }
-  if (!(bitmask & PARTIAL_COMPARE_FLAG)) {
-    var objIsWrapped = objIsObj && hasOwnProperty.call(object, '__wrapped__'),
-        othIsWrapped = othIsObj && hasOwnProperty.call(other, '__wrapped__');
-
-    if (objIsWrapped || othIsWrapped) {
-      var objUnwrapped = objIsWrapped ? object.value() : object,
-          othUnwrapped = othIsWrapped ? other.value() : other;
-
-      stack || (stack = new Stack);
-      return equalFunc(objUnwrapped, othUnwrapped, customizer, bitmask, stack);
-    }
-  }
-  if (!isSameTag) {
-    return false;
-  }
-  stack || (stack = new Stack);
-  return equalObjects(object, other, equalFunc, customizer, bitmask, stack);
-}
-
-/**
- * The base implementation of `_.isNative` without bad shim checks.
- *
- * @private
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a native function,
- *  else `false`.
- */
-function baseIsNative(value) {
-  if (!isObject(value) || isMasked(value)) {
-    return false;
-  }
-  var pattern = (isFunction(value) || isHostObject(value)) ? reIsNative : reIsHostCtor;
-  return pattern.test(toSource(value));
-}
-
-/**
- * The base implementation of `_.isTypedArray` without Node.js optimizations.
- *
- * @private
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a typed array, else `false`.
- */
-function baseIsTypedArray(value) {
-  return isObjectLike(value) &&
-    isLength(value.length) && !!typedArrayTags[objectToString.call(value)];
-}
-
-/**
- * The base implementation of `_.keys` which doesn't treat sparse arrays as dense.
- *
- * @private
- * @param {Object} object The object to query.
- * @returns {Array} Returns the array of property names.
- */
-function baseKeys(object) {
-  if (!isPrototype(object)) {
-    return nativeKeys(object);
-  }
-  var result = [];
-  for (var key in Object(object)) {
-    if (hasOwnProperty.call(object, key) && key != 'constructor') {
-      result.push(key);
-    }
-  }
-  return result;
-}
-
-/**
- * A specialized version of `baseIsEqualDeep` for arrays with support for
- * partial deep comparisons.
- *
- * @private
- * @param {Array} array The array to compare.
- * @param {Array} other The other array to compare.
- * @param {Function} equalFunc The function to determine equivalents of values.
- * @param {Function} customizer The function to customize comparisons.
- * @param {number} bitmask The bitmask of comparison flags. See `baseIsEqual`
- *  for more details.
- * @param {Object} stack Tracks traversed `array` and `other` objects.
- * @returns {boolean} Returns `true` if the arrays are equivalent, else `false`.
- */
-function equalArrays(array, other, equalFunc, customizer, bitmask, stack) {
-  var isPartial = bitmask & PARTIAL_COMPARE_FLAG,
-      arrLength = array.length,
-      othLength = other.length;
-
-  if (arrLength != othLength && !(isPartial && othLength > arrLength)) {
-    return false;
-  }
-  // Assume cyclic values are equal.
-  var stacked = stack.get(array);
-  if (stacked && stack.get(other)) {
-    return stacked == other;
-  }
-  var index = -1,
-      result = true,
-      seen = (bitmask & UNORDERED_COMPARE_FLAG) ? new SetCache : undefined;
-
-  stack.set(array, other);
-  stack.set(other, array);
-
-  // Ignore non-index properties.
-  while (++index < arrLength) {
-    var arrValue = array[index],
-        othValue = other[index];
-
-    if (customizer) {
-      var compared = isPartial
-        ? customizer(othValue, arrValue, index, other, array, stack)
-        : customizer(arrValue, othValue, index, array, other, stack);
-    }
-    if (compared !== undefined) {
-      if (compared) {
-        continue;
-      }
-      result = false;
-      break;
-    }
-    // Recursively compare arrays (susceptible to call stack limits).
-    if (seen) {
-      if (!arraySome(other, function(othValue, othIndex) {
-            if (!seen.has(othIndex) &&
-                (arrValue === othValue || equalFunc(arrValue, othValue, customizer, bitmask, stack))) {
-              return seen.add(othIndex);
-            }
-          })) {
-        result = false;
-        break;
-      }
-    } else if (!(
-          arrValue === othValue ||
-            equalFunc(arrValue, othValue, customizer, bitmask, stack)
-        )) {
-      result = false;
-      break;
-    }
-  }
-  stack['delete'](array);
-  stack['delete'](other);
-  return result;
-}
-
-/**
- * A specialized version of `baseIsEqualDeep` for comparing objects of
- * the same `toStringTag`.
- *
- * **Note:** This function only supports comparing values with tags of
- * `Boolean`, `Date`, `Error`, `Number`, `RegExp`, or `String`.
- *
- * @private
- * @param {Object} object The object to compare.
- * @param {Object} other The other object to compare.
- * @param {string} tag The `toStringTag` of the objects to compare.
- * @param {Function} equalFunc The function to determine equivalents of values.
- * @param {Function} customizer The function to customize comparisons.
- * @param {number} bitmask The bitmask of comparison flags. See `baseIsEqual`
- *  for more details.
- * @param {Object} stack Tracks traversed `object` and `other` objects.
- * @returns {boolean} Returns `true` if the objects are equivalent, else `false`.
- */
-function equalByTag(object, other, tag, equalFunc, customizer, bitmask, stack) {
-  switch (tag) {
-    case dataViewTag:
-      if ((object.byteLength != other.byteLength) ||
-          (object.byteOffset != other.byteOffset)) {
-        return false;
-      }
-      object = object.buffer;
-      other = other.buffer;
-
-    case arrayBufferTag:
-      if ((object.byteLength != other.byteLength) ||
-          !equalFunc(new Uint8Array(object), new Uint8Array(other))) {
-        return false;
-      }
-      return true;
-
-    case boolTag:
-    case dateTag:
-    case numberTag:
-      // Coerce booleans to `1` or `0` and dates to milliseconds.
-      // Invalid dates are coerced to `NaN`.
-      return eq(+object, +other);
-
-    case errorTag:
-      return object.name == other.name && object.message == other.message;
-
-    case regexpTag:
-    case stringTag:
-      // Coerce regexes to strings and treat strings, primitives and objects,
-      // as equal. See http://www.ecma-international.org/ecma-262/7.0/#sec-regexp.prototype.tostring
-      // for more details.
-      return object == (other + '');
-
-    case mapTag:
-      var convert = mapToArray;
-
-    case setTag:
-      var isPartial = bitmask & PARTIAL_COMPARE_FLAG;
-      convert || (convert = setToArray);
-
-      if (object.size != other.size && !isPartial) {
-        return false;
-      }
-      // Assume cyclic values are equal.
-      var stacked = stack.get(object);
-      if (stacked) {
-        return stacked == other;
-      }
-      bitmask |= UNORDERED_COMPARE_FLAG;
-
-      // Recursively compare objects (susceptible to call stack limits).
-      stack.set(object, other);
-      var result = equalArrays(convert(object), convert(other), equalFunc, customizer, bitmask, stack);
-      stack['delete'](object);
-      return result;
-
-    case symbolTag:
-      if (symbolValueOf) {
-        return symbolValueOf.call(object) == symbolValueOf.call(other);
-      }
-  }
-  return false;
-}
-
-/**
- * A specialized version of `baseIsEqualDeep` for objects with support for
- * partial deep comparisons.
- *
- * @private
- * @param {Object} object The object to compare.
- * @param {Object} other The other object to compare.
- * @param {Function} equalFunc The function to determine equivalents of values.
- * @param {Function} customizer The function to customize comparisons.
- * @param {number} bitmask The bitmask of comparison flags. See `baseIsEqual`
- *  for more details.
- * @param {Object} stack Tracks traversed `object` and `other` objects.
- * @returns {boolean} Returns `true` if the objects are equivalent, else `false`.
- */
-function equalObjects(object, other, equalFunc, customizer, bitmask, stack) {
-  var isPartial = bitmask & PARTIAL_COMPARE_FLAG,
-      objProps = keys(object),
-      objLength = objProps.length,
-      othProps = keys(other),
-      othLength = othProps.length;
-
-  if (objLength != othLength && !isPartial) {
-    return false;
-  }
-  var index = objLength;
-  while (index--) {
-    var key = objProps[index];
-    if (!(isPartial ? key in other : hasOwnProperty.call(other, key))) {
-      return false;
-    }
-  }
-  // Assume cyclic values are equal.
-  var stacked = stack.get(object);
-  if (stacked && stack.get(other)) {
-    return stacked == other;
-  }
-  var result = true;
-  stack.set(object, other);
-  stack.set(other, object);
-
-  var skipCtor = isPartial;
-  while (++index < objLength) {
-    key = objProps[index];
-    var objValue = object[key],
-        othValue = other[key];
-
-    if (customizer) {
-      var compared = isPartial
-        ? customizer(othValue, objValue, key, other, object, stack)
-        : customizer(objValue, othValue, key, object, other, stack);
-    }
-    // Recursively compare objects (susceptible to call stack limits).
-    if (!(compared === undefined
-          ? (objValue === othValue || equalFunc(objValue, othValue, customizer, bitmask, stack))
-          : compared
-        )) {
-      result = false;
-      break;
-    }
-    skipCtor || (skipCtor = key == 'constructor');
-  }
-  if (result && !skipCtor) {
-    var objCtor = object.constructor,
-        othCtor = other.constructor;
-
-    // Non `Object` object instances with different constructors are not equal.
-    if (objCtor != othCtor &&
-        ('constructor' in object && 'constructor' in other) &&
-        !(typeof objCtor == 'function' && objCtor instanceof objCtor &&
-          typeof othCtor == 'function' && othCtor instanceof othCtor)) {
-      result = false;
-    }
-  }
-  stack['delete'](object);
-  stack['delete'](other);
-  return result;
-}
-
-/**
- * Gets the data for `map`.
- *
- * @private
- * @param {Object} map The map to query.
- * @param {string} key The reference key.
- * @returns {*} Returns the map data.
- */
-function getMapData(map, key) {
-  var data = map.__data__;
-  return isKeyable(key)
-    ? data[typeof key == 'string' ? 'string' : 'hash']
-    : data.map;
-}
-
-/**
- * Gets the native function at `key` of `object`.
- *
- * @private
- * @param {Object} object The object to query.
- * @param {string} key The key of the method to get.
- * @returns {*} Returns the function if it's native, else `undefined`.
- */
-function getNative(object, key) {
-  var value = getValue(object, key);
-  return baseIsNative(value) ? value : undefined;
-}
-
-/**
- * Gets the `toStringTag` of `value`.
- *
- * @private
- * @param {*} value The value to query.
- * @returns {string} Returns the `toStringTag`.
- */
-var getTag = baseGetTag;
-
-// Fallback for data views, maps, sets, and weak maps in IE 11,
-// for data views in Edge < 14, and promises in Node.js.
-if ((DataView && getTag(new DataView(new ArrayBuffer(1))) != dataViewTag) ||
-    (Map && getTag(new Map) != mapTag) ||
-    (Promise && getTag(Promise.resolve()) != promiseTag) ||
-    (Set && getTag(new Set) != setTag) ||
-    (WeakMap && getTag(new WeakMap) != weakMapTag)) {
-  getTag = function(value) {
-    var result = objectToString.call(value),
-        Ctor = result == objectTag ? value.constructor : undefined,
-        ctorString = Ctor ? toSource(Ctor) : undefined;
-
-    if (ctorString) {
-      switch (ctorString) {
-        case dataViewCtorString: return dataViewTag;
-        case mapCtorString: return mapTag;
-        case promiseCtorString: return promiseTag;
-        case setCtorString: return setTag;
-        case weakMapCtorString: return weakMapTag;
-      }
-    }
-    return result;
-  };
-}
-
-/**
- * Checks if `value` is a valid array-like index.
- *
- * @private
- * @param {*} value The value to check.
- * @param {number} [length=MAX_SAFE_INTEGER] The upper bounds of a valid index.
- * @returns {boolean} Returns `true` if `value` is a valid index, else `false`.
- */
-function isIndex(value, length) {
-  length = length == null ? MAX_SAFE_INTEGER : length;
-  return !!length &&
-    (typeof value == 'number' || reIsUint.test(value)) &&
-    (value > -1 && value % 1 == 0 && value < length);
-}
-
-/**
- * Checks if `value` is suitable for use as unique object key.
- *
- * @private
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is suitable, else `false`.
- */
-function isKeyable(value) {
-  var type = typeof value;
-  return (type == 'string' || type == 'number' || type == 'symbol' || type == 'boolean')
-    ? (value !== '__proto__')
-    : (value === null);
-}
-
-/**
- * Checks if `func` has its source masked.
- *
- * @private
- * @param {Function} func The function to check.
- * @returns {boolean} Returns `true` if `func` is masked, else `false`.
- */
-function isMasked(func) {
-  return !!maskSrcKey && (maskSrcKey in func);
-}
-
-/**
- * Checks if `value` is likely a prototype object.
- *
- * @private
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a prototype, else `false`.
- */
-function isPrototype(value) {
-  var Ctor = value && value.constructor,
-      proto = (typeof Ctor == 'function' && Ctor.prototype) || objectProto;
-
-  return value === proto;
-}
-
-/**
- * Converts `func` to its source code.
- *
- * @private
- * @param {Function} func The function to process.
- * @returns {string} Returns the source code.
- */
-function toSource(func) {
-  if (func != null) {
-    try {
-      return funcToString.call(func);
-    } catch (e) {}
-    try {
-      return (func + '');
-    } catch (e) {}
-  }
-  return '';
-}
-
-/**
- * Performs a
- * [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)
- * comparison between two values to determine if they are equivalent.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to compare.
- * @param {*} other The other value to compare.
- * @returns {boolean} Returns `true` if the values are equivalent, else `false`.
- * @example
- *
- * var object = { 'a': 1 };
- * var other = { 'a': 1 };
- *
- * _.eq(object, object);
- * // => true
- *
- * _.eq(object, other);
- * // => false
- *
- * _.eq('a', 'a');
- * // => true
- *
- * _.eq('a', Object('a'));
- * // => false
- *
- * _.eq(NaN, NaN);
- * // => true
- */
-function eq(value, other) {
-  return value === other || (value !== value && other !== other);
-}
-
-/**
- * Checks if `value` is likely an `arguments` object.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is an `arguments` object,
- *  else `false`.
- * @example
- *
- * _.isArguments(function() { return arguments; }());
- * // => true
- *
- * _.isArguments([1, 2, 3]);
- * // => false
- */
-function isArguments(value) {
-  // Safari 8.1 makes `arguments.callee` enumerable in strict mode.
-  return isArrayLikeObject(value) && hasOwnProperty.call(value, 'callee') &&
-    (!propertyIsEnumerable.call(value, 'callee') || objectToString.call(value) == argsTag);
-}
-
-/**
- * Checks if `value` is classified as an `Array` object.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is an array, else `false`.
- * @example
- *
- * _.isArray([1, 2, 3]);
- * // => true
- *
- * _.isArray(document.body.children);
- * // => false
- *
- * _.isArray('abc');
- * // => false
- *
- * _.isArray(_.noop);
- * // => false
- */
-var isArray = Array.isArray;
-
-/**
- * Checks if `value` is array-like. A value is considered array-like if it's
- * not a function and has a `value.length` that's an integer greater than or
- * equal to `0` and less than or equal to `Number.MAX_SAFE_INTEGER`.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is array-like, else `false`.
- * @example
- *
- * _.isArrayLike([1, 2, 3]);
- * // => true
- *
- * _.isArrayLike(document.body.children);
- * // => true
- *
- * _.isArrayLike('abc');
- * // => true
- *
- * _.isArrayLike(_.noop);
- * // => false
- */
-function isArrayLike(value) {
-  return value != null && isLength(value.length) && !isFunction(value);
-}
-
-/**
- * This method is like `_.isArrayLike` except that it also checks if `value`
- * is an object.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is an array-like object,
- *  else `false`.
- * @example
- *
- * _.isArrayLikeObject([1, 2, 3]);
- * // => true
- *
- * _.isArrayLikeObject(document.body.children);
- * // => true
- *
- * _.isArrayLikeObject('abc');
- * // => false
- *
- * _.isArrayLikeObject(_.noop);
- * // => false
- */
-function isArrayLikeObject(value) {
-  return isObjectLike(value) && isArrayLike(value);
-}
-
-/**
- * Performs a deep comparison between two values to determine if they are
- * equivalent.
- *
- * **Note:** This method supports comparing arrays, array buffers, booleans,
- * date objects, error objects, maps, numbers, `Object` objects, regexes,
- * sets, strings, symbols, and typed arrays. `Object` objects are compared
- * by their own, not inherited, enumerable properties. Functions and DOM
- * nodes are **not** supported.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to compare.
- * @param {*} other The other value to compare.
- * @returns {boolean} Returns `true` if the values are equivalent, else `false`.
- * @example
- *
- * var object = { 'a': 1 };
- * var other = { 'a': 1 };
- *
- * _.isEqual(object, other);
- * // => true
- *
- * object === other;
- * // => false
- */
-function isEqual(value, other) {
-  return baseIsEqual(value, other);
-}
-
-/**
- * Checks if `value` is classified as a `Function` object.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a function, else `false`.
- * @example
- *
- * _.isFunction(_);
- * // => true
- *
- * _.isFunction(/abc/);
- * // => false
- */
-function isFunction(value) {
-  // The use of `Object#toString` avoids issues with the `typeof` operator
-  // in Safari 8-9 which returns 'object' for typed array and other constructors.
-  var tag = isObject(value) ? objectToString.call(value) : '';
-  return tag == funcTag || tag == genTag;
-}
-
-/**
- * Checks if `value` is a valid array-like length.
- *
- * **Note:** This method is loosely based on
- * [`ToLength`](http://ecma-international.org/ecma-262/7.0/#sec-tolength).
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a valid length, else `false`.
- * @example
- *
- * _.isLength(3);
- * // => true
- *
- * _.isLength(Number.MIN_VALUE);
- * // => false
- *
- * _.isLength(Infinity);
- * // => false
- *
- * _.isLength('3');
- * // => false
- */
-function isLength(value) {
-  return typeof value == 'number' &&
-    value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER;
-}
-
-/**
- * Checks if `value` is the
- * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
- * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is an object, else `false`.
- * @example
- *
- * _.isObject({});
- * // => true
- *
- * _.isObject([1, 2, 3]);
- * // => true
- *
- * _.isObject(_.noop);
- * // => true
- *
- * _.isObject(null);
- * // => false
- */
-function isObject(value) {
-  var type = typeof value;
-  return !!value && (type == 'object' || type == 'function');
-}
-
-/**
- * Checks if `value` is object-like. A value is object-like if it's not `null`
- * and has a `typeof` result of "object".
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
- * @example
- *
- * _.isObjectLike({});
- * // => true
- *
- * _.isObjectLike([1, 2, 3]);
- * // => true
- *
- * _.isObjectLike(_.noop);
- * // => false
- *
- * _.isObjectLike(null);
- * // => false
- */
-function isObjectLike(value) {
-  return !!value && typeof value == 'object';
-}
-
-/**
- * Checks if `value` is classified as a typed array.
- *
- * @static
- * @memberOf _
- * @since 3.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a typed array, else `false`.
- * @example
- *
- * _.isTypedArray(new Uint8Array);
- * // => true
- *
- * _.isTypedArray([]);
- * // => false
- */
-var isTypedArray = nodeIsTypedArray ? baseUnary(nodeIsTypedArray) : baseIsTypedArray;
-
-/**
- * Creates an array of the own enumerable property names of `object`.
- *
- * **Note:** Non-object values are coerced to objects. See the
- * [ES spec](http://ecma-international.org/ecma-262/7.0/#sec-object.keys)
- * for more details.
- *
- * @static
- * @since 0.1.0
- * @memberOf _
- * @category Object
- * @param {Object} object The object to query.
- * @returns {Array} Returns the array of property names.
- * @example
- *
- * function Foo() {
- *   this.a = 1;
- *   this.b = 2;
- * }
- *
- * Foo.prototype.c = 3;
- *
- * _.keys(new Foo);
- * // => ['a', 'b'] (iteration order is not guaranteed)
- *
- * _.keys('hi');
- * // => ['0', '1']
- */
-function keys(object) {
-  return isArrayLike(object) ? arrayLikeKeys(object) : baseKeys(object);
-}
-
-module.exports = isEqual;
-
-}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{}],4:[function(require,module,exports){
-(function (global){
-/**
- * lodash (Custom Build) <https://lodash.com/>
- * Build: `lodash modularize exports="npm" -o ./`
- * Copyright jQuery Foundation and other contributors <https://jquery.org/>
- * Released under MIT license <https://lodash.com/license>
- * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
- * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
- */
-var reInterpolate = require('lodash._reinterpolate'),
-    templateSettings = require('lodash.templatesettings');
-
-/** Used as references for various `Number` constants. */
-var INFINITY = 1 / 0,
-    MAX_SAFE_INTEGER = 9007199254740991;
-
-/** `Object#toString` result references. */
-var argsTag = '[object Arguments]',
-    errorTag = '[object Error]',
-    funcTag = '[object Function]',
-    genTag = '[object GeneratorFunction]',
-    symbolTag = '[object Symbol]';
-
-/** Used to match empty string literals in compiled template source. */
-var reEmptyStringLeading = /\b__p \+= '';/g,
-    reEmptyStringMiddle = /\b(__p \+=) '' \+/g,
-    reEmptyStringTrailing = /(__e\(.*?\)|\b__t\)) \+\n'';/g;
-
-/**
- * Used to match
- * [ES template delimiters](http://ecma-international.org/ecma-262/7.0/#sec-template-literal-lexical-components).
- */
-var reEsTemplate = /\$\{([^\\}]*(?:\\.[^\\}]*)*)\}/g;
-
-/** Used to detect unsigned integer values. */
-var reIsUint = /^(?:0|[1-9]\d*)$/;
-
-/** Used to ensure capturing order of template delimiters. */
-var reNoMatch = /($^)/;
-
-/** Used to match unescaped characters in compiled string literals. */
-var reUnescapedString = /['\n\r\u2028\u2029\\]/g;
-
-/** Used to escape characters for inclusion in compiled string literals. */
-var stringEscapes = {
-  '\\': '\\',
-  "'": "'",
-  '\n': 'n',
-  '\r': 'r',
-  '\u2028': 'u2028',
-  '\u2029': 'u2029'
-};
-
-/** Detect free variable `global` from Node.js. */
-var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;
-
-/** Detect free variable `self`. */
-var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
-
-/** Used as a reference to the global object. */
-var root = freeGlobal || freeSelf || Function('return this')();
-
-/**
- * A faster alternative to `Function#apply`, this function invokes `func`
- * with the `this` binding of `thisArg` and the arguments of `args`.
- *
- * @private
- * @param {Function} func The function to invoke.
- * @param {*} thisArg The `this` binding of `func`.
- * @param {Array} args The arguments to invoke `func` with.
- * @returns {*} Returns the result of `func`.
- */
-function apply(func, thisArg, args) {
-  switch (args.length) {
-    case 0: return func.call(thisArg);
-    case 1: return func.call(thisArg, args[0]);
-    case 2: return func.call(thisArg, args[0], args[1]);
-    case 3: return func.call(thisArg, args[0], args[1], args[2]);
-  }
-  return func.apply(thisArg, args);
-}
-
-/**
- * A specialized version of `_.map` for arrays without support for iteratee
- * shorthands.
- *
- * @private
- * @param {Array} [array] The array to iterate over.
- * @param {Function} iteratee The function invoked per iteration.
- * @returns {Array} Returns the new mapped array.
- */
-function arrayMap(array, iteratee) {
-  var index = -1,
-      length = array ? array.length : 0,
-      result = Array(length);
-
-  while (++index < length) {
-    result[index] = iteratee(array[index], index, array);
-  }
-  return result;
-}
-
-/**
- * The base implementation of `_.times` without support for iteratee shorthands
- * or max array length checks.
- *
- * @private
- * @param {number} n The number of times to invoke `iteratee`.
- * @param {Function} iteratee The function invoked per iteration.
- * @returns {Array} Returns the array of results.
- */
-function baseTimes(n, iteratee) {
-  var index = -1,
-      result = Array(n);
-
-  while (++index < n) {
-    result[index] = iteratee(index);
-  }
-  return result;
-}
-
-/**
- * The base implementation of `_.values` and `_.valuesIn` which creates an
- * array of `object` property values corresponding to the property names
- * of `props`.
- *
- * @private
- * @param {Object} object The object to query.
- * @param {Array} props The property names to get values for.
- * @returns {Object} Returns the array of property values.
- */
-function baseValues(object, props) {
-  return arrayMap(props, function(key) {
-    return object[key];
-  });
-}
-
-/**
- * Used by `_.template` to escape characters for inclusion in compiled string literals.
- *
- * @private
- * @param {string} chr The matched character to escape.
- * @returns {string} Returns the escaped character.
- */
-function escapeStringChar(chr) {
-  return '\\' + stringEscapes[chr];
-}
-
-/**
- * Creates a unary function that invokes `func` with its argument transformed.
- *
- * @private
- * @param {Function} func The function to wrap.
- * @param {Function} transform The argument transform.
- * @returns {Function} Returns the new function.
- */
-function overArg(func, transform) {
-  return function(arg) {
-    return func(transform(arg));
-  };
-}
-
-/** Used for built-in method references. */
-var objectProto = Object.prototype;
-
-/** Used to check objects for own properties. */
-var hasOwnProperty = objectProto.hasOwnProperty;
-
-/**
- * Used to resolve the
- * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
- * of values.
- */
-var objectToString = objectProto.toString;
-
-/** Built-in value references. */
-var Symbol = root.Symbol,
-    propertyIsEnumerable = objectProto.propertyIsEnumerable;
-
-/* Built-in method references for those with the same name as other `lodash` methods. */
-var nativeKeys = overArg(Object.keys, Object),
-    nativeMax = Math.max;
-
-/** Used to convert symbols to primitives and strings. */
-var symbolProto = Symbol ? Symbol.prototype : undefined,
-    symbolToString = symbolProto ? symbolProto.toString : undefined;
-
-/**
- * Creates an array of the enumerable property names of the array-like `value`.
- *
- * @private
- * @param {*} value The value to query.
- * @param {boolean} inherited Specify returning inherited property names.
- * @returns {Array} Returns the array of property names.
- */
-function arrayLikeKeys(value, inherited) {
-  // Safari 8.1 makes `arguments.callee` enumerable in strict mode.
-  // Safari 9 makes `arguments.length` enumerable in strict mode.
-  var result = (isArray(value) || isArguments(value))
-    ? baseTimes(value.length, String)
-    : [];
-
-  var length = result.length,
-      skipIndexes = !!length;
-
-  for (var key in value) {
-    if ((inherited || hasOwnProperty.call(value, key)) &&
-        !(skipIndexes && (key == 'length' || isIndex(key, length)))) {
-      result.push(key);
-    }
-  }
-  return result;
-}
-
-/**
- * Used by `_.defaults` to customize its `_.assignIn` use.
- *
- * @private
- * @param {*} objValue The destination value.
- * @param {*} srcValue The source value.
- * @param {string} key The key of the property to assign.
- * @param {Object} object The parent object of `objValue`.
- * @returns {*} Returns the value to assign.
- */
-function assignInDefaults(objValue, srcValue, key, object) {
-  if (objValue === undefined ||
-      (eq(objValue, objectProto[key]) && !hasOwnProperty.call(object, key))) {
-    return srcValue;
-  }
-  return objValue;
-}
-
-/**
- * Assigns `value` to `key` of `object` if the existing value is not equivalent
- * using [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)
- * for equality comparisons.
- *
- * @private
- * @param {Object} object The object to modify.
- * @param {string} key The key of the property to assign.
- * @param {*} value The value to assign.
- */
-function assignValue(object, key, value) {
-  var objValue = object[key];
-  if (!(hasOwnProperty.call(object, key) && eq(objValue, value)) ||
-      (value === undefined && !(key in object))) {
-    object[key] = value;
-  }
-}
-
-/**
- * The base implementation of `_.keys` which doesn't treat sparse arrays as dense.
- *
- * @private
- * @param {Object} object The object to query.
- * @returns {Array} Returns the array of property names.
- */
-function baseKeys(object) {
-  if (!isPrototype(object)) {
-    return nativeKeys(object);
-  }
-  var result = [];
-  for (var key in Object(object)) {
-    if (hasOwnProperty.call(object, key) && key != 'constructor') {
-      result.push(key);
-    }
-  }
-  return result;
-}
-
-/**
- * The base implementation of `_.keysIn` which doesn't treat sparse arrays as dense.
- *
- * @private
- * @param {Object} object The object to query.
- * @returns {Array} Returns the array of property names.
- */
-function baseKeysIn(object) {
-  if (!isObject(object)) {
-    return nativeKeysIn(object);
-  }
-  var isProto = isPrototype(object),
-      result = [];
-
-  for (var key in object) {
-    if (!(key == 'constructor' && (isProto || !hasOwnProperty.call(object, key)))) {
-      result.push(key);
-    }
-  }
-  return result;
-}
-
-/**
- * The base implementation of `_.rest` which doesn't validate or coerce arguments.
- *
- * @private
- * @param {Function} func The function to apply a rest parameter to.
- * @param {number} [start=func.length-1] The start position of the rest parameter.
- * @returns {Function} Returns the new function.
- */
-function baseRest(func, start) {
-  start = nativeMax(start === undefined ? (func.length - 1) : start, 0);
-  return function() {
-    var args = arguments,
-        index = -1,
-        length = nativeMax(args.length - start, 0),
-        array = Array(length);
-
-    while (++index < length) {
-      array[index] = args[start + index];
-    }
-    index = -1;
-    var otherArgs = Array(start + 1);
-    while (++index < start) {
-      otherArgs[index] = args[index];
-    }
-    otherArgs[start] = array;
-    return apply(func, this, otherArgs);
-  };
-}
-
-/**
- * The base implementation of `_.toString` which doesn't convert nullish
- * values to empty strings.
- *
- * @private
- * @param {*} value The value to process.
- * @returns {string} Returns the string.
- */
-function baseToString(value) {
-  // Exit early for strings to avoid a performance hit in some environments.
-  if (typeof value == 'string') {
-    return value;
-  }
-  if (isSymbol(value)) {
-    return symbolToString ? symbolToString.call(value) : '';
-  }
-  var result = (value + '');
-  return (result == '0' && (1 / value) == -INFINITY) ? '-0' : result;
-}
-
-/**
- * Copies properties of `source` to `object`.
- *
- * @private
- * @param {Object} source The object to copy properties from.
- * @param {Array} props The property identifiers to copy.
- * @param {Object} [object={}] The object to copy properties to.
- * @param {Function} [customizer] The function to customize copied values.
- * @returns {Object} Returns `object`.
- */
-function copyObject(source, props, object, customizer) {
-  object || (object = {});
-
-  var index = -1,
-      length = props.length;
-
-  while (++index < length) {
-    var key = props[index];
-
-    var newValue = customizer
-      ? customizer(object[key], source[key], key, object, source)
-      : undefined;
-
-    assignValue(object, key, newValue === undefined ? source[key] : newValue);
-  }
-  return object;
-}
-
-/**
- * Creates a function like `_.assign`.
- *
- * @private
- * @param {Function} assigner The function to assign values.
- * @returns {Function} Returns the new assigner function.
- */
-function createAssigner(assigner) {
-  return baseRest(function(object, sources) {
-    var index = -1,
-        length = sources.length,
-        customizer = length > 1 ? sources[length - 1] : undefined,
-        guard = length > 2 ? sources[2] : undefined;
-
-    customizer = (assigner.length > 3 && typeof customizer == 'function')
-      ? (length--, customizer)
-      : undefined;
-
-    if (guard && isIterateeCall(sources[0], sources[1], guard)) {
-      customizer = length < 3 ? undefined : customizer;
-      length = 1;
-    }
-    object = Object(object);
-    while (++index < length) {
-      var source = sources[index];
-      if (source) {
-        assigner(object, source, index, customizer);
-      }
-    }
-    return object;
-  });
-}
-
-/**
- * Checks if `value` is a valid array-like index.
- *
- * @private
- * @param {*} value The value to check.
- * @param {number} [length=MAX_SAFE_INTEGER] The upper bounds of a valid index.
- * @returns {boolean} Returns `true` if `value` is a valid index, else `false`.
- */
-function isIndex(value, length) {
-  length = length == null ? MAX_SAFE_INTEGER : length;
-  return !!length &&
-    (typeof value == 'number' || reIsUint.test(value)) &&
-    (value > -1 && value % 1 == 0 && value < length);
-}
-
-/**
- * Checks if the given arguments are from an iteratee call.
- *
- * @private
- * @param {*} value The potential iteratee value argument.
- * @param {*} index The potential iteratee index or key argument.
- * @param {*} object The potential iteratee object argument.
- * @returns {boolean} Returns `true` if the arguments are from an iteratee call,
- *  else `false`.
- */
-function isIterateeCall(value, index, object) {
-  if (!isObject(object)) {
-    return false;
-  }
-  var type = typeof index;
-  if (type == 'number'
-        ? (isArrayLike(object) && isIndex(index, object.length))
-        : (type == 'string' && index in object)
-      ) {
-    return eq(object[index], value);
-  }
-  return false;
-}
-
-/**
- * Checks if `value` is likely a prototype object.
- *
- * @private
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a prototype, else `false`.
- */
-function isPrototype(value) {
-  var Ctor = value && value.constructor,
-      proto = (typeof Ctor == 'function' && Ctor.prototype) || objectProto;
-
-  return value === proto;
-}
-
-/**
- * This function is like
- * [`Object.keys`](http://ecma-international.org/ecma-262/7.0/#sec-object.keys)
- * except that it includes inherited enumerable properties.
- *
- * @private
- * @param {Object} object The object to query.
- * @returns {Array} Returns the array of property names.
- */
-function nativeKeysIn(object) {
-  var result = [];
-  if (object != null) {
-    for (var key in Object(object)) {
-      result.push(key);
-    }
-  }
-  return result;
-}
-
-/**
- * Performs a
- * [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)
- * comparison between two values to determine if they are equivalent.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to compare.
- * @param {*} other The other value to compare.
- * @returns {boolean} Returns `true` if the values are equivalent, else `false`.
- * @example
- *
- * var object = { 'a': 1 };
- * var other = { 'a': 1 };
- *
- * _.eq(object, object);
- * // => true
- *
- * _.eq(object, other);
- * // => false
- *
- * _.eq('a', 'a');
- * // => true
- *
- * _.eq('a', Object('a'));
- * // => false
- *
- * _.eq(NaN, NaN);
- * // => true
- */
-function eq(value, other) {
-  return value === other || (value !== value && other !== other);
-}
-
-/**
- * Checks if `value` is likely an `arguments` object.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is an `arguments` object,
- *  else `false`.
- * @example
- *
- * _.isArguments(function() { return arguments; }());
- * // => true
- *
- * _.isArguments([1, 2, 3]);
- * // => false
- */
-function isArguments(value) {
-  // Safari 8.1 makes `arguments.callee` enumerable in strict mode.
-  return isArrayLikeObject(value) && hasOwnProperty.call(value, 'callee') &&
-    (!propertyIsEnumerable.call(value, 'callee') || objectToString.call(value) == argsTag);
-}
-
-/**
- * Checks if `value` is classified as an `Array` object.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is an array, else `false`.
- * @example
- *
- * _.isArray([1, 2, 3]);
- * // => true
- *
- * _.isArray(document.body.children);
- * // => false
- *
- * _.isArray('abc');
- * // => false
- *
- * _.isArray(_.noop);
- * // => false
- */
-var isArray = Array.isArray;
-
-/**
- * Checks if `value` is array-like. A value is considered array-like if it's
- * not a function and has a `value.length` that's an integer greater than or
- * equal to `0` and less than or equal to `Number.MAX_SAFE_INTEGER`.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is array-like, else `false`.
- * @example
- *
- * _.isArrayLike([1, 2, 3]);
- * // => true
- *
- * _.isArrayLike(document.body.children);
- * // => true
- *
- * _.isArrayLike('abc');
- * // => true
- *
- * _.isArrayLike(_.noop);
- * // => false
- */
-function isArrayLike(value) {
-  return value != null && isLength(value.length) && !isFunction(value);
-}
-
-/**
- * This method is like `_.isArrayLike` except that it also checks if `value`
- * is an object.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is an array-like object,
- *  else `false`.
- * @example
- *
- * _.isArrayLikeObject([1, 2, 3]);
- * // => true
- *
- * _.isArrayLikeObject(document.body.children);
- * // => true
- *
- * _.isArrayLikeObject('abc');
- * // => false
- *
- * _.isArrayLikeObject(_.noop);
- * // => false
- */
-function isArrayLikeObject(value) {
-  return isObjectLike(value) && isArrayLike(value);
-}
-
-/**
- * Checks if `value` is an `Error`, `EvalError`, `RangeError`, `ReferenceError`,
- * `SyntaxError`, `TypeError`, or `URIError` object.
- *
- * @static
- * @memberOf _
- * @since 3.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is an error object, else `false`.
- * @example
- *
- * _.isError(new Error);
- * // => true
- *
- * _.isError(Error);
- * // => false
- */
-function isError(value) {
-  if (!isObjectLike(value)) {
-    return false;
-  }
-  return (objectToString.call(value) == errorTag) ||
-    (typeof value.message == 'string' && typeof value.name == 'string');
-}
-
-/**
- * Checks if `value` is classified as a `Function` object.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a function, else `false`.
- * @example
- *
- * _.isFunction(_);
- * // => true
- *
- * _.isFunction(/abc/);
- * // => false
- */
-function isFunction(value) {
-  // The use of `Object#toString` avoids issues with the `typeof` operator
-  // in Safari 8-9 which returns 'object' for typed array and other constructors.
-  var tag = isObject(value) ? objectToString.call(value) : '';
-  return tag == funcTag || tag == genTag;
-}
-
-/**
- * Checks if `value` is a valid array-like length.
- *
- * **Note:** This method is loosely based on
- * [`ToLength`](http://ecma-international.org/ecma-262/7.0/#sec-tolength).
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a valid length, else `false`.
- * @example
- *
- * _.isLength(3);
- * // => true
- *
- * _.isLength(Number.MIN_VALUE);
- * // => false
- *
- * _.isLength(Infinity);
- * // => false
- *
- * _.isLength('3');
- * // => false
- */
-function isLength(value) {
-  return typeof value == 'number' &&
-    value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER;
-}
-
-/**
- * Checks if `value` is the
- * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
- * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is an object, else `false`.
- * @example
- *
- * _.isObject({});
- * // => true
- *
- * _.isObject([1, 2, 3]);
- * // => true
- *
- * _.isObject(_.noop);
- * // => true
- *
- * _.isObject(null);
- * // => false
- */
-function isObject(value) {
-  var type = typeof value;
-  return !!value && (type == 'object' || type == 'function');
-}
-
-/**
- * Checks if `value` is object-like. A value is object-like if it's not `null`
- * and has a `typeof` result of "object".
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
- * @example
- *
- * _.isObjectLike({});
- * // => true
- *
- * _.isObjectLike([1, 2, 3]);
- * // => true
- *
- * _.isObjectLike(_.noop);
- * // => false
- *
- * _.isObjectLike(null);
- * // => false
- */
-function isObjectLike(value) {
-  return !!value && typeof value == 'object';
-}
-
-/**
- * Checks if `value` is classified as a `Symbol` primitive or object.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
- * @example
- *
- * _.isSymbol(Symbol.iterator);
- * // => true
- *
- * _.isSymbol('abc');
- * // => false
- */
-function isSymbol(value) {
-  return typeof value == 'symbol' ||
-    (isObjectLike(value) && objectToString.call(value) == symbolTag);
-}
-
-/**
- * Converts `value` to a string. An empty string is returned for `null`
- * and `undefined` values. The sign of `-0` is preserved.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to process.
- * @returns {string} Returns the string.
- * @example
- *
- * _.toString(null);
- * // => ''
- *
- * _.toString(-0);
- * // => '-0'
- *
- * _.toString([1, 2, 3]);
- * // => '1,2,3'
- */
-function toString(value) {
-  return value == null ? '' : baseToString(value);
-}
-
-/**
- * This method is like `_.assignIn` except that it accepts `customizer`
- * which is invoked to produce the assigned values. If `customizer` returns
- * `undefined`, assignment is handled by the method instead. The `customizer`
- * is invoked with five arguments: (objValue, srcValue, key, object, source).
- *
- * **Note:** This method mutates `object`.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @alias extendWith
- * @category Object
- * @param {Object} object The destination object.
- * @param {...Object} sources The source objects.
- * @param {Function} [customizer] The function to customize assigned values.
- * @returns {Object} Returns `object`.
- * @see _.assignWith
- * @example
- *
- * function customizer(objValue, srcValue) {
- *   return _.isUndefined(objValue) ? srcValue : objValue;
- * }
- *
- * var defaults = _.partialRight(_.assignInWith, customizer);
- *
- * defaults({ 'a': 1 }, { 'b': 2 }, { 'a': 3 });
- * // => { 'a': 1, 'b': 2 }
- */
-var assignInWith = createAssigner(function(object, source, srcIndex, customizer) {
-  copyObject(source, keysIn(source), object, customizer);
-});
-
-/**
- * Creates an array of the own enumerable property names of `object`.
- *
- * **Note:** Non-object values are coerced to objects. See the
- * [ES spec](http://ecma-international.org/ecma-262/7.0/#sec-object.keys)
- * for more details.
- *
- * @static
- * @since 0.1.0
- * @memberOf _
- * @category Object
- * @param {Object} object The object to query.
- * @returns {Array} Returns the array of property names.
- * @example
- *
- * function Foo() {
- *   this.a = 1;
- *   this.b = 2;
- * }
- *
- * Foo.prototype.c = 3;
- *
- * _.keys(new Foo);
- * // => ['a', 'b'] (iteration order is not guaranteed)
- *
- * _.keys('hi');
- * // => ['0', '1']
- */
-function keys(object) {
-  return isArrayLike(object) ? arrayLikeKeys(object) : baseKeys(object);
-}
-
-/**
- * Creates an array of the own and inherited enumerable property names of `object`.
- *
- * **Note:** Non-object values are coerced to objects.
- *
- * @static
- * @memberOf _
- * @since 3.0.0
- * @category Object
- * @param {Object} object The object to query.
- * @returns {Array} Returns the array of property names.
- * @example
- *
- * function Foo() {
- *   this.a = 1;
- *   this.b = 2;
- * }
- *
- * Foo.prototype.c = 3;
- *
- * _.keysIn(new Foo);
- * // => ['a', 'b', 'c'] (iteration order is not guaranteed)
- */
-function keysIn(object) {
-  return isArrayLike(object) ? arrayLikeKeys(object, true) : baseKeysIn(object);
-}
-
-/**
- * Creates a compiled template function that can interpolate data properties
- * in "interpolate" delimiters, HTML-escape interpolated data properties in
- * "escape" delimiters, and execute JavaScript in "evaluate" delimiters. Data
- * properties may be accessed as free variables in the template. If a setting
- * object is given, it takes precedence over `_.templateSettings` values.
- *
- * **Note:** In the development build `_.template` utilizes
- * [sourceURLs](http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/#toc-sourceurl)
- * for easier debugging.
- *
- * For more information on precompiling templates see
- * [lodash's custom builds documentation](https://lodash.com/custom-builds).
- *
- * For more information on Chrome extension sandboxes see
- * [Chrome's extensions documentation](https://developer.chrome.com/extensions/sandboxingEval).
- *
- * @static
- * @since 0.1.0
- * @memberOf _
- * @category String
- * @param {string} [string=''] The template string.
- * @param {Object} [options={}] The options object.
- * @param {RegExp} [options.escape=_.templateSettings.escape]
- *  The HTML "escape" delimiter.
- * @param {RegExp} [options.evaluate=_.templateSettings.evaluate]
- *  The "evaluate" delimiter.
- * @param {Object} [options.imports=_.templateSettings.imports]
- *  An object to import into the template as free variables.
- * @param {RegExp} [options.interpolate=_.templateSettings.interpolate]
- *  The "interpolate" delimiter.
- * @param {string} [options.sourceURL='templateSources[n]']
- *  The sourceURL of the compiled template.
- * @param {string} [options.variable='obj']
- *  The data object variable name.
- * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.
- * @returns {Function} Returns the compiled template function.
- * @example
- *
- * // Use the "interpolate" delimiter to create a compiled template.
- * var compiled = _.template('hello <%= user %>!');
- * compiled({ 'user': 'fred' });
- * // => 'hello fred!'
- *
- * // Use the HTML "escape" delimiter to escape data property values.
- * var compiled = _.template('<b><%- value %></b>');
- * compiled({ 'value': '<script>' });
- * // => '<b>&lt;script&gt;</b>'
- *
- * // Use the "evaluate" delimiter to execute JavaScript and generate HTML.
- * var compiled = _.template('<% _.forEach(users, function(user) { %><li><%- user %></li><% }); %>');
- * compiled({ 'users': ['fred', 'barney'] });
- * // => '<li>fred</li><li>barney</li>'
- *
- * // Use the internal `print` function in "evaluate" delimiters.
- * var compiled = _.template('<% print("hello " + user); %>!');
- * compiled({ 'user': 'barney' });
- * // => 'hello barney!'
- *
- * // Use the ES delimiter as an alternative to the default "interpolate" delimiter.
- * var compiled = _.template('hello ${ user }!');
- * compiled({ 'user': 'pebbles' });
- * // => 'hello pebbles!'
- *
- * // Use backslashes to treat delimiters as plain text.
- * var compiled = _.template('<%= "\\<%- value %\\>" %>');
- * compiled({ 'value': 'ignored' });
- * // => '<%- value %>'
- *
- * // Use the `imports` option to import `jQuery` as `jq`.
- * var text = '<% jq.each(users, function(user) { %><li><%- user %></li><% }); %>';
- * var compiled = _.template(text, { 'imports': { 'jq': jQuery } });
- * compiled({ 'users': ['fred', 'barney'] });
- * // => '<li>fred</li><li>barney</li>'
- *
- * // Use the `sourceURL` option to specify a custom sourceURL for the template.
- * var compiled = _.template('hello <%= user %>!', { 'sourceURL': '/basic/greeting.jst' });
- * compiled(data);
- * // => Find the source of "greeting.jst" under the Sources tab or Resources panel of the web inspector.
- *
- * // Use the `variable` option to ensure a with-statement isn't used in the compiled template.
- * var compiled = _.template('hi <%= data.user %>!', { 'variable': 'data' });
- * compiled.source;
- * // => function(data) {
- * //   var __t, __p = '';
- * //   __p += 'hi ' + ((__t = ( data.user )) == null ? '' : __t) + '!';
- * //   return __p;
- * // }
- *
- * // Use custom template delimiters.
- * _.templateSettings.interpolate = /{{([\s\S]+?)}}/g;
- * var compiled = _.template('hello {{ user }}!');
- * compiled({ 'user': 'mustache' });
- * // => 'hello mustache!'
- *
- * // Use the `source` property to inline compiled templates for meaningful
- * // line numbers in error messages and stack traces.
- * fs.writeFileSync(path.join(process.cwd(), 'jst.js'), '\
- *   var JST = {\
- *     "main": ' + _.template(mainText).source + '\
- *   };\
- * ');
- */
-function template(string, options, guard) {
-  // Based on John Resig's `tmpl` implementation
-  // (http://ejohn.org/blog/javascript-micro-templating/)
-  // and Laura Doktorova's doT.js (https://github.com/olado/doT).
-  var settings = templateSettings.imports._.templateSettings || templateSettings;
-
-  if (guard && isIterateeCall(string, options, guard)) {
-    options = undefined;
-  }
-  string = toString(string);
-  options = assignInWith({}, options, settings, assignInDefaults);
-
-  var imports = assignInWith({}, options.imports, settings.imports, assignInDefaults),
-      importsKeys = keys(imports),
-      importsValues = baseValues(imports, importsKeys);
-
-  var isEscaping,
-      isEvaluating,
-      index = 0,
-      interpolate = options.interpolate || reNoMatch,
-      source = "__p += '";
-
-  // Compile the regexp to match each delimiter.
-  var reDelimiters = RegExp(
-    (options.escape || reNoMatch).source + '|' +
-    interpolate.source + '|' +
-    (interpolate === reInterpolate ? reEsTemplate : reNoMatch).source + '|' +
-    (options.evaluate || reNoMatch).source + '|$'
-  , 'g');
-
-  // Use a sourceURL for easier debugging.
-  var sourceURL = 'sourceURL' in options ? '//# sourceURL=' + options.sourceURL + '\n' : '';
-
-  string.replace(reDelimiters, function(match, escapeValue, interpolateValue, esTemplateValue, evaluateValue, offset) {
-    interpolateValue || (interpolateValue = esTemplateValue);
-
-    // Escape characters that can't be included in string literals.
-    source += string.slice(index, offset).replace(reUnescapedString, escapeStringChar);
-
-    // Replace delimiters with snippets.
-    if (escapeValue) {
-      isEscaping = true;
-      source += "' +\n__e(" + escapeValue + ") +\n'";
-    }
-    if (evaluateValue) {
-      isEvaluating = true;
-      source += "';\n" + evaluateValue + ";\n__p += '";
-    }
-    if (interpolateValue) {
-      source += "' +\n((__t = (" + interpolateValue + ")) == null ? '' : __t) +\n'";
-    }
-    index = offset + match.length;
-
-    // The JS engine embedded in Adobe products needs `match` returned in
-    // order to produce the correct `offset` value.
-    return match;
-  });
-
-  source += "';\n";
-
-  // If `variable` is not specified wrap a with-statement around the generated
-  // code to add the data object to the top of the scope chain.
-  var variable = options.variable;
-  if (!variable) {
-    source = 'with (obj) {\n' + source + '\n}\n';
-  }
-  // Cleanup code by stripping empty strings.
-  source = (isEvaluating ? source.replace(reEmptyStringLeading, '') : source)
-    .replace(reEmptyStringMiddle, '$1')
-    .replace(reEmptyStringTrailing, '$1;');
-
-  // Frame code as the function body.
-  source = 'function(' + (variable || 'obj') + ') {\n' +
-    (variable
-      ? ''
-      : 'obj || (obj = {});\n'
-    ) +
-    "var __t, __p = ''" +
-    (isEscaping
-       ? ', __e = _.escape'
-       : ''
-    ) +
-    (isEvaluating
-      ? ', __j = Array.prototype.join;\n' +
-        "function print() { __p += __j.call(arguments, '') }\n"
-      : ';\n'
-    ) +
-    source +
-    'return __p\n}';
-
-  var result = attempt(function() {
-    return Function(importsKeys, sourceURL + 'return ' + source)
-      .apply(undefined, importsValues);
-  });
-
-  // Provide the compiled function's source by its `toString` method or
-  // the `source` property as a convenience for inlining compiled templates.
-  result.source = source;
-  if (isError(result)) {
-    throw result;
-  }
-  return result;
-}
-
-/**
- * Attempts to invoke `func`, returning either the result or the caught error
- * object. Any additional arguments are provided to `func` when it's invoked.
- *
- * @static
- * @memberOf _
- * @since 3.0.0
- * @category Util
- * @param {Function} func The function to attempt.
- * @param {...*} [args] The arguments to invoke `func` with.
- * @returns {*} Returns the `func` result or error object.
- * @example
- *
- * // Avoid throwing errors for invalid selectors.
- * var elements = _.attempt(function(selector) {
- *   return document.querySelectorAll(selector);
- * }, '>_>');
- *
- * if (_.isError(elements)) {
- *   elements = [];
- * }
- */
-var attempt = baseRest(function(func, args) {
-  try {
-    return apply(func, undefined, args);
-  } catch (e) {
-    return isError(e) ? e : new Error(e);
-  }
-});
-
-module.exports = template;
-
-}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{"lodash._reinterpolate":5,"lodash.templatesettings":6}],5:[function(require,module,exports){
-/**
- * lodash 3.0.0 (Custom Build) <https://lodash.com/>
- * Build: `lodash modern modularize exports="npm" -o ./`
- * Copyright 2012-2015 The Dojo Foundation <http://dojofoundation.org/>
- * Based on Underscore.js 1.7.0 <http://underscorejs.org/LICENSE>
- * Copyright 2009-2015 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
- * Available under MIT license <https://lodash.com/license>
- */
-
-/** Used to match template delimiters. */
-var reInterpolate = /<%=([\s\S]+?)%>/g;
-
-module.exports = reInterpolate;
-
-},{}],6:[function(require,module,exports){
-(function (global){
-/**
- * lodash (Custom Build) <https://lodash.com/>
- * Build: `lodash modularize exports="npm" -o ./`
- * Copyright jQuery Foundation and other contributors <https://jquery.org/>
- * Released under MIT license <https://lodash.com/license>
- * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
- * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
- */
-var reInterpolate = require('lodash._reinterpolate');
-
-/** Used as references for various `Number` constants. */
-var INFINITY = 1 / 0;
-
-/** `Object#toString` result references. */
-var symbolTag = '[object Symbol]';
-
-/** Used to match HTML entities and HTML characters. */
-var reUnescapedHtml = /[&<>"'`]/g,
-    reHasUnescapedHtml = RegExp(reUnescapedHtml.source);
-
-/** Used to match template delimiters. */
-var reEscape = /<%-([\s\S]+?)%>/g,
-    reEvaluate = /<%([\s\S]+?)%>/g;
-
-/** Used to map characters to HTML entities. */
-var htmlEscapes = {
-  '&': '&amp;',
-  '<': '&lt;',
-  '>': '&gt;',
-  '"': '&quot;',
-  "'": '&#39;',
-  '`': '&#96;'
-};
-
-/** Detect free variable `global` from Node.js. */
-var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;
-
-/** Detect free variable `self`. */
-var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
-
-/** Used as a reference to the global object. */
-var root = freeGlobal || freeSelf || Function('return this')();
-
-/**
- * The base implementation of `_.propertyOf` without support for deep paths.
- *
- * @private
- * @param {Object} object The object to query.
- * @returns {Function} Returns the new accessor function.
- */
-function basePropertyOf(object) {
-  return function(key) {
-    return object == null ? undefined : object[key];
-  };
-}
-
-/**
- * Used by `_.escape` to convert characters to HTML entities.
- *
- * @private
- * @param {string} chr The matched character to escape.
- * @returns {string} Returns the escaped character.
- */
-var escapeHtmlChar = basePropertyOf(htmlEscapes);
-
-/** Used for built-in method references. */
-var objectProto = Object.prototype;
-
-/**
- * Used to resolve the
- * [`toStringTag`](http://ecma-international.org/ecma-262/6.0/#sec-object.prototype.tostring)
- * of values.
- */
-var objectToString = objectProto.toString;
-
-/** Built-in value references. */
-var Symbol = root.Symbol;
-
-/** Used to convert symbols to primitives and strings. */
-var symbolProto = Symbol ? Symbol.prototype : undefined,
-    symbolToString = symbolProto ? symbolProto.toString : undefined;
-
-/**
- * By default, the template delimiters used by lodash are like those in
- * embedded Ruby (ERB). Change the following template settings to use
- * alternative delimiters.
- *
- * @static
- * @memberOf _
- * @type {Object}
- */
-var templateSettings = {
-
-  /**
-   * Used to detect `data` property values to be HTML-escaped.
-   *
-   * @memberOf _.templateSettings
-   * @type {RegExp}
-   */
-  'escape': reEscape,
-
-  /**
-   * Used to detect code to be evaluated.
-   *
-   * @memberOf _.templateSettings
-   * @type {RegExp}
-   */
-  'evaluate': reEvaluate,
-
-  /**
-   * Used to detect `data` property values to inject.
-   *
-   * @memberOf _.templateSettings
-   * @type {RegExp}
-   */
-  'interpolate': reInterpolate,
-
-  /**
-   * Used to reference the data object in the template text.
-   *
-   * @memberOf _.templateSettings
-   * @type {string}
-   */
-  'variable': '',
-
-  /**
-   * Used to import variables into the compiled template.
-   *
-   * @memberOf _.templateSettings
-   * @type {Object}
-   */
-  'imports': {
-
-    /**
-     * A reference to the `lodash` function.
-     *
-     * @memberOf _.templateSettings.imports
-     * @type {Function}
-     */
-    '_': { 'escape': escape }
-  }
-};
-
-/**
- * The base implementation of `_.toString` which doesn't convert nullish
- * values to empty strings.
- *
- * @private
- * @param {*} value The value to process.
- * @returns {string} Returns the string.
- */
-function baseToString(value) {
-  // Exit early for strings to avoid a performance hit in some environments.
-  if (typeof value == 'string') {
-    return value;
-  }
-  if (isSymbol(value)) {
-    return symbolToString ? symbolToString.call(value) : '';
-  }
-  var result = (value + '');
-  return (result == '0' && (1 / value) == -INFINITY) ? '-0' : result;
-}
-
-/**
- * Checks if `value` is object-like. A value is object-like if it's not `null`
- * and has a `typeof` result of "object".
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
- * @example
- *
- * _.isObjectLike({});
- * // => true
- *
- * _.isObjectLike([1, 2, 3]);
- * // => true
- *
- * _.isObjectLike(_.noop);
- * // => false
- *
- * _.isObjectLike(null);
- * // => false
- */
-function isObjectLike(value) {
-  return !!value && typeof value == 'object';
-}
-
-/**
- * Checks if `value` is classified as a `Symbol` primitive or object.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
- * @example
- *
- * _.isSymbol(Symbol.iterator);
- * // => true
- *
- * _.isSymbol('abc');
- * // => false
- */
-function isSymbol(value) {
-  return typeof value == 'symbol' ||
-    (isObjectLike(value) && objectToString.call(value) == symbolTag);
-}
-
-/**
- * Converts `value` to a string. An empty string is returned for `null`
- * and `undefined` values. The sign of `-0` is preserved.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to process.
- * @returns {string} Returns the string.
- * @example
- *
- * _.toString(null);
- * // => ''
- *
- * _.toString(-0);
- * // => '-0'
- *
- * _.toString([1, 2, 3]);
- * // => '1,2,3'
- */
-function toString(value) {
-  return value == null ? '' : baseToString(value);
-}
-
-/**
- * Converts the characters "&", "<", ">", '"', "'", and "\`" in `string` to
- * their corresponding HTML entities.
- *
- * **Note:** No other characters are escaped. To escape additional
- * characters use a third-party library like [_he_](https://mths.be/he).
- *
- * Though the ">" character is escaped for symmetry, characters like
- * ">" and "/" don't need escaping in HTML and have no special meaning
- * unless they're part of a tag or unquoted attribute value. See
- * [Mathias Bynens's article](https://mathiasbynens.be/notes/ambiguous-ampersands)
- * (under "semi-related fun fact") for more details.
- *
- * Backticks are escaped because in IE < 9, they can break out of
- * attribute values or HTML comments. See [#59](https://html5sec.org/#59),
- * [#102](https://html5sec.org/#102), [#108](https://html5sec.org/#108), and
- * [#133](https://html5sec.org/#133) of the
- * [HTML5 Security Cheatsheet](https://html5sec.org/) for more details.
- *
- * When working with HTML you should always
- * [quote attribute values](http://wonko.com/post/html-escaping) to reduce
- * XSS vectors.
- *
- * @static
- * @since 0.1.0
- * @memberOf _
- * @category String
- * @param {string} [string=''] The string to escape.
- * @returns {string} Returns the escaped string.
- * @example
- *
- * _.escape('fred, barney, & pebbles');
- * // => 'fred, barney, &amp; pebbles'
- */
-function escape(string) {
-  string = toString(string);
-  return (string && reHasUnescapedHtml.test(string))
-    ? string.replace(reUnescapedHtml, escapeHtmlChar)
-    : string;
-}
-
-module.exports = templateSettings;
-
-}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{"lodash._reinterpolate":5}],7:[function(require,module,exports){
-'use strict';
-
-/**
- * Based off of [the offical Google document](https://developers.google.com/maps/documentation/utilities/polylinealgorithm)
- *
- * Some parts from [this implementation](http://facstaff.unca.edu/mcmcclur/GoogleMaps/EncodePolyline/PolylineEncoder.js)
- * by [Mark McClure](http://facstaff.unca.edu/mcmcclur/)
- *
- * @module polyline
- */
-
-var polyline = {};
-
-function encode(coordinate, factor) {
-    coordinate = Math.round(coordinate * factor);
-    coordinate <<= 1;
-    if (coordinate < 0) {
-        coordinate = ~coordinate;
-    }
-    var output = '';
-    while (coordinate >= 0x20) {
-        output += String.fromCharCode((0x20 | (coordinate & 0x1f)) + 63);
-        coordinate >>= 5;
-    }
-    output += String.fromCharCode(coordinate + 63);
-    return output;
-}
-
-/**
- * Decodes to a [latitude, longitude] coordinates array.
- *
- * This is adapted from the implementation in Project-OSRM.
- *
- * @param {String} str
- * @param {Number} precision
- * @returns {Array}
- *
- * @see https://github.com/Project-OSRM/osrm-frontend/blob/master/WebContent/routing/OSRM.RoutingGeometry.js
- */
-polyline.decode = function(str, precision) {
-    var index = 0,
-        lat = 0,
-        lng = 0,
-        coordinates = [],
-        shift = 0,
-        result = 0,
-        byte = null,
-        latitude_change,
-        longitude_change,
-        factor = Math.pow(10, precision || 5);
-
-    // Coordinates have variable length when encoded, so just keep
-    // track of whether we've hit the end of the string. In each
-    // loop iteration, a single coordinate is decoded.
-    while (index < str.length) {
-
-        // Reset shift, result, and byte
-        byte = null;
-        shift = 0;
-        result = 0;
-
-        do {
-            byte = str.charCodeAt(index++) - 63;
-            result |= (byte & 0x1f) << shift;
-            shift += 5;
-        } while (byte >= 0x20);
-
-        latitude_change = ((result & 1) ? ~(result >> 1) : (result >> 1));
-
-        shift = result = 0;
-
-        do {
-            byte = str.charCodeAt(index++) - 63;
-            result |= (byte & 0x1f) << shift;
-            shift += 5;
-        } while (byte >= 0x20);
-
-        longitude_change = ((result & 1) ? ~(result >> 1) : (result >> 1));
-
-        lat += latitude_change;
-        lng += longitude_change;
-
-        coordinates.push([lat / factor, lng / factor]);
-    }
-
-    return coordinates;
-};
-
-/**
- * Encodes the given [latitude, longitude] coordinates array.
- *
- * @param {Array.<Array.<Number>>} coordinates
- * @param {Number} precision
- * @returns {String}
- */
-polyline.encode = function(coordinates, precision) {
-    if (!coordinates.length) { return ''; }
-
-    var factor = Math.pow(10, precision || 5),
-        output = encode(coordinates[0][0], factor) + encode(coordinates[0][1], factor);
-
-    for (var i = 1; i < coordinates.length; i++) {
-        var a = coordinates[i], b = coordinates[i - 1];
-        output += encode(a[0] - b[0], factor);
-        output += encode(a[1] - b[1], factor);
-    }
-
-    return output;
-};
-
-function flipped(coords) {
-    var flipped = [];
-    for (var i = 0; i < coords.length; i++) {
-        flipped.push(coords[i].slice().reverse());
-    }
-    return flipped;
-}
-
-/**
- * Encodes a GeoJSON LineString feature/geometry.
- *
- * @param {Object} geojson
- * @param {Number} precision
- * @returns {String}
- */
-polyline.fromGeoJSON = function(geojson, precision) {
-    if (geojson && geojson.type === 'Feature') {
-        geojson = geojson.geometry;
-    }
-    if (!geojson || geojson.type !== 'LineString') {
-        throw new Error('Input must be a GeoJSON LineString');
-    }
-    return polyline.encode(flipped(geojson.coordinates), precision);
-};
-
-/**
- * Decodes to a GeoJSON LineString geometry.
- *
- * @param {String} str
- * @param {Number} precision
- * @returns {Object}
- */
-polyline.toGeoJSON = function(str, precision) {
-    var coords = polyline.decode(str, precision);
-    return {
-        type: 'LineString',
-        coordinates: flipped(coords)
-    };
-};
-
-if (typeof module === 'object' && module.exports) {
-    module.exports = polyline;
-}
-
-},{}],8:[function(require,module,exports){
-'use strict';
-
-exports.__esModule = true;
-function createThunkMiddleware(extraArgument) {
-  return function (_ref) {
-    var dispatch = _ref.dispatch;
-    var getState = _ref.getState;
-    return function (next) {
-      return function (action) {
-        if (typeof action === 'function') {
-          return action(dispatch, getState, extraArgument);
-        }
-
-        return next(action);
-      };
-    };
-  };
-}
-
-var thunk = createThunkMiddleware();
-thunk.withExtraArgument = createThunkMiddleware;
-
-exports['default'] = thunk;
-},{}],9:[function(require,module,exports){
-'use strict';
-
-exports.__esModule = true;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-exports['default'] = applyMiddleware;
-
-var _compose = require('./compose');
-
-var _compose2 = _interopRequireDefault(_compose);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
-/**
- * Creates a store enhancer that applies middleware to the dispatch method
- * of the Redux store. This is handy for a variety of tasks, such as expressing
- * asynchronous actions in a concise manner, or logging every action payload.
- *
- * See `redux-thunk` package as an example of the Redux middleware.
- *
- * Because middleware is potentially asynchronous, this should be the first
- * store enhancer in the composition chain.
- *
- * Note that each middleware will be given the `dispatch` and `getState` functions
- * as named arguments.
- *
- * @param {...Function} middlewares The middleware chain to be applied.
- * @returns {Function} A store enhancer applying the middleware.
- */
-function applyMiddleware() {
-  for (var _len = arguments.length, middlewares = Array(_len), _key = 0; _key < _len; _key++) {
-    middlewares[_key] = arguments[_key];
-  }
-
-  return function (createStore) {
-    return function (reducer, preloadedState, enhancer) {
-      var store = createStore(reducer, preloadedState, enhancer);
-      var _dispatch = store.dispatch;
-      var chain = [];
-
-      var middlewareAPI = {
-        getState: store.getState,
-        dispatch: function dispatch(action) {
-          return _dispatch(action);
-        }
-      };
-      chain = middlewares.map(function (middleware) {
-        return middleware(middlewareAPI);
-      });
-      _dispatch = _compose2['default'].apply(undefined, chain)(store.dispatch);
-
-      return _extends({}, store, {
-        dispatch: _dispatch
-      });
-    };
-  };
-}
-},{"./compose":12}],10:[function(require,module,exports){
-'use strict';
-
-exports.__esModule = true;
-exports['default'] = bindActionCreators;
-function bindActionCreator(actionCreator, dispatch) {
-  return function () {
-    return dispatch(actionCreator.apply(undefined, arguments));
-  };
-}
-
-/**
- * Turns an object whose values are action creators, into an object with the
- * same keys, but with every function wrapped into a `dispatch` call so they
- * may be invoked directly. This is just a convenience method, as you can call
- * `store.dispatch(MyActionCreators.doSomething())` yourself just fine.
- *
- * For convenience, you can also pass a single function as the first argument,
- * and get a function in return.
- *
- * @param {Function|Object} actionCreators An object whose values are action
- * creator functions. One handy way to obtain it is to use ES6 `import * as`
- * syntax. You may also pass a single function.
- *
- * @param {Function} dispatch The `dispatch` function available on your Redux
- * store.
- *
- * @returns {Function|Object} The object mimicking the original object, but with
- * every action creator wrapped into the `dispatch` call. If you passed a
- * function as `actionCreators`, the return value will also be a single
- * function.
- */
-function bindActionCreators(actionCreators, dispatch) {
-  if (typeof actionCreators === 'function') {
-    return bindActionCreator(actionCreators, dispatch);
-  }
-
-  if (typeof actionCreators !== 'object' || actionCreators === null) {
-    throw new Error('bindActionCreators expected an object or a function, instead received ' + (actionCreators === null ? 'null' : typeof actionCreators) + '. ' + 'Did you write "import ActionCreators from" instead of "import * as ActionCreators from"?');
-  }
-
-  var keys = Object.keys(actionCreators);
-  var boundActionCreators = {};
-  for (var i = 0; i < keys.length; i++) {
-    var key = keys[i];
-    var actionCreator = actionCreators[key];
-    if (typeof actionCreator === 'function') {
-      boundActionCreators[key] = bindActionCreator(actionCreator, dispatch);
-    }
-  }
-  return boundActionCreators;
-}
-},{}],11:[function(require,module,exports){
-'use strict';
-
-exports.__esModule = true;
-exports['default'] = combineReducers;
-
-var _createStore = require('./createStore');
-
-var _isPlainObject = require('lodash/isPlainObject');
-
-var _isPlainObject2 = _interopRequireDefault(_isPlainObject);
-
-var _warning = require('./utils/warning');
-
-var _warning2 = _interopRequireDefault(_warning);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
-function getUndefinedStateErrorMessage(key, action) {
-  var actionType = action && action.type;
-  var actionName = actionType && '"' + actionType.toString() + '"' || 'an action';
-
-  return 'Given action ' + actionName + ', reducer "' + key + '" returned undefined. ' + 'To ignore an action, you must explicitly return the previous state.';
-}
-
-function getUnexpectedStateShapeWarningMessage(inputState, reducers, action, unexpectedKeyCache) {
-  var reducerKeys = Object.keys(reducers);
-  var argumentName = action && action.type === _createStore.ActionTypes.INIT ? 'preloadedState argument passed to createStore' : 'previous state received by the reducer';
-
-  if (reducerKeys.length === 0) {
-    return 'Store does not have a valid reducer. Make sure the argument passed ' + 'to combineReducers is an object whose values are reducers.';
-  }
-
-  if (!(0, _isPlainObject2['default'])(inputState)) {
-    return 'The ' + argumentName + ' has unexpected type of "' + {}.toString.call(inputState).match(/\s([a-z|A-Z]+)/)[1] + '". Expected argument to be an object with the following ' + ('keys: "' + reducerKeys.join('", "') + '"');
-  }
-
-  var unexpectedKeys = Object.keys(inputState).filter(function (key) {
-    return !reducers.hasOwnProperty(key) && !unexpectedKeyCache[key];
-  });
-
-  unexpectedKeys.forEach(function (key) {
-    unexpectedKeyCache[key] = true;
-  });
-
-  if (unexpectedKeys.length > 0) {
-    return 'Unexpected ' + (unexpectedKeys.length > 1 ? 'keys' : 'key') + ' ' + ('"' + unexpectedKeys.join('", "') + '" found in ' + argumentName + '. ') + 'Expected to find one of the known reducer keys instead: ' + ('"' + reducerKeys.join('", "') + '". Unexpected keys will be ignored.');
-  }
-}
-
-function assertReducerSanity(reducers) {
-  Object.keys(reducers).forEach(function (key) {
-    var reducer = reducers[key];
-    var initialState = reducer(undefined, { type: _createStore.ActionTypes.INIT });
-
-    if (typeof initialState === 'undefined') {
-      throw new Error('Reducer "' + key + '" returned undefined during initialization. ' + 'If the state passed to the reducer is undefined, you must ' + 'explicitly return the initial state. The initial state may ' + 'not be undefined.');
-    }
-
-    var type = '@@redux/PROBE_UNKNOWN_ACTION_' + Math.random().toString(36).substring(7).split('').join('.');
-    if (typeof reducer(undefined, { type: type }) === 'undefined') {
-      throw new Error('Reducer "' + key + '" returned undefined when probed with a random type. ' + ('Don\'t try to handle ' + _createStore.ActionTypes.INIT + ' or other actions in "redux/*" ') + 'namespace. They are considered private. Instead, you must return the ' + 'current state for any unknown actions, unless it is undefined, ' + 'in which case you must return the initial state, regardless of the ' + 'action type. The initial state may not be undefined.');
-    }
-  });
-}
-
-/**
- * Turns an object whose values are different reducer functions, into a single
- * reducer function. It will call every child reducer, and gather their results
- * into a single state object, whose keys correspond to the keys of the passed
- * reducer functions.
- *
- * @param {Object} reducers An object whose values correspond to different
- * reducer functions that need to be combined into one. One handy way to obtain
- * it is to use ES6 `import * as reducers` syntax. The reducers may never return
- * undefined for any action. Instead, they should return their initial state
- * if the state passed to them was undefined, and the current state for any
- * unrecognized action.
- *
- * @returns {Function} A reducer function that invokes every reducer inside the
- * passed object, and builds a state object with the same shape.
- */
-function combineReducers(reducers) {
-  var reducerKeys = Object.keys(reducers);
-  var finalReducers = {};
-  for (var i = 0; i < reducerKeys.length; i++) {
-    var key = reducerKeys[i];
-
-    if ("production" !== 'production') {
-      if (typeof reducers[key] === 'undefined') {
-        (0, _warning2['default'])('No reducer provided for key "' + key + '"');
-      }
-    }
-
-    if (typeof reducers[key] === 'function') {
-      finalReducers[key] = reducers[key];
-    }
-  }
-  var finalReducerKeys = Object.keys(finalReducers);
-
-  if ("production" !== 'production') {
-    var unexpectedKeyCache = {};
-  }
-
-  var sanityError;
-  try {
-    assertReducerSanity(finalReducers);
-  } catch (e) {
-    sanityError = e;
-  }
-
-  return function combination() {
-    var state = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
-    var action = arguments[1];
-
-    if (sanityError) {
-      throw sanityError;
-    }
-
-    if ("production" !== 'production') {
-      var warningMessage = getUnexpectedStateShapeWarningMessage(state, finalReducers, action, unexpectedKeyCache);
-      if (warningMessage) {
-        (0, _warning2['default'])(warningMessage);
-      }
-    }
-
-    var hasChanged = false;
-    var nextState = {};
-    for (var i = 0; i < finalReducerKeys.length; i++) {
-      var key = finalReducerKeys[i];
-      var reducer = finalReducers[key];
-      var previousStateForKey = state[key];
-      var nextStateForKey = reducer(previousStateForKey, action);
-      if (typeof nextStateForKey === 'undefined') {
-        var errorMessage = getUndefinedStateErrorMessage(key, action);
-        throw new Error(errorMessage);
-      }
-      nextState[key] = nextStateForKey;
-      hasChanged = hasChanged || nextStateForKey !== previousStateForKey;
-    }
-    return hasChanged ? nextState : state;
-  };
-}
-},{"./createStore":13,"./utils/warning":15,"lodash/isPlainObject":25}],12:[function(require,module,exports){
-"use strict";
-
-exports.__esModule = true;
-exports["default"] = compose;
-/**
- * Composes single-argument functions from right to left. The rightmost
- * function can take multiple arguments as it provides the signature for
- * the resulting composite function.
- *
- * @param {...Function} funcs The functions to compose.
- * @returns {Function} A function obtained by composing the argument functions
- * from right to left. For example, compose(f, g, h) is identical to doing
- * (...args) => f(g(h(...args))).
- */
-
-function compose() {
-  for (var _len = arguments.length, funcs = Array(_len), _key = 0; _key < _len; _key++) {
-    funcs[_key] = arguments[_key];
-  }
-
-  if (funcs.length === 0) {
-    return function (arg) {
-      return arg;
-    };
-  }
-
-  if (funcs.length === 1) {
-    return funcs[0];
-  }
-
-  var last = funcs[funcs.length - 1];
-  var rest = funcs.slice(0, -1);
-  return function () {
-    return rest.reduceRight(function (composed, f) {
-      return f(composed);
-    }, last.apply(undefined, arguments));
-  };
-}
-},{}],13:[function(require,module,exports){
-'use strict';
-
-exports.__esModule = true;
-exports.ActionTypes = undefined;
-exports['default'] = createStore;
-
-var _isPlainObject = require('lodash/isPlainObject');
-
-var _isPlainObject2 = _interopRequireDefault(_isPlainObject);
-
-var _symbolObservable = require('symbol-observable');
-
-var _symbolObservable2 = _interopRequireDefault(_symbolObservable);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
-/**
- * These are private action types reserved by Redux.
- * For any unknown actions, you must return the current state.
- * If the current state is undefined, you must return the initial state.
- * Do not reference these action types directly in your code.
- */
-var ActionTypes = exports.ActionTypes = {
-  INIT: '@@redux/INIT'
-};
-
-/**
- * Creates a Redux store that holds the state tree.
- * The only way to change the data in the store is to call `dispatch()` on it.
- *
- * There should only be a single store in your app. To specify how different
- * parts of the state tree respond to actions, you may combine several reducers
- * into a single reducer function by using `combineReducers`.
- *
- * @param {Function} reducer A function that returns the next state tree, given
- * the current state tree and the action to handle.
- *
- * @param {any} [preloadedState] The initial state. You may optionally specify it
- * to hydrate the state from the server in universal apps, or to restore a
- * previously serialized user session.
- * If you use `combineReducers` to produce the root reducer function, this must be
- * an object with the same shape as `combineReducers` keys.
- *
- * @param {Function} enhancer The store enhancer. You may optionally specify it
- * to enhance the store with third-party capabilities such as middleware,
- * time travel, persistence, etc. The only store enhancer that ships with Redux
- * is `applyMiddleware()`.
- *
- * @returns {Store} A Redux store that lets you read the state, dispatch actions
- * and subscribe to changes.
- */
-function createStore(reducer, preloadedState, enhancer) {
-  var _ref2;
-
-  if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
-    enhancer = preloadedState;
-    preloadedState = undefined;
-  }
-
-  if (typeof enhancer !== 'undefined') {
-    if (typeof enhancer !== 'function') {
-      throw new Error('Expected the enhancer to be a function.');
-    }
-
-    return enhancer(createStore)(reducer, preloadedState);
-  }
-
-  if (typeof reducer !== 'function') {
-    throw new Error('Expected the reducer to be a function.');
-  }
-
-  var currentReducer = reducer;
-  var currentState = preloadedState;
-  var currentListeners = [];
-  var nextListeners = currentListeners;
-  var isDispatching = false;
-
-  function ensureCanMutateNextListeners() {
-    if (nextListeners === currentListeners) {
-      nextListeners = currentListeners.slice();
-    }
-  }
-
-  /**
-   * Reads the state tree managed by the store.
-   *
-   * @returns {any} The current state tree of your application.
-   */
-  function getState() {
-    return currentState;
-  }
-
-  /**
-   * Adds a change listener. It will be called any time an action is dispatched,
-   * and some part of the state tree may potentially have changed. You may then
-   * call `getState()` to read the current state tree inside the callback.
-   *
-   * You may call `dispatch()` from a change listener, with the following
-   * caveats:
-   *
-   * 1. The subscriptions are snapshotted just before every `dispatch()` call.
-   * If you subscribe or unsubscribe while the listeners are being invoked, this
-   * will not have any effect on the `dispatch()` that is currently in progress.
-   * However, the next `dispatch()` call, whether nested or not, will use a more
-   * recent snapshot of the subscription list.
-   *
-   * 2. The listener should not expect to see all state changes, as the state
-   * might have been updated multiple times during a nested `dispatch()` before
-   * the listener is called. It is, however, guaranteed that all subscribers
-   * registered before the `dispatch()` started will be called with the latest
-   * state by the time it exits.
-   *
-   * @param {Function} listener A callback to be invoked on every dispatch.
-   * @returns {Function} A function to remove this change listener.
-   */
-  function subscribe(listener) {
-    if (typeof listener !== 'function') {
-      throw new Error('Expected listener to be a function.');
-    }
-
-    var isSubscribed = true;
-
-    ensureCanMutateNextListeners();
-    nextListeners.push(listener);
-
-    return function unsubscribe() {
-      if (!isSubscribed) {
-        return;
-      }
-
-      isSubscribed = false;
-
-      ensureCanMutateNextListeners();
-      var index = nextListeners.indexOf(listener);
-      nextListeners.splice(index, 1);
-    };
-  }
-
-  /**
-   * Dispatches an action. It is the only way to trigger a state change.
-   *
-   * The `reducer` function, used to create the store, will be called with the
-   * current state tree and the given `action`. Its return value will
-   * be considered the **next** state of the tree, and the change listeners
-   * will be notified.
-   *
-   * The base implementation only supports plain object actions. If you want to
-   * dispatch a Promise, an Observable, a thunk, or something else, you need to
-   * wrap your store creating function into the corresponding middleware. For
-   * example, see the documentation for the `redux-thunk` package. Even the
-   * middleware will eventually dispatch plain object actions using this method.
-   *
-   * @param {Object} action A plain object representing “what changed”. It is
-   * a good idea to keep actions serializable so you can record and replay user
-   * sessions, or use the time travelling `redux-devtools`. An action must have
-   * a `type` property which may not be `undefined`. It is a good idea to use
-   * string constants for action types.
-   *
-   * @returns {Object} For convenience, the same action object you dispatched.
-   *
-   * Note that, if you use a custom middleware, it may wrap `dispatch()` to
-   * return something else (for example, a Promise you can await).
-   */
-  function dispatch(action) {
-    if (!(0, _isPlainObject2['default'])(action)) {
-      throw new Error('Actions must be plain objects. ' + 'Use custom middleware for async actions.');
-    }
-
-    if (typeof action.type === 'undefined') {
-      throw new Error('Actions may not have an undefined "type" property. ' + 'Have you misspelled a constant?');
-    }
-
-    if (isDispatching) {
-      throw new Error('Reducers may not dispatch actions.');
-    }
-
-    try {
-      isDispatching = true;
-      currentState = currentReducer(currentState, action);
-    } finally {
-      isDispatching = false;
-    }
-
-    var listeners = currentListeners = nextListeners;
-    for (var i = 0; i < listeners.length; i++) {
-      listeners[i]();
-    }
-
-    return action;
-  }
-
-  /**
-   * Replaces the reducer currently used by the store to calculate the state.
-   *
-   * You might need this if your app implements code splitting and you want to
-   * load some of the reducers dynamically. You might also need this if you
-   * implement a hot reloading mechanism for Redux.
-   *
-   * @param {Function} nextReducer The reducer for the store to use instead.
-   * @returns {void}
-   */
-  function replaceReducer(nextReducer) {
-    if (typeof nextReducer !== 'function') {
-      throw new Error('Expected the nextReducer to be a function.');
-    }
-
-    currentReducer = nextReducer;
-    dispatch({ type: ActionTypes.INIT });
-  }
-
-  /**
-   * Interoperability point for observable/reactive libraries.
-   * @returns {observable} A minimal observable of state changes.
-   * For more information, see the observable proposal:
-   * https://github.com/zenparsing/es-observable
-   */
-  function observable() {
-    var _ref;
-
-    var outerSubscribe = subscribe;
-    return _ref = {
-      /**
-       * The minimal observable subscription method.
-       * @param {Object} observer Any object that can be used as an observer.
-       * The observer object should have a `next` method.
-       * @returns {subscription} An object with an `unsubscribe` method that can
-       * be used to unsubscribe the observable from the store, and prevent further
-       * emission of values from the observable.
-       */
-      subscribe: function subscribe(observer) {
-        if (typeof observer !== 'object') {
-          throw new TypeError('Expected the observer to be an object.');
-        }
-
-        function observeState() {
-          if (observer.next) {
-            observer.next(getState());
-          }
-        }
-
-        observeState();
-        var unsubscribe = outerSubscribe(observeState);
-        return { unsubscribe: unsubscribe };
-      }
-    }, _ref[_symbolObservable2['default']] = function () {
-      return this;
-    }, _ref;
-  }
-
-  // When a store is created, an "INIT" action is dispatched so that every
-  // reducer returns their initial state. This effectively populates
-  // the initial state tree.
-  dispatch({ type: ActionTypes.INIT });
-
-  return _ref2 = {
-    dispatch: dispatch,
-    subscribe: subscribe,
-    getState: getState,
-    replaceReducer: replaceReducer
-  }, _ref2[_symbolObservable2['default']] = observable, _ref2;
-}
-},{"lodash/isPlainObject":25,"symbol-observable":26}],14:[function(require,module,exports){
-'use strict';
-
-exports.__esModule = true;
-exports.compose = exports.applyMiddleware = exports.bindActionCreators = exports.combineReducers = exports.createStore = undefined;
-
-var _createStore = require('./createStore');
-
-var _createStore2 = _interopRequireDefault(_createStore);
-
-var _combineReducers = require('./combineReducers');
-
-var _combineReducers2 = _interopRequireDefault(_combineReducers);
-
-var _bindActionCreators = require('./bindActionCreators');
-
-var _bindActionCreators2 = _interopRequireDefault(_bindActionCreators);
-
-var _applyMiddleware = require('./applyMiddleware');
-
-var _applyMiddleware2 = _interopRequireDefault(_applyMiddleware);
-
-var _compose = require('./compose');
-
-var _compose2 = _interopRequireDefault(_compose);
-
-var _warning = require('./utils/warning');
-
-var _warning2 = _interopRequireDefault(_warning);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
-/*
-* This is a dummy function to check if the function name has been altered by minification.
-* If the function has been minified and NODE_ENV !== 'production', warn the user.
-*/
-function isCrushed() {}
-
-if ("production" !== 'production' && typeof isCrushed.name === 'string' && isCrushed.name !== 'isCrushed') {
-  (0, _warning2['default'])('You are currently using minified code outside of NODE_ENV === \'production\'. ' + 'This means that you are running a slower development build of Redux. ' + 'You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify ' + 'or DefinePlugin for webpack (http://stackoverflow.com/questions/30030031) ' + 'to ensure you have the correct code for your production build.');
-}
-
-exports.createStore = _createStore2['default'];
-exports.combineReducers = _combineReducers2['default'];
-exports.bindActionCreators = _bindActionCreators2['default'];
-exports.applyMiddleware = _applyMiddleware2['default'];
-exports.compose = _compose2['default'];
-},{"./applyMiddleware":9,"./bindActionCreators":10,"./combineReducers":11,"./compose":12,"./createStore":13,"./utils/warning":15}],15:[function(require,module,exports){
-'use strict';
-
-exports.__esModule = true;
-exports['default'] = warning;
-/**
- * Prints a warning in the console if it exists.
- *
- * @param {String} message The warning message.
- * @returns {void}
- */
-function warning(message) {
-  /* eslint-disable no-console */
-  if (typeof console !== 'undefined' && typeof console.error === 'function') {
-    console.error(message);
-  }
-  /* eslint-enable no-console */
-  try {
-    // This error was thrown as a convenience so that if you enable
-    // "break on all exceptions" in your console,
-    // it would pause the execution at this line.
-    throw new Error(message);
-    /* eslint-disable no-empty */
-  } catch (e) {}
-  /* eslint-enable no-empty */
-}
-},{}],16:[function(require,module,exports){
-var root = require('./_root');
-
-/** Built-in value references. */
-var Symbol = root.Symbol;
-
-module.exports = Symbol;
-
-},{"./_root":23}],17:[function(require,module,exports){
-var Symbol = require('./_Symbol'),
-    getRawTag = require('./_getRawTag'),
-    objectToString = require('./_objectToString');
-
-/** `Object#toString` result references. */
-var nullTag = '[object Null]',
-    undefinedTag = '[object Undefined]';
-
-/** Built-in value references. */
-var symToStringTag = Symbol ? Symbol.toStringTag : undefined;
-
-/**
- * The base implementation of `getTag` without fallbacks for buggy environments.
- *
- * @private
- * @param {*} value The value to query.
- * @returns {string} Returns the `toStringTag`.
- */
-function baseGetTag(value) {
-  if (value == null) {
-    return value === undefined ? undefinedTag : nullTag;
-  }
-  value = Object(value);
-  return (symToStringTag && symToStringTag in value)
-    ? getRawTag(value)
-    : objectToString(value);
-}
-
-module.exports = baseGetTag;
-
-},{"./_Symbol":16,"./_getRawTag":20,"./_objectToString":21}],18:[function(require,module,exports){
-(function (global){
-/** Detect free variable `global` from Node.js. */
-var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;
-
-module.exports = freeGlobal;
-
-}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{}],19:[function(require,module,exports){
-var overArg = require('./_overArg');
-
-/** Built-in value references. */
-var getPrototype = overArg(Object.getPrototypeOf, Object);
-
-module.exports = getPrototype;
-
-},{"./_overArg":22}],20:[function(require,module,exports){
-var Symbol = require('./_Symbol');
-
-/** Used for built-in method references. */
-var objectProto = Object.prototype;
-
-/** Used to check objects for own properties. */
-var hasOwnProperty = objectProto.hasOwnProperty;
-
-/**
- * Used to resolve the
- * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
- * of values.
- */
-var nativeObjectToString = objectProto.toString;
-
-/** Built-in value references. */
-var symToStringTag = Symbol ? Symbol.toStringTag : undefined;
-
-/**
- * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
- *
- * @private
- * @param {*} value The value to query.
- * @returns {string} Returns the raw `toStringTag`.
- */
-function getRawTag(value) {
-  var isOwn = hasOwnProperty.call(value, symToStringTag),
-      tag = value[symToStringTag];
-
-  try {
-    value[symToStringTag] = undefined;
-    var unmasked = true;
-  } catch (e) {}
-
-  var result = nativeObjectToString.call(value);
-  if (unmasked) {
-    if (isOwn) {
-      value[symToStringTag] = tag;
-    } else {
-      delete value[symToStringTag];
-    }
-  }
-  return result;
-}
-
-module.exports = getRawTag;
-
-},{"./_Symbol":16}],21:[function(require,module,exports){
-/** Used for built-in method references. */
-var objectProto = Object.prototype;
-
-/**
- * Used to resolve the
- * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
- * of values.
- */
-var nativeObjectToString = objectProto.toString;
-
-/**
- * Converts `value` to a string using `Object.prototype.toString`.
- *
- * @private
- * @param {*} value The value to convert.
- * @returns {string} Returns the converted string.
- */
-function objectToString(value) {
-  return nativeObjectToString.call(value);
-}
-
-module.exports = objectToString;
-
-},{}],22:[function(require,module,exports){
-/**
- * Creates a unary function that invokes `func` with its argument transformed.
- *
- * @private
- * @param {Function} func The function to wrap.
- * @param {Function} transform The argument transform.
- * @returns {Function} Returns the new function.
- */
-function overArg(func, transform) {
-  return function(arg) {
-    return func(transform(arg));
-  };
-}
-
-module.exports = overArg;
-
-},{}],23:[function(require,module,exports){
-var freeGlobal = require('./_freeGlobal');
-
-/** Detect free variable `self`. */
-var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
-
-/** Used as a reference to the global object. */
-var root = freeGlobal || freeSelf || Function('return this')();
-
-module.exports = root;
-
-},{"./_freeGlobal":18}],24:[function(require,module,exports){
-/**
- * Checks if `value` is object-like. A value is object-like if it's not `null`
- * and has a `typeof` result of "object".
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
- * @example
- *
- * _.isObjectLike({});
- * // => true
- *
- * _.isObjectLike([1, 2, 3]);
- * // => true
- *
- * _.isObjectLike(_.noop);
- * // => false
- *
- * _.isObjectLike(null);
- * // => false
- */
-function isObjectLike(value) {
-  return value != null && typeof value == 'object';
-}
-
-module.exports = isObjectLike;
-
-},{}],25:[function(require,module,exports){
-var baseGetTag = require('./_baseGetTag'),
-    getPrototype = require('./_getPrototype'),
-    isObjectLike = require('./isObjectLike');
-
-/** `Object#toString` result references. */
-var objectTag = '[object Object]';
-
-/** Used for built-in method references. */
-var funcProto = Function.prototype,
-    objectProto = Object.prototype;
-
-/** Used to resolve the decompiled source of functions. */
-var funcToString = funcProto.toString;
-
-/** Used to check objects for own properties. */
-var hasOwnProperty = objectProto.hasOwnProperty;
-
-/** Used to infer the `Object` constructor. */
-var objectCtorString = funcToString.call(Object);
-
-/**
- * Checks if `value` is a plain object, that is, an object created by the
- * `Object` constructor or one with a `[[Prototype]]` of `null`.
- *
- * @static
- * @memberOf _
- * @since 0.8.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a plain object, else `false`.
- * @example
- *
- * function Foo() {
- *   this.a = 1;
- * }
- *
- * _.isPlainObject(new Foo);
- * // => false
- *
- * _.isPlainObject([1, 2, 3]);
- * // => false
- *
- * _.isPlainObject({ 'x': 0, 'y': 0 });
- * // => true
- *
- * _.isPlainObject(Object.create(null));
- * // => true
- */
-function isPlainObject(value) {
-  if (!isObjectLike(value) || baseGetTag(value) != objectTag) {
-    return false;
-  }
-  var proto = getPrototype(value);
-  if (proto === null) {
-    return true;
-  }
-  var Ctor = hasOwnProperty.call(proto, 'constructor') && proto.constructor;
-  return typeof Ctor == 'function' && Ctor instanceof Ctor &&
-    funcToString.call(Ctor) == objectCtorString;
-}
-
-module.exports = isPlainObject;
-
-},{"./_baseGetTag":17,"./_getPrototype":19,"./isObjectLike":24}],26:[function(require,module,exports){
-module.exports = require('./lib/index');
-
-},{"./lib/index":27}],27:[function(require,module,exports){
-(function (global){
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _ponyfill = require('./ponyfill');
-
-var _ponyfill2 = _interopRequireDefault(_ponyfill);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
-var root; /* global window */
-
-
-if (typeof self !== 'undefined') {
-  root = self;
-} else if (typeof window !== 'undefined') {
-  root = window;
-} else if (typeof global !== 'undefined') {
-  root = global;
-} else if (typeof module !== 'undefined') {
-  root = module;
-} else {
-  root = Function('return this')();
-}
-
-var result = (0, _ponyfill2['default'])(root);
-exports['default'] = result;
-}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{"./ponyfill":28}],28:[function(require,module,exports){
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-	value: true
-});
-exports['default'] = symbolObservablePonyfill;
-function symbolObservablePonyfill(root) {
-	var result;
-	var _Symbol = root.Symbol;
-
-	if (typeof _Symbol === 'function') {
-		if (_Symbol.observable) {
-			result = _Symbol.observable;
-		} else {
-			result = _Symbol('observable');
-			_Symbol.observable = result;
-		}
-	} else {
-		result = '@@observable';
-	}
-
-	return result;
-};
-},{}],29:[function(require,module,exports){
-'use strict';
-
-/**
- * A typeahead component for inputs
- * @class Suggestions
- *
- * @param {HTMLInputElement} el A valid HTML input element
- * @param {Array} data An array of data used for results
- * @param {Object} options
- * @param {Number} [options.limit=5] Max number of results to display in the auto suggest list.
- * @param {Number} [options.minLength=2] Number of characters typed into an input to trigger suggestions.
- * @return {Suggestions} `this`
- * @example
- * // in the browser
- * var input = document.querySelector('input');
- * var data = [
- *   'Roy Eldridge',
- *   'Roy Hargrove',
- *   'Rex Stewart'
- * ];
- *
- * new Suggestions(input, data);
- *
- * // with options
- * var input = document.querySelector('input');
- * var data = [{
- *   name: 'Roy Eldridge',
- *   year: 1911
- * }, {
- *   name: 'Roy Hargrove',
- *   year: 1969
- * }, {
- *   name: 'Rex Stewart',
- *   year: 1907
- * }];
- *
- * var typeahead = new Suggestions(input, data, {
- *   filter: false, // Disable filtering
- *   minLength: 3, // Number of characters typed into an input to trigger suggestions.
- *   limit: 3 //  Max number of results to display.
- * });
- *
- * // As we're passing an object of an arrays as data, override
- * // `getItemValue` by specifying the specific property to search on.
- * typeahead.getItemValue = function(item) { return item.name };
- *
- * input.addEventListener('change', function() {
- *   console.log(typeahead.selected); // Current selected item.
- * });
- *
- * // With browserify
- * var Suggestions = require('suggestions');
- *
- * new Suggestions(input, data);
- */
-var Suggestions = require('./src/suggestions');
-window.Suggestions = module.exports = Suggestions;
-
-},{"./src/suggestions":32}],30:[function(require,module,exports){
-/*
- * Fuzzy
- * https://github.com/myork/fuzzy
- *
- * Copyright (c) 2012 Matt York
- * Licensed under the MIT license.
- */
-
-(function() {
-
-var root = this;
-
-var fuzzy = {};
-
-// Use in node or in browser
-if (typeof exports !== 'undefined') {
-  module.exports = fuzzy;
-} else {
-  root.fuzzy = fuzzy;
-}
-
-// Return all elements of `array` that have a fuzzy
-// match against `pattern`.
-fuzzy.simpleFilter = function(pattern, array) {
-  return array.filter(function(str) {
-    return fuzzy.test(pattern, str);
-  });
-};
-
-// Does `pattern` fuzzy match `str`?
-fuzzy.test = function(pattern, str) {
-  return fuzzy.match(pattern, str) !== null;
-};
-
-// If `pattern` matches `str`, wrap each matching character
-// in `opts.pre` and `opts.post`. If no match, return null
-fuzzy.match = function(pattern, str, opts) {
-  opts = opts || {};
-  var patternIdx = 0
-    , result = []
-    , len = str.length
-    , totalScore = 0
-    , currScore = 0
-    // prefix
-    , pre = opts.pre || ''
-    // suffix
-    , post = opts.post || ''
-    // String to compare against. This might be a lowercase version of the
-    // raw string
-    , compareString =  opts.caseSensitive && str || str.toLowerCase()
-    , ch;
-
-  pattern = opts.caseSensitive && pattern || pattern.toLowerCase();
-
-  // For each character in the string, either add it to the result
-  // or wrap in template if it's the next string in the pattern
-  for(var idx = 0; idx < len; idx++) {
-    ch = str[idx];
-    if(compareString[idx] === pattern[patternIdx]) {
-      ch = pre + ch + post;
-      patternIdx += 1;
-
-      // consecutive characters should increase the score more than linearly
-      currScore += 1 + currScore;
-    } else {
-      currScore = 0;
-    }
-    totalScore += currScore;
-    result[result.length] = ch;
-  }
-
-  // return rendered string if we have a match for every char
-  if(patternIdx === pattern.length) {
-    // if the string is an exact match with pattern, totalScore should be maxed
-    totalScore = (compareString === pattern) ? Infinity : totalScore;
-    return {rendered: result.join(''), score: totalScore};
-  }
-
-  return null;
-};
-
-// The normal entry point. Filters `arr` for matches against `pattern`.
-// It returns an array with matching values of the type:
-//
-//     [{
-//         string:   '<b>lah' // The rendered string
-//       , index:    2        // The index of the element in `arr`
-//       , original: 'blah'   // The original element in `arr`
-//     }]
-//
-// `opts` is an optional argument bag. Details:
-//
-//    opts = {
-//        // string to put before a matching character
-//        pre:     '<b>'
-//
-//        // string to put after matching character
-//      , post:    '</b>'
-//
-//        // Optional function. Input is an entry in the given arr`,
-//        // output should be the string to test `pattern` against.
-//        // In this example, if `arr = [{crying: 'koala'}]` we would return
-//        // 'koala'.
-//      , extract: function(arg) { return arg.crying; }
-//    }
-fuzzy.filter = function(pattern, arr, opts) {
-  if(!arr || arr.length === 0) {
-    return [];
-  }
-  if (typeof pattern !== 'string') {
-    return arr;
-  }
-  opts = opts || {};
-  return arr
-    .reduce(function(prev, element, idx, arr) {
-      var str = element;
-      if(opts.extract) {
-        str = opts.extract(element);
-      }
-      var rendered = fuzzy.match(pattern, str, opts);
-      if(rendered != null) {
-        prev[prev.length] = {
-            string: rendered.rendered
-          , score: rendered.score
-          , index: idx
-          , original: element
-        };
-      }
-      return prev;
-    }, [])
-
-    // Sort by score. Browsers are inconsistent wrt stable/unstable
-    // sorting, so force stable by using the index in the case of tie.
-    // See http://ofb.net/~sethml/is-sort-stable.html
-    .sort(function(a,b) {
-      var compare = b.score - a.score;
-      if(compare) return compare;
-      return a.index - b.index;
-    });
-};
-
-
-}());
-
-
-},{}],31:[function(require,module,exports){
-'Use strict';
-
-var List = function(component) {
-  this.component = component;
-  this.items = [];
-  this.active = 0;
-  this.element = document.createElement('ul');
-  this.element.className = 'suggestions';
-
-  component.el.parentNode.insertBefore(this.element, component.el.nextSibling);
-  return this;
-};
-
-List.prototype.show = function() {
-  this.element.style.display = 'block';
-};
-
-List.prototype.hide = function() {
-  this.element.style.display = 'none';
-};
-
-List.prototype.add = function(item) {
-  this.items.push(item);
-};
-
-List.prototype.clear = function() {
-  this.items = [];
-  this.active = 0;
-};
-
-List.prototype.isEmpty = function() {
-  return !this.items.length;
-};
-
-List.prototype.draw = function() {
-  this.element.innerHTML = '';
-
-  if (this.items.length === 0) {
-    this.hide();
-    return;
-  }
-
-  for (var i = 0; i < this.items.length; i++) {
-    this.drawItem(this.items[i], this.active === i);
-  }
-
-  this.show();
-};
-
-List.prototype.drawItem = function(item, active) {
-  var li = document.createElement('li'),
-    a = document.createElement('a');
-
-  if (active) li.className += ' active';
-
-  a.innerHTML = item.string;
-
-  li.appendChild(a);
-  this.element.appendChild(li);
-
-  li.addEventListener('mousedown', function() {
-    this.handleMouseDown.call(this, item);
-  }.bind(this));
-};
-
-List.prototype.handleMouseDown = function(item) {
-  this.component.value(item.original);
-  this.clear();
-  this.draw();
-};
-
-List.prototype.move = function(index) {
-  this.active = index;
-  this.draw();
-};
-
-List.prototype.previous = function() {
-  this.move(this.active === 0 ? this.items.length - 1 : this.active - 1);
-};
-
-List.prototype.next = function() {
-  this.move(this.active === this.items.length - 1 ? 0 : this.active + 1);
-};
-
-module.exports = List;
-
-},{}],32:[function(require,module,exports){
-'use strict';
-
-var extend = require('xtend');
-var fuzzy = require('fuzzy');
-var List = require('./list');
-
-var Suggestions = function(el, data, options) {
-  options = options || {};
-
-  this.options = extend({
-    minLength: 2,
-    limit: 5,
-    filter: true
-  }, options);
-
-  this.el = el;
-  this.data = data || [];
-  this.list = new List(this);
-
-  this.query = '';
-  this.selected = null;
-
-  this.list.draw();
-
-  this.el.addEventListener('keyup', function(e) {
-    this.handleKeyUp(e.keyCode);
-  }.bind(this), false);
-
-  this.el.addEventListener('keydown', function(e) {
-    this.handleKeyDown(e);
-  }.bind(this));
-
-  this.el.addEventListener('focus', function() {
-    this.handleFocus();
-  }.bind(this));
-
-  this.el.addEventListener('blur', function() {
-    this.handleBlur();
-  }.bind(this));
-
-  return this;
-};
-
-Suggestions.prototype.handleKeyUp = function(keyCode) {
-  // 40 - DOWN
-  // 38 - UP
-  // 27 - ESC
-  // 13 - ENTER
-  // 9 - TAB
-
-  if (keyCode === 40 ||
-      keyCode === 38 ||
-      keyCode === 27 ||
-      keyCode === 13 ||
-      keyCode === 9) return;
-
-  this.query = this.normalize(this.el.value);
-
-  this.list.clear();
-
-  if (this.query.length < this.options.minLength) {
-    this.list.draw();
-    return;
-  }
-
-  this.getCandidates(function(data) {
-    for (var i = 0; i < data.length; i++) {
-      this.list.add(data[i]);
-      if (i === (this.options.limit - 1)) break;
-    }
-    this.list.draw();
-  }.bind(this));
-};
-
-Suggestions.prototype.handleKeyDown = function(e) {
-  switch (e.keyCode) {
-    case 13: // ENTER
-    case 9:  // TAB
-      if (!this.list.isEmpty()) {
-        this.value(this.list.items[this.list.active].original);
-        this.list.hide();
-      }
-    break;
-    case 27: // ESC
-      if (!this.list.isEmpty()) this.list.hide();
-    break;
-    case 38: // UP
-      this.list.previous();
-    break;
-    case 40: // DOWN
-      this.list.next();
-    break;
-  }
-};
-
-Suggestions.prototype.handleBlur = function() {
-  this.list.hide();
-};
-
-Suggestions.prototype.handleFocus = function() {
-  if (!this.list.isEmpty()) this.list.show();
-};
-
-/**
- * Update data previously passed
- *
- * @param {Array} revisedData
- */
-Suggestions.prototype.update = function(revisedData) {
-  this.data = revisedData;
-  this.list.draw();
-};
-
-/**
- * Clears data
- */
-Suggestions.prototype.clear = function() {
-  this.data = [];
-  this.list.clear();
-};
-
-/**
- * Normalize the results list and input value for matching
- *
- * @param {String} value
- * @return {String}
- */
-Suggestions.prototype.normalize = function(value) {
-  value = value.toLowerCase();
-  return value;
-};
-
-/**
- * Evaluates whether an array item qualifies as a match with the current query
- *
- * @param {String} candidate a possible item from the array passed
- * @param {String} query the current query
- * @return {Boolean}
- */
-Suggestions.prototype.match = function(candidate, query) {
-  return candidate.indexOf(query) > -1;
-};
-
-Suggestions.prototype.value = function(value) {
-  this.selected = value;
-  this.el.value = this.getItemValue(value);
-
-  if (document.createEvent) {
-    var e = document.createEvent('HTMLEvents');
-    e.initEvent('change', true, false);
-    this.el.dispatchEvent(e);
-  } else {
-    this.el.fireEvent('onchange');
-  }
-};
-
-Suggestions.prototype.getCandidates = function(callback) {
-  var options = {
-    pre: '<strong>',
-    post: '</strong>',
-    extract: function(d) { return this.getItemValue(d); }.bind(this)
-  };
-
-  var results = this.options.filter ?
-    fuzzy.filter(this.query, this.data, options) :
-    this.data.map(function(d) {
-      return {
-        original: d,
-        string: this.getItemValue(d).replace(new RegExp('(' + this.query + ')', 'ig'), function($1, match) {
-          return '<strong>' + match + '</strong>';
-        })
-      };
-    }.bind(this));
-
-  callback(results);
-};
-
-/**
- * For a given item in the data array, return what should be used as the candidate string
- *
- * @param {Object|String} item an item from the data array
- * @return {String} item
- */
-Suggestions.prototype.getItemValue = function(item) {
-  return item;
-};
-
-module.exports = Suggestions;
-
-},{"./list":31,"fuzzy":30,"xtend":35}],33:[function(require,module,exports){
-var each = require('turf-meta').coordEach;
-
-/**
- * Takes any {@link GeoJSON} object, calculates the extent of all input features, and returns a bounding box.
- *
- * @module turf/extent
- * @category measurement
- * @param {GeoJSON} input any valid GeoJSON Object
- * @return {Array<number>} the bounding box of `input` given
- * as an array in WSEN order (west, south, east, north)
- * @example
- * var input = {
- *   "type": "FeatureCollection",
- *   "features": [
- *     {
- *       "type": "Feature",
- *       "properties": {},
- *       "geometry": {
- *         "type": "Point",
- *         "coordinates": [114.175329, 22.2524]
- *       }
- *     }, {
- *       "type": "Feature",
- *       "properties": {},
- *       "geometry": {
- *         "type": "Point",
- *         "coordinates": [114.170007, 22.267969]
- *       }
- *     }, {
- *       "type": "Feature",
- *       "properties": {},
- *       "geometry": {
- *         "type": "Point",
- *         "coordinates": [114.200649, 22.274641]
- *       }
- *     }, {
- *       "type": "Feature",
- *       "properties": {},
- *       "geometry": {
- *         "type": "Point",
- *         "coordinates": [114.186744, 22.265745]
- *       }
- *     }
- *   ]
- * };
- *
- * var bbox = turf.extent(input);
- *
- * var bboxPolygon = turf.bboxPolygon(bbox);
- *
- * var resultFeatures = input.features.concat(bboxPolygon);
- * var result = {
- *   "type": "FeatureCollection",
- *   "features": resultFeatures
- * };
- *
- * //=result
- */
-module.exports = function(layer) {
-    var extent = [Infinity, Infinity, -Infinity, -Infinity];
-    each(layer, function(coord) {
-      if (extent[0] > coord[0]) extent[0] = coord[0];
-      if (extent[1] > coord[1]) extent[1] = coord[1];
-      if (extent[2] < coord[0]) extent[2] = coord[0];
-      if (extent[3] < coord[1]) extent[3] = coord[1];
-    });
-    return extent;
-};
-
-},{"turf-meta":34}],34:[function(require,module,exports){
-/**
- * Lazily iterate over coordinates in any GeoJSON object, similar to
- * Array.forEach.
- *
- * @param {Object} layer any GeoJSON object
- * @param {Function} callback a method that takes (value)
- * @param {boolean=} excludeWrapCoord whether or not to include
- * the final coordinate of LinearRings that wraps the ring in its iteration.
- * @example
- * var point = { type: 'Point', coordinates: [0, 0] };
- * coordEach(point, function(coords) {
- *   // coords is equal to [0, 0]
- * });
- */
-function coordEach(layer, callback, excludeWrapCoord) {
-  var i, j, k, g, geometry, stopG, coords,
-    geometryMaybeCollection,
-    wrapShrink = 0,
-    isGeometryCollection,
-    isFeatureCollection = layer.type === 'FeatureCollection',
-    isFeature = layer.type === 'Feature',
-    stop = isFeatureCollection ? layer.features.length : 1;
-
-  // This logic may look a little weird. The reason why it is that way
-  // is because it's trying to be fast. GeoJSON supports multiple kinds
-  // of objects at its root: FeatureCollection, Features, Geometries.
-  // This function has the responsibility of handling all of them, and that
-  // means that some of the `for` loops you see below actually just don't apply
-  // to certain inputs. For instance, if you give this just a
-  // Point geometry, then both loops are short-circuited and all we do
-  // is gradually rename the input until it's called 'geometry'.
-  //
-  // This also aims to allocate as few resources as possible: just a
-  // few numbers and booleans, rather than any temporary arrays as would
-  // be required with the normalization approach.
-  for (i = 0; i < stop; i++) {
-
-    geometryMaybeCollection = (isFeatureCollection ? layer.features[i].geometry :
-        (isFeature ? layer.geometry : layer));
-    isGeometryCollection = geometryMaybeCollection.type === 'GeometryCollection';
-    stopG = isGeometryCollection ? geometryMaybeCollection.geometries.length : 1;
-
-    for (g = 0; g < stopG; g++) {
-
-      geometry = isGeometryCollection ?
-          geometryMaybeCollection.geometries[g] : geometryMaybeCollection;
-      coords = geometry.coordinates;
-
-      wrapShrink = (excludeWrapCoord &&
-        (geometry.type === 'Polygon' || geometry.type === 'MultiPolygon')) ?
-        1 : 0;
-
-      if (geometry.type === 'Point') {
-        callback(coords);
-      } else if (geometry.type === 'LineString' || geometry.type === 'MultiPoint') {
-        for (j = 0; j < coords.length; j++) callback(coords[j]);
-      } else if (geometry.type === 'Polygon' || geometry.type === 'MultiLineString') {
-        for (j = 0; j < coords.length; j++)
-          for (k = 0; k < coords[j].length - wrapShrink; k++)
-            callback(coords[j][k]);
-      } else if (geometry.type === 'MultiPolygon') {
-        for (j = 0; j < coords.length; j++)
-          for (k = 0; k < coords[j].length; k++)
-            for (l = 0; l < coords[j][k].length - wrapShrink; l++)
-              callback(coords[j][k][l]);
-      } else {
-        throw new Error('Unknown Geometry Type');
-      }
-    }
-  }
-}
-module.exports.coordEach = coordEach;
-
-/**
- * Lazily reduce coordinates in any GeoJSON object into a single value,
- * similar to how Array.reduce works. However, in this case we lazily run
- * the reduction, so an array of all coordinates is unnecessary.
- *
- * @param {Object} layer any GeoJSON object
- * @param {Function} callback a method that takes (memo, value) and returns
- * a new memo
- * @param {boolean=} excludeWrapCoord whether or not to include
- * the final coordinate of LinearRings that wraps the ring in its iteration.
- * @param {*} memo the starting value of memo: can be any type.
- */
-function coordReduce(layer, callback, memo, excludeWrapCoord) {
-  coordEach(layer, function(coord) {
-    memo = callback(memo, coord);
-  }, excludeWrapCoord);
-  return memo;
-}
-module.exports.coordReduce = coordReduce;
-
-/**
- * Lazily iterate over property objects in any GeoJSON object, similar to
- * Array.forEach.
- *
- * @param {Object} layer any GeoJSON object
- * @param {Function} callback a method that takes (value)
- * @example
- * var point = { type: 'Feature', geometry: null, properties: { foo: 1 } };
- * propEach(point, function(props) {
- *   // props is equal to { foo: 1}
- * });
- */
-function propEach(layer, callback) {
-  var i;
-  switch (layer.type) {
-      case 'FeatureCollection':
-        features = layer.features;
-        for (i = 0; i < layer.features.length; i++) {
-            callback(layer.features[i].properties);
-        }
-        break;
-      case 'Feature':
-        callback(layer.properties);
-        break;
-  }
-}
-module.exports.propEach = propEach;
-
-/**
- * Lazily reduce properties in any GeoJSON object into a single value,
- * similar to how Array.reduce works. However, in this case we lazily run
- * the reduction, so an array of all properties is unnecessary.
- *
- * @param {Object} layer any GeoJSON object
- * @param {Function} callback a method that takes (memo, coord) and returns
- * a new memo
- * @param {*} memo the starting value of memo: can be any type.
- */
-function propReduce(layer, callback, memo) {
-  propEach(layer, function(prop) {
-    memo = callback(memo, prop);
-  });
-  return memo;
-}
-module.exports.propReduce = propReduce;
-
-},{}],35:[function(require,module,exports){
-module.exports = extend
-
-var hasOwnProperty = Object.prototype.hasOwnProperty;
-
-function extend() {
-    var target = {}
-
-    for (var i = 0; i < arguments.length; i++) {
-        var source = arguments[i]
-
-        for (var key in source) {
-            if (hasOwnProperty.call(source, key)) {
-                target[key] = source[key]
-            }
-        }
-    }
-
-    return target
-}
-
-},{}],36:[function(require,module,exports){
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.queryOrigin = queryOrigin;
-exports.queryDestination = queryDestination;
-exports.queryOriginCoordinates = queryOriginCoordinates;
-exports.queryDestinationCoordinates = queryDestinationCoordinates;
-exports.clearOrigin = clearOrigin;
-exports.clearDestination = clearDestination;
-exports.setOptions = setOptions;
-exports.hoverMarker = hoverMarker;
-exports.setRouteIndex = setRouteIndex;
-exports.createOrigin = createOrigin;
-exports.createDestination = createDestination;
-exports.setProfile = setProfile;
-exports.reverse = reverse;
-exports.setOriginFromCoordinates = setOriginFromCoordinates;
-exports.setDestinationFromCoordinates = setDestinationFromCoordinates;
-exports.addWaypoint = addWaypoint;
-exports.setWaypoint = setWaypoint;
-exports.removeWaypoint = removeWaypoint;
-exports.eventSubscribe = eventSubscribe;
-exports.eventEmit = eventEmit;
-
-var _action_types = require('../constants/action_types');
-
-var types = _interopRequireWildcard(_action_types);
-
-var _utils = require('../utils');
-
-var _utils2 = _interopRequireDefault(_utils);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-var request = new XMLHttpRequest();
-
-function originPoint(coordinates) {
-  return function (dispatch) {
-    var origin = _utils2.default.createPoint(coordinates, {
-      id: 'origin',
-      'marker-symbol': 'A'
-    });
-
-    dispatch({ type: types.ORIGIN, origin: origin });
-    dispatch(eventEmit('origin', { feature: origin }));
-  };
-}
-
-function destinationPoint(coordinates) {
-  return function (dispatch) {
-    var destination = _utils2.default.createPoint(coordinates, {
-      id: 'destination',
-      'marker-symbol': 'B'
-    });
-
-    dispatch({ type: types.DESTINATION, destination: destination });
-    dispatch(eventEmit('destination', { feature: destination }));
-  };
-}
-
-function setDirections(directions) {
-  return function (dispatch) {
-    dispatch({
-      type: types.DIRECTIONS,
-      directions: directions
-    });
-    dispatch(eventEmit('route', { route: directions }));
-  };
-}
-
-function updateWaypoints(waypoints) {
-  return {
-    type: types.WAYPOINTS,
-    waypoints: waypoints
-  };
-}
-
-function setHoverMarker(feature) {
-  return {
-    type: types.HOVER_MARKER,
-    hoverMarker: feature
-  };
-}
-
-function fetchDirections() {
-  return function (dispatch, getState) {
-    var _getState = getState(),
-        api = _getState.api,
-        accessToken = _getState.accessToken,
-        routeIndex = _getState.routeIndex,
-        profile = _getState.profile;
-
-    var query = buildDirectionsQuery(getState);
-
-    // Request params
-    var options = [];
-    options.push('geometry=polyline');
-    options.push('instructions=text');
-    options.push('alternatives=true');
-    options.push('steps=true');
-
-    var token = accessToken ? accessToken : mapboxgl.accessToken;
-    options.push('access_token=' + token);
-
-    request.abort();
-    request.open('GET', api + 'mapbox.' + profile + '/' + query + '.json?' + options.join('&'), true);
-
-    request.onload = function () {
-      if (request.status >= 200 && request.status < 400) {
-        var data = JSON.parse(request.responseText);
-        if (data.error) {
-          dispatch(setDirections([]));
-          return dispatch(setError(data.error));
-        }
-
-        dispatch(setError(null));
-        if (!data.routes[routeIndex]) dispatch(setRouteIndex(0));
-        dispatch(setDirections(data.routes));
-
-        // Revise origin / destination points
-        dispatch(originPoint(data.origin.geometry.coordinates));
-        dispatch(destinationPoint(data.destination.geometry.coordinates));
-      } else {
-        dispatch(setDirections([]));
-        return dispatch(setError(JSON.parse(request.responseText).message));
-      }
-    };
-
-    request.onerror = function () {
-      dispatch(setDirections([]));
-      return dispatch(setError(JSON.parse(request.responseText).message));
-    };
-
-    request.send();
-  };
-}
-
-/*
- * Build query used to fetch directions
- *
- * @param {Function} state
- */
-function buildDirectionsQuery(state) {
-  var _state = state(),
-      origin = _state.origin,
-      destination = _state.destination,
-      waypoints = _state.waypoints;
-
-  var query = [];
-  query = query.concat(origin.geometry.coordinates);
-  query.push(';');
-
-  // Add any waypoints.
-  if (waypoints.length) {
-    waypoints.forEach(function (waypoint) {
-      query = query.concat(waypoint.geometry.coordinates);
-      query.push(';');
-    });
-  }
-
-  query = query.concat(destination.geometry.coordinates);
-  return encodeURIComponent(query.join());
-}
-
-function normalizeWaypoint(waypoint) {
-  var properties = { id: 'waypoint' };
-  return Object.assign(waypoint, {
-    properties: waypoint.properties ? Object.assign(waypoint.properties, properties) : properties
-  });
-}
-
-function setError(error) {
-  return function (dispatch) {
-    dispatch({
-      type: 'ERROR',
-      error: error
-    });
-    if (error) dispatch(eventEmit('error', { error: error }));
-  };
-}
-
-function queryOrigin(query) {
-  console.log('querying origin');
-  return {
-    type: types.ORIGIN_QUERY,
-    query: query
-  };
-}
-
-function queryDestination(query) {
-  return {
-    type: types.DESTINATION_QUERY,
-    query: query
-  };
-}
-
-function queryOriginCoordinates(coords) {
-  return {
-    type: types.ORIGIN_FROM_COORDINATES,
-    coordinates: coords
-  };
-}
-
-function queryDestinationCoordinates(coords) {
-  return {
-    type: types.DESTINATION_FROM_COORDINATES,
-    coordinates: coords
-  };
-}
-
-function clearOrigin() {
-  return function (dispatch) {
-    dispatch({
-      type: types.ORIGIN_CLEAR
-    });
-    dispatch(eventEmit('clear', { type: 'origin' }));
-    dispatch(setError(null));
-  };
-}
-
-function clearDestination() {
-  return function (dispatch) {
-    dispatch({
-      type: types.DESTINATION_CLEAR
-    });
-    dispatch(eventEmit('clear', { type: 'destination' }));
-    dispatch(setError(null));
-  };
-}
-
-function setOptions(options) {
-  return {
-    type: types.SET_OPTIONS,
-    options: options
-  };
-}
-
-function hoverMarker(coordinates) {
-  return function (dispatch) {
-    var feature = coordinates ? _utils2.default.createPoint(coordinates, { id: 'hover' }) : {};
-    dispatch(setHoverMarker(feature));
-  };
-}
-
-function setRouteIndex(routeIndex) {
-  return {
-    type: types.ROUTE_INDEX,
-    routeIndex: routeIndex
-  };
-}
-
-function createOrigin(coordinates) {
-  return function (dispatch, getState) {
-    var _getState2 = getState(),
-        destination = _getState2.destination;
-
-    dispatch(originPoint(coordinates));
-    if (destination.geometry) dispatch(fetchDirections());
-  };
-}
-
-function createDestination(coordinates) {
-  return function (dispatch, getState) {
-    var _getState3 = getState(),
-        origin = _getState3.origin;
-
-    dispatch(destinationPoint(coordinates));
-    if (origin.geometry) dispatch(fetchDirections());
-  };
-}
-
-function setProfile(profile) {
-  return function (dispatch, getState) {
-    var _getState4 = getState(),
-        origin = _getState4.origin,
-        destination = _getState4.destination;
-
-    dispatch({ type: types.DIRECTIONS_PROFILE, profile: profile });
-    dispatch(eventEmit('profile', { profile: profile }));
-    if (origin.geometry && destination.geometry) dispatch(fetchDirections());
-  };
-}
-
-function reverse() {
-  return function (dispatch, getState) {
-    var state = getState();
-    if (state.destination.geometry) dispatch(originPoint(state.destination.geometry.coordinates));
-    if (state.origin.geometry) dispatch(destinationPoint(state.origin.geometry.coordinates));
-    if (state.origin.geometry && state.destination.geometry) dispatch(fetchDirections());
-  };
-}
-
-/*
- * Set origin from coordinates
- *
- * @param {Array<number>} coordinates [lng, lat] array.
- */
-function setOriginFromCoordinates(coords) {
-  return function (dispatch) {
-    if (!_utils2.default.validCoords(coords)) coords = [_utils2.default.wrap(coords[0]), _utils2.default.wrap(coords[1])];
-    if (isNaN(coords[0]) && isNaN(coords[1])) return dispatch(setError(new Error('Coordinates are not valid')));
-    dispatch(queryOriginCoordinates(coords));
-    dispatch(createOrigin(coords));
-  };
-}
-
-/*
- * Set destination from coordinates
- *
- * @param {Array<number>} coords [lng, lat] array.
- */
-function setDestinationFromCoordinates(coords) {
-  return function (dispatch) {
-    if (!_utils2.default.validCoords(coords)) coords = [_utils2.default.wrap(coords[0]), _utils2.default.wrap(coords[1])];
-    if (isNaN(coords[0]) && isNaN(coords[1])) return dispatch(setError(new Error('Coordinates are not valid')));
-    dispatch(createDestination(coords));
-    dispatch(queryDestinationCoordinates(coords));
-  };
-}
-
-function addWaypoint(index, waypoint) {
-  return function (dispatch, getState) {
-    var _getState5 = getState(),
-        destination = _getState5.destination,
-        waypoints = _getState5.waypoints;
-
-    waypoints.splice(index, 0, normalizeWaypoint(waypoint));
-    dispatch(updateWaypoints(waypoints));
-    if (destination.geometry) dispatch(fetchDirections());
-  };
-}
-
-function setWaypoint(index, waypoint) {
-  return function (dispatch, getState) {
-    var _getState6 = getState(),
-        destination = _getState6.destination,
-        waypoints = _getState6.waypoints;
-
-    waypoints[index] = normalizeWaypoint(waypoint);
-    dispatch(updateWaypoints(waypoints));
-    if (destination.geometry) dispatch(fetchDirections());
-  };
-}
-
-function removeWaypoint(waypoint) {
-  return function (dispatch, getState) {
-    var _getState7 = getState(),
-        destination = _getState7.destination,
-        waypoints = _getState7.waypoints;
-
-    waypoints = waypoints.filter(function (way) {
-      return !_utils2.default.coordinateMatch(way, waypoint);
-    });
-
-    dispatch(updateWaypoints(waypoints));
-    if (destination.geometry) dispatch(fetchDirections());
-  };
-}
-
-function eventSubscribe(type, fn) {
-  return function (dispatch, getState) {
-    var _getState8 = getState(),
-        events = _getState8.events;
-
-    events[type] = events[type] || [];
-    events[type].push(fn);
-    return {
-      type: types.EVENTS,
-      events: events
-    };
-  };
-}
-
-function eventEmit(type, data) {
-  var _this = this;
-
-  return function (dispatch, getState) {
-    var _getState9 = getState(),
-        events = _getState9.events;
-
-    if (!events[type]) {
-      return {
-        type: types.EVENTS,
-        events: events
-      };
-    }
-
-    var listeners = events[type].slice();
-
-    for (var i = 0; i < listeners.length; i++) {
-      listeners[i].call(_this, data);
-    }
-  };
-}
-
-},{"../constants/action_types":37,"../utils":45}],37:[function(require,module,exports){
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var DESTINATION = exports.DESTINATION = 'DESTINATION';
-var DESTINATION_CLEAR = exports.DESTINATION_CLEAR = 'DESTINATION_CLEAR';
-var DESTINATION_QUERY = exports.DESTINATION_QUERY = 'DESTINATION_QUERY';
-var DESTINATION_FROM_COORDINATES = exports.DESTINATION_FROM_COORDINATES = 'DESTINATION_FROM_COORDINATES';
-var DIRECTIONS = exports.DIRECTIONS = 'DIRECTIONS';
-var DIRECTIONS_PROFILE = exports.DIRECTIONS_PROFILE = 'DIRECTIONS_PROFILE';
-var EVENTS = exports.EVENTS = 'EVENTS';
-var ERROR = exports.ERROR = 'ERROR';
-var HOVER_MARKER = exports.HOVER_MARKER = 'HOVER_MARKER';
-var ORIGIN = exports.ORIGIN = 'ORIGIN';
-var ORIGIN_CLEAR = exports.ORIGIN_CLEAR = 'ORIGIN_CLEAR';
-var ORIGIN_QUERY = exports.ORIGIN_QUERY = 'ORIGIN_QUERY';
-var ORIGIN_FROM_COORDINATES = exports.ORIGIN_FROM_COORDINATES = 'ORIGIN_FROM_COORDINATES';
-var ROUTE_INDEX = exports.ROUTE_INDEX = 'ROUTE_INDEX';
-var SET_OPTIONS = exports.SET_OPTIONS = 'SET_OPTIONS';
-var WAYPOINTS = exports.WAYPOINTS = 'WAYPOINTS';
-
-},{}],38:[function(require,module,exports){
-'use strict';
-
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
-
-var _utils = require('../utils');
-
-var _utils2 = _interopRequireDefault(_utils);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var Typeahead = require('suggestions');
-var debounce = require('lodash.debounce');
-var extend = require('xtend');
-var EventEmitter = require('events').EventEmitter;
-
-// Mapbox Geocoder version
-var API = 'https://api.mapbox.com/geocoding/v5/mapbox.places/';
-
-/**
- * A geocoder component using Mapbox Geocoding API
- * @class mapboxgl.Geocoder
- *
- * @param {Object} options
- * @param {String} [options.position="top-right"] A string indicating the control's position on the map. Options are `top-right`, `top-left`, `bottom-right`, `bottom-left`
- * @param {String} [options.accessToken=null] Required unless `mapboxgl.accessToken` is set globally
- * @param {string|element} options.container The HTML element to append the Geocoder input to. if container is not specified, `map.getcontainer()` is used.
- * @param {Array<number>} options.proximity If set, search results closer to these coordinates will be given higher priority.
- * @param {Array<number>} options.bbox Limit results to a given bounding box provided as `[minX, minY, maxX, maxY]`.
- * @param {Number} [options.zoom=16] On geocoded result what zoom level should the map animate to.
- * @param {Boolean} [options.flyTo=true] If false, animating the map to a selected result is disabled.
- * @param {String} [options.placeholder="Search"] Override the default placeholder attribute value.
- * @param {string} options.types a comma seperated list of types that filter results to match those specified. See https://www.mapbox.com/developers/api/geocoding/#filter-type for available types.
- * @param {string} options.country a comma seperated list of country codes to limit results to specified country or countries.
- * @example
- * var geocoder = new mapboxgl.Geocoder();
- * map.addControl(geocoder);
- * @return {Geocoder} `this`
- */
-function Geocoder(options) {
-  this._ev = new EventEmitter();
-  this.options = extend({}, this.options, options);
-}
-
-Geocoder.prototype = {
-
-  options: {
-    placeholder: 'Search',
-    zoom: 16,
-    flyTo: true
-  },
-
-  onAdd: function onAdd(map) {
-    this._map = map;
-
-    this.request = new XMLHttpRequest();
-
-    this.container = this.options.container ? typeof this.options.container === 'string' ? document.getElementById(this.options.container) : this.options.container : map.getContainer();
-
-    // Template
-    var el = document.createElement('div');
-    el.className = 'mapboxgl-ctrl-geocoder';
-
-    var icon = document.createElement('span');
-    icon.className = 'geocoder-icon geocoder-icon-search';
-
-    var input = this._inputEl = document.createElement('input');
-    input.type = 'text';
-    input.placeholder = this.options.placeholder;
-
-    input.addEventListener('keydown', debounce(function (e) {
-      if (!e.target.value) return this._clearEl.classList.remove('active');
-
-      // TAB, ESC, LEFT, RIGHT, ENTER, UP, DOWN
-      if (e.metaKey || [9, 27, 37, 39, 13, 38, 40].indexOf(e.keyCode) !== -1) return;
-      this._queryFromInput(e.target.value);
-    }.bind(this)), 200);
-
-    input.addEventListener('change', function (e) {
-      if (e.target.value) this._clearEl.classList.add('active');
-
-      var selected = this._typeahead.selected;
-      if (selected) {
-        if (this.options.flyTo) {
-          if (selected.bbox && selected.context && selected.context.length <= 3 || selected.bbox && !selected.context) {
-            var bbox = selected.bbox;
-            map.fitBounds([[bbox[0], bbox[1]], [bbox[2], bbox[3]]]);
-          } else {
-            map.flyTo({
-              center: selected.center,
-              zoom: this.options.zoom
-            });
-          }
-        }
-        this._input = selected;
-        this.fire('result', { result: selected });
-      }
-    }.bind(this));
-
-    var actions = document.createElement('div');
-    actions.classList.add('geocoder-pin-right');
-
-    var clear = this._clearEl = document.createElement('button');
-    clear.className = 'geocoder-icon geocoder-icon-close';
-    clear.addEventListener('click', this._clear.bind(this));
-
-    var loading = this._loadingEl = document.createElement('span');
-    loading.className = 'geocoder-icon geocoder-icon-loading';
-
-    actions.appendChild(clear);
-    actions.appendChild(loading);
-
-    el.appendChild(icon);
-    el.appendChild(input);
-    el.appendChild(actions);
-
-    this.container.appendChild(el);
-
-    // Override the control being added to control containers
-    if (this.options.container) this.options.position = false;
-
-    this._typeahead = new Typeahead(input, [], { filter: false });
-    this._typeahead.getItemValue = function (item) {
-      return item.place_name;
-    };
-
-    return el;
-  },
-
-  _geocode: function _geocode(q, callback) {
-    this._loadingEl.classList.add('active');
-    this.fire('loading');
-
-    console.log('geocoder this', this);
-
-    var options = [];
-    if (this.options.proximity) options.push('proximity=' + this.options.proximity.join());
-    if (this.options.bbox) options.push('bbox=' + this.options.bbox.join());
-    if (this.options.country) options.push('country=' + this.options.country);
-    if (this.options.types) options.push('types=' + this.options.types);
-
-    var accessToken = this.options.accessToken ? this.options.accessToken : mapboxgl.accessToken;
-    options.push('access_token=' + accessToken);
-
-    this.request.abort();
-    this.request.open('GET', API + encodeURIComponent(q.trim()) + '.json?' + options.join('&'), true);
-    this.request.onload = function () {
-      this._loadingEl.classList.remove('active');
-      if (this.request.status >= 200 && this.request.status < 400) {
-        var data = JSON.parse(this.request.responseText);
-        if (data.features.length) {
-          this._clearEl.classList.add('active');
-        } else {
-          this._clearEl.classList.remove('active');
-          this._typeahead.selected = null;
-        }
-
-        this.fire('results', { results: data.features });
-        this._typeahead.update(data.features);
-        return callback(data.features);
-      } else {
-        this.fire('error', { error: JSON.parse(this.request.responseText).message });
-      }
-    }.bind(this);
-
-    this.request.onerror = function () {
-      this._loadingEl.classList.remove('active');
-      this.fire('error', { error: JSON.parse(this.request.responseText).message });
-    }.bind(this);
-
-    this.request.send();
-  },
-
-  _queryFromInput: function _queryFromInput(q) {
-    q = q.trim();
-    if (!q) this._clear();
-    if (q.length > 2) {
-      this._geocode(q, function (results) {
-        this._results = results;
-      }.bind(this));
-    }
-  },
-
-  _change: function _change() {
-    var onChange = document.createEvent('HTMLEvents');
-    onChange.initEvent('change', true, false);
-    this._inputEl.dispatchEvent(onChange);
-  },
-
-  _query: function _query(input) {
-    if (!input) return;
-    if ((typeof input === 'undefined' ? 'undefined' : _typeof(input)) === 'object' && input.length) {
-      input = [_utils2.default.wrap(input[0]), _utils2.default.wrap(input[1])].join();
-    }
-
-    this._geocode(input, function (results) {
-      if (!results.length) return;
-      var result = results[0];
-      this._results = results;
-      this._typeahead.selected = result;
-      this._inputEl.value = result.place_name;
-      this._change();
-    }.bind(this));
-  },
-
-  _setInput: function _setInput(input) {
-    if (!input) return;
-    if ((typeof input === 'undefined' ? 'undefined' : _typeof(input)) === 'object' && input.length) {
-      input = [_utils2.default.wrap(input[0]), _utils2.default.wrap(input[1])].join();
-    }
-
-    // Set input value to passed value and clear everything else.
-    this._inputEl.value = input;
-    this._input = null;
-    this._typeahead.selected = null;
-    this._typeahead.clear();
-    this._change();
-  },
-
-  _clear: function _clear() {
-    this._input = null;
-    this._inputEl.value = '';
-    this._typeahead.selected = null;
-    this._typeahead.clear();
-    this._change();
-    this._inputEl.focus();
-    this._clearEl.classList.remove('active');
-    this.fire('clear');
-  },
-
-  /**
-   * Return the input
-   * @returns {Object} input
-   */
-  getResult: function getResult() {
-    return this._input;
-  },
-
-  /**
-   * Set & query the input
-   * @param {Array|String} query An array of coordinates [lng, lat] or location name as a string.
-   * @returns {Geocoder} this
-   */
-  query: function query(_query2) {
-    this._query(_query2);
-    return this;
-  },
-
-  /**
-   * Set input
-   * @param {Array|String} value An array of coordinates [lng, lat] or location name as a string. Calling this function just sets the input and does not trigger an API request.
-   * @returns {Geocoder} this
-   */
-  setInput: function setInput(value) {
-    this._setInput(value);
-    return this;
-  },
-
-  /**
-   * Subscribe to events that happen within the plugin.
-   * @param {String} type name of event. Available events and the data passed into their respective event objects are:
-   *
-   * - __clear__ `Emitted when the input is cleared`
-   * - __loading__ `Emitted when the geocoder is looking up a query`
-   * - __results__ `{ results } Fired when the geocoder returns a response`
-   * - __result__ `{ result } Fired when input is set`
-   * - __error__ `{ error } Error as string
-   * @param {Function} fn function that's called when the event is emitted.
-   * @returns {Geocoder} this;
-   */
-  on: function on(type, fn) {
-    this._ev.on(type, fn);
-    return this;
-  },
-
-  /**
-   * Fire an event
-   * @param {String} type event name.
-   * @param {Object} data event data to pass to the function subscribed.
-   * @returns {Geocoder} this
-   */
-  fire: function fire(type, data) {
-    this._ev.emit(type, data);
-    return this;
-  },
-
-  /**
-   * Remove an event
-   * @returns {Geocoder} this
-   * @param {String} type Event name.
-   * @param {Function} fn Function that should unsubscribe to the event emitted.
-   */
-  off: function off(type, fn) {
-    this._ev.removeListener(type, fn);
-    return this;
-  }
-};
-
-module.exports = Geocoder;
-
-},{"../utils":45,"events":1,"lodash.debounce":2,"suggestions":29,"xtend":35}],39:[function(require,module,exports){
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _geocoder = require('./geocoder');
-
-var _geocoder2 = _interopRequireDefault(_geocoder);
-
-var _lodash = require('lodash.template');
-
-var _lodash2 = _interopRequireDefault(_lodash);
-
-var _lodash3 = require('lodash.isequal');
-
-var _lodash4 = _interopRequireDefault(_lodash3);
-
-var _turfExtent = require('turf-extent');
-
-var _turfExtent2 = _interopRequireDefault(_turfExtent);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
- // substack/brfs#39
-var tmpl = (0, _lodash2.default)("<div class='mapbox-directions-component mapbox-directions-inputs'>\n  <div class='mapbox-directions-component-keyline'>\n    <div class='mapbox-directions-origin'>\n      <label class='mapbox-form-label'>\n        <span class='directions-icon directions-icon-depart'></span>\n      </label>\n      <div id='mapbox-directions-origin-input'></div>\n    </div>\n\n    <button\n      class='directions-icon directions-icon-reverse directions-reverse js-reverse-inputs'\n      title='Reverse origin &amp; destination'>\n    </button>\n\n    <div class='mapbox-directions-destination'>\n      <label class='mapbox-form-label'>\n        <span class='directions-icon directions-icon-arrive'></span>\n      </label>\n      <div id='mapbox-directions-destination-input'></div>\n    </div>\n  </div>\n\n  <div class='mapbox-directions-profile mapbox-directions-component-keyline mapbox-directions-clearfix'>\n    <input\n      id='mapbox-directions-profile-driving'\n      type='radio'\n      name='profile'\n      <% if (profile === 'driving') { %>checked<% } %>\n    />\n    <label for='mapbox-directions-profile-driving'>Driving</label>\n    <input\n      id='mapbox-directions-profile-walking'\n      type='radio'\n      name='profile'\n      <% if (profile === 'walking') { %>checked<% } %>\n    />\n    <label for='mapbox-directions-profile-walking'>Walking</label>\n    <input\n      id='mapbox-directions-profile-cycling'\n      type='radio'\n      name='profile'\n      <% if (profile === 'cycling') { %>checked<% } %>\n    />\n    <label for='mapbox-directions-profile-cycling'>Cycling</label>\n  </div>\n</div>\n");
-
-/**
- * Inputs controller
- *
- * @param {HTMLElement} el Summary parent container
- * @param {Object} store A redux store
- * @param {Object} actions Actions an element can dispatch
- * @param {Object} map The mapboxgl instance
- * @private
- */
-
-var Inputs = function () {
-  function Inputs(el, store, actions, map) {
-    _classCallCheck(this, Inputs);
-
-    var _store$getState = store.getState(),
-        originQuery = _store$getState.originQuery,
-        destinationQuery = _store$getState.destinationQuery,
-        profile = _store$getState.profile;
-
-    el.innerHTML = tmpl({
-      originQuery: originQuery,
-      destinationQuery: destinationQuery,
-      profile: profile
-    });
-
-    this.container = el;
-    this.actions = actions;
-    this.store = store;
-    this._map = map;
-
-    this.onAdd();
-    this.render();
-  }
-
-  _createClass(Inputs, [{
-    key: 'animateToCoordinates',
-    value: function animateToCoordinates(mode, coords) {
-      var _store$getState2 = this.store.getState(),
-          origin = _store$getState2.origin,
-          destination = _store$getState2.destination;
-
-      if (origin.geometry && destination.geometry && !(0, _lodash4.default)(origin.geometry, destination.geometry)) {
-
-        // Animate map to fit bounds.
-        var bb = (0, _turfExtent2.default)({
-          type: 'FeatureCollection',
-          features: [origin, destination]
-        });
-
-        this._map.fitBounds([[bb[0], bb[1]], [bb[2], bb[3]]], { padding: 80 });
-      } else {
-        this._map.flyTo({ center: coords });
-      }
-    }
-  }, {
-    key: 'onAdd',
-    value: function onAdd() {
-      var _this = this;
-
-      var _actions = this.actions,
-          clearOrigin = _actions.clearOrigin,
-          clearDestination = _actions.clearDestination,
-          createOrigin = _actions.createOrigin,
-          createDestination = _actions.createDestination,
-          setProfile = _actions.setProfile,
-          reverse = _actions.reverse;
-
-      var _store$getState3 = this.store.getState(),
-          geocoder = _store$getState3.geocoder;
-
-      console.log('geocoder from state', geocoder);
-
-      this.originInput = new _geocoder2.default(Object.assign({}, {
-        flyTo: false,
-        placeholder: 'Choose a starting place',
-        container: this.container.querySelector('#mapbox-directions-origin-input'),
-        accessToken: this.accessToken
-      }, geocoder));
-
-      this._map.addControl(this.originInput);
-
-      this.destinationInput = new _geocoder2.default(Object.assign({}, {
-        flyTo: false,
-        placeholder: 'Choose destination',
-        container: this.container.querySelector('#mapbox-directions-destination-input'),
-        accessToken: this.accessToken
-      }, geocoder));
-
-      this._map.addControl(this.destinationInput);
-
-      this.originInput.on('result', function (e) {
-        var coords = e.result.center;
-        createOrigin(coords);
-        _this.animateToCoordinates('origin', coords);
-      });
-
-      this.originInput.on('clear', clearOrigin);
-
-      this.destinationInput.on('result', function (e) {
-        var coords = e.result.center;
-        createDestination(coords);
-        _this.animateToCoordinates('destination', coords);
-      });
-
-      this.destinationInput.on('clear', clearDestination);
-
-      // Driving / Walking / Cycling profiles
-      var profiles = this.container.querySelectorAll('input[type="radio"]');
-      Array.prototype.forEach.call(profiles, function (el) {
-        el.addEventListener('change', function () {
-          setProfile(el.id.split('-').pop());
-        });
-      });
-
-      // Reversing Origin / Destination
-      this.container.querySelector('.js-reverse-inputs').addEventListener('click', function () {
-        var _store$getState4 = _this.store.getState(),
-            origin = _store$getState4.origin,
-            destination = _store$getState4.destination;
-
-        if (origin) _this.actions.queryDestination(origin.geometry.coordinates);
-        if (destination) _this.actions.queryOrigin(destination.geometry.coordinates);
-        reverse();
-      });
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _this2 = this;
-
-      this.store.subscribe(function () {
-        var _store$getState5 = _this2.store.getState(),
-            originQuery = _store$getState5.originQuery,
-            destinationQuery = _store$getState5.destinationQuery,
-            originQueryCoordinates = _store$getState5.originQueryCoordinates,
-            destinationQueryCoordinates = _store$getState5.destinationQueryCoordinates;
-
-        if (originQuery) {
-          _this2.originInput.query(originQuery);
-          _this2.actions.queryOrigin(null);
-        }
-
-        if (destinationQuery) {
-          _this2.destinationInput.query(destinationQuery);
-          _this2.actions.queryDestination(null);
-        }
-
-        if (originQueryCoordinates) {
-          _this2.originInput.setInput(originQueryCoordinates);
-          _this2.animateToCoordinates('origin', originQueryCoordinates);
-          _this2.actions.queryOriginCoordinates(null);
-        }
-
-        if (destinationQueryCoordinates) {
-          _this2.destinationInput.setInput(destinationQueryCoordinates);
-          _this2.animateToCoordinates('destination', destinationQueryCoordinates);
-          _this2.actions.queryDestinationCoordinates(null);
-        }
-      });
-    }
-  }]);
-
-  return Inputs;
-}();
-
-exports.default = Inputs;
-
-},{"./geocoder":38,"lodash.isequal":3,"lodash.template":4,"turf-extent":33}],40:[function(require,module,exports){
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _utils = require('../utils');
-
-var _utils2 = _interopRequireDefault(_utils);
-
-var _lodash = require('lodash.template');
-
-var _lodash2 = _interopRequireDefault(_lodash);
-
-var _lodash3 = require('lodash.isequal');
-
-var _lodash4 = _interopRequireDefault(_lodash3);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
- // substack/brfs#39
-var instructionsTemplate = (0, _lodash2.default)("<div class='directions-control directions-control-directions'>\n  <div class='mapbox-directions-component mapbox-directions-route-summary<% if (routes > 1) { %> mapbox-directions-multiple<% } %>'>\n    <% if (routes > 1) { %>\n    <div class='mapbox-directions-routes mapbox-directions-clearfix'>\n      <% for (var i = 0; i < routes; i++) { %>\n        <input type='radio' name='routes' id='<%= i %>' <% if (i === routeIndex) { %>checked<% } %>>\n        <label for='<%= i %>' class='mapbox-directions-route'><%= i + 1 %></label>\n      <% } %>\n    </div>\n    <% } %>\n    <h1><%- duration %></h1>\n    <span><%- distance %></span>\n  </div>\n\n  <div class='mapbox-directions-instructions'>\n    <ol class='mapbox-directions-steps'>\n      <% steps.forEach(function(step) { %>\n        <%\n          var distance = step.distance ? format(step.distance) : false;\n          var icon = step.maneuver.type.replace(/\\s+/g, '-').toLowerCase();\n          var lng = step.maneuver.location.coordinates[0];\n          var lat = step.maneuver.location.coordinates[1];\n        %>\n        <li\n          data-lat='<%= lat %>'\n          data-lng='<%= lng %>'\n          class='mapbox-directions-step'>\n          <span class='directions-icon directions-icon-<%= icon %>'></span>\n          <div class='mapbox-directions-step-maneuver'>\n            <%= step.maneuver.instruction %>\n          </div>\n          <% if (step.distance) { %>\n            <div class='mapbox-directions-step-distance'>\n              <%= distance %>\n            </div>\n          <% } %>\n        </li>\n      <% }); %>\n    </ol>\n  </div>\n</div>\n");
-var errorTemplate = (0, _lodash2.default)("<div class='directions-control directions-control-directions'>\n  <div class='mapbox-directions-error'>\n    <%= error %>\n  </div>\n</div>\n");
-
-/**
- * Summary/Instructions controller
- *
- * @param {HTMLElement} el Summary parent container
- * @param {Object} store A redux store
- * @param {Object} actions Actions an element can dispatch
- * @param {Object} map The mapboxgl instance
- * @private
- */
-
-var Instructions = function () {
-  function Instructions(el, store, actions, map) {
-    _classCallCheck(this, Instructions);
-
-    this.container = el;
-    this.actions = actions;
-    this.store = store;
-    this._map = map;
-    this.directions = {};
-    this.render();
-  }
-
-  _createClass(Instructions, [{
-    key: 'render',
-    value: function render() {
-      var _this = this;
-
-      this.store.subscribe(function () {
-        var _actions = _this.actions,
-            hoverMarker = _actions.hoverMarker,
-            setRouteIndex = _actions.setRouteIndex;
-
-        var _store$getState = _this.store.getState(),
-            routeIndex = _store$getState.routeIndex,
-            unit = _store$getState.unit,
-            directions = _store$getState.directions,
-            error = _store$getState.error;
-
-        var shouldRender = !(0, _lodash4.default)(directions[routeIndex], _this.directions);
-
-        if (error) {
-          _this.container.innerHTML = errorTemplate({ error: error });
-          return;
-        }
-
-        if (directions.length && shouldRender) {
-          var direction = _this.directions = directions[routeIndex];
-          _this.container.innerHTML = instructionsTemplate({
-            routeIndex: routeIndex,
-            routes: directions.length,
-            steps: direction.steps,
-            format: _utils2.default.format[unit],
-            duration: _utils2.default.format[unit](direction.distance),
-            distance: _utils2.default.format.duration(direction.duration)
-          });
-
-          var steps = _this.container.querySelectorAll('.mapbox-directions-step');
-
-          Array.prototype.forEach.call(steps, function (el) {
-            var lng = el.getAttribute('data-lng');
-            var lat = el.getAttribute('data-lat');
-
-            el.addEventListener('mouseover', function () {
-              hoverMarker([lng, lat]);
-            });
-
-            el.addEventListener('mouseout', function () {
-              hoverMarker(null);
-            });
-
-            el.addEventListener('click', function () {
-              _this._map.flyTo({
-                center: [lng, lat],
-                zoom: 16
-              });
-            });
-          });
-
-          var routes = _this.container.querySelectorAll('input[type="radio"]');
-          Array.prototype.forEach.call(routes, function (el) {
-            el.addEventListener('change', function (e) {
-              setRouteIndex(parseInt(e.target.id, 10));
-            });
-          });
-        } else if (_this.container.innerHTML && shouldRender) {
-          _this.container.innerHTML = '';
-        }
-      });
-    }
-  }]);
-
-  return Instructions;
-}();
-
-exports.default = Instructions;
-
-},{"../utils":45,"lodash.isequal":3,"lodash.template":4}],41:[function(require,module,exports){
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _redux = require('redux');
-
-var _reduxThunk = require('redux-thunk');
-
-var _reduxThunk2 = _interopRequireDefault(_reduxThunk);
-
-var _polyline = require('polyline');
-
-var _utils = require('./utils');
-
-var _utils2 = _interopRequireDefault(_utils);
-
-var _reducers = require('./reducers');
-
-var _reducers2 = _interopRequireDefault(_reducers);
-
-var _actions = require('./actions');
-
-var actions = _interopRequireWildcard(_actions);
-
-var _directions_style = require('./directions_style');
-
-var _directions_style2 = _interopRequireDefault(_directions_style);
-
-var _inputs = require('./controls/inputs');
-
-var _inputs2 = _interopRequireDefault(_inputs);
-
-var _instructions = require('./controls/instructions');
-
-var _instructions2 = _interopRequireDefault(_instructions);
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-var storeWithMiddleware = (0, _redux.applyMiddleware)(_reduxThunk2.default)(_redux.createStore);
-var store = storeWithMiddleware(_reducers2.default);
-
-// State object management via redux
-
-
-// Controls
-
-var Directions = function () {
-  function Directions(options) {
-    _classCallCheck(this, Directions);
-
-    this.actions = (0, _redux.bindActionCreators)(actions, store.dispatch);
-    this.actions.setOptions(options || {});
-    this.options = options || {};
-
-    this.onDragDown = this._onDragDown.bind(this);
-    this.onDragMove = this._onDragMove.bind(this);
-    this.onDragUp = this._onDragUp.bind(this);
-    this.move = this._move.bind(this);
-    this.onClick = this._onClick.bind(this);
-  }
-
-  // addTo(map) {
-  //     this._map = map;
-  //     var container = this._container = this.onAdd(map);
-  //     if (this.options && this.options.position) {
-  //         var pos = this.options.position;
-  //         var corner = map._controlCorners[pos];
-  //         container.className += ' mapboxgl-ctrl';
-  //         if (pos.indexOf('bottom') !== -1) {
-  //             corner.insertBefore(container, corner.firstChild);
-  //         } else {
-  //             corner.appendChild(container);
-  //         }
-  //     }
-
-  //     return this;
-  // }
-
-  _createClass(Directions, [{
-    key: 'onAdd',
-    value: function onAdd(map) {
-      var _this = this;
-
-      this._map = map;
-      console.log(this._map);
-
-      var _store$getState = store.getState(),
-          controls = _store$getState.controls;
-
-      var el = document.createElement('div');
-      el.className = 'mapboxgl-ctrl-directions mapboxgl-ctrl';
-
-      // Add controls to the page
-      var inputEl = document.createElement('div');
-      inputEl.className = 'directions-control directions-control-inputs';
-      new _inputs2.default(inputEl, store, this.actions, this._map);
-
-      var directionsEl = document.createElement('div');
-      directionsEl.className = 'directions-control-directions-container';
-
-      new _instructions2.default(directionsEl, store, {
-        hoverMarker: this.actions.hoverMarker,
-        setRouteIndex: this.actions.setRouteIndex
-      }, this._map);
-
-      if (controls.inputs) el.appendChild(inputEl);
-      if (controls.instructions) el.appendChild(directionsEl);
-
-      this.subscribedActions();
-      if (this._map.loaded()) this.mapState();else this._map.on('load', function () {
-        return _this.mapState();
-      });
-
-      return el;
-    }
-
-    /**
-     * Removes the control from the map it has been added to.
-     *
-     * @returns {Control} `this`
-     */
-
-  }, {
-    key: 'remove',
-    value: function remove() {
-      this.container.parentNode.removeChild(this.container);
-      this._map = null;
-      return this;
-    }
-  }, {
-    key: 'mapState',
-    value: function mapState() {
-      var _this2 = this;
-
-      var _store$getState2 = store.getState(),
-          profile = _store$getState2.profile,
-          styles = _store$getState2.styles,
-          interactive = _store$getState2.interactive;
-
-      // Emit any default or option set config
-
-
-      this.actions.eventEmit('profile', { profile: profile });
-
-      var geojson = {
-        type: 'geojson',
-        data: {
-          type: 'FeatureCollection',
-          features: []
-        }
-      };
-
-      // Add and set data theme layer/style
-      this._map.addSource('directions', geojson);
-
-      // Add direction specific styles to the map
-      _directions_style2.default.forEach(function (style) {
-        return _this2._map.addLayer(style);
-      });
-
-      if (styles && styles.length) styles.forEach(function (style) {
-        return _this2._map.addLayer(style);
-      });
-
-      if (interactive) {
-        this._map.on('mousedown', this.onDragDown);
-        this._map.on('mousemove', this.move);
-        this._map.on('click', this.onClick);
-
-        this._map.on('touchstart', this.move);
-        this._map.on('touchstart', this.onDragDown);
-      }
-    }
-  }, {
-    key: 'subscribedActions',
-    value: function subscribedActions() {
-      var _this3 = this;
-
-      store.subscribe(function () {
-        var _store$getState3 = store.getState(),
-            origin = _store$getState3.origin,
-            destination = _store$getState3.destination,
-            hoverMarker = _store$getState3.hoverMarker,
-            directions = _store$getState3.directions,
-            routeIndex = _store$getState3.routeIndex;
-
-        var geojson = {
-          type: 'FeatureCollection',
-          features: [origin, destination, hoverMarker].filter(function (d) {
-            return d.geometry;
-          })
-        };
-
-        if (directions.length) {
-          directions.forEach(function (feature, index) {
-
-            var lineString = {
-              geometry: {
-                type: 'LineString',
-                coordinates: (0, _polyline.decode)(feature.geometry, 6).map(function (c) {
-                  return c.reverse();
-                })
-              },
-              properties: {
-                'route-index': index,
-                route: index === routeIndex ? 'selected' : 'alternate'
-              }
-            };
-
-            geojson.features.push(lineString);
-
-            if (index === routeIndex) {
-              // Collect any possible waypoints from steps
-              feature.steps.forEach(function (d) {
-                if (d.maneuver.type === 'waypoint') {
-                  geojson.features.push({
-                    type: 'Feature',
-                    geometry: d.maneuver.location,
-                    properties: {
-                      id: 'waypoint'
-                    }
-                  });
-                }
-              });
-            }
-          });
-        }
-
-        if (_this3._map.style && _this3._map.getSource('directions')) {
-          _this3._map.getSource('directions').setData(geojson);
-        }
-      });
-    }
-  }, {
-    key: '_onClick',
-    value: function _onClick(e) {
-      var _this4 = this;
-
-      var _store$getState4 = store.getState(),
-          origin = _store$getState4.origin;
-
-      var coords = [e.lngLat.lng, e.lngLat.lat];
-
-      if (!origin.geometry) {
-        this.actions.setOriginFromCoordinates(coords);
-      } else {
-
-        var features = this._map.queryRenderedFeatures(e.point, {
-          layers: ['directions-origin-point', 'directions-destination-point', 'directions-waypoint-point', 'directions-route-line-alt']
-        });
-
-        if (features.length) {
-
-          // Remove any waypoints
-          features.forEach(function (f) {
-            if (f.layer.id === 'directions-waypoint-point') {
-              _this4.actions.removeWaypoint(f);
-            }
-          });
-
-          if (features[0].properties.route === 'alternate') {
-            var index = features[0].properties['route-index'];
-            this.actions.setRouteIndex(index);
-          }
-        } else {
-          this.actions.setDestinationFromCoordinates(coords);
-          this._map.flyTo({ center: coords });
-        }
-      }
-    }
-  }, {
-    key: '_move',
-    value: function _move(e) {
-      var _this5 = this;
-
-      var _store$getState5 = store.getState(),
-          hoverMarker = _store$getState5.hoverMarker;
-
-      var features = this._map.queryRenderedFeatures(e.point, {
-        layers: ['directions-route-line-alt', 'directions-route-line', 'directions-origin-point', 'directions-destination-point', 'directions-hover-point']
-      });
-
-      this._map.getCanvas().style.cursor = features.length ? 'pointer' : '';
-
-      if (features.length) {
-        this.isCursorOverPoint = features[0];
-        this._map.dragPan.disable();
-
-        // Add a possible waypoint marker when hovering over the active route line
-        features.forEach(function (feature) {
-          if (feature.layer.id === 'directions-route-line') {
-            _this5.actions.hoverMarker([e.lngLat.lng, e.lngLat.lat]);
-          } else if (hoverMarker.geometry) {
-            _this5.actions.hoverMarker(null);
-          }
-        });
-      } else if (this.isCursorOverPoint) {
-        this.isCursorOverPoint = false;
-        this._map.dragPan.enable();
-      }
-    }
-  }, {
-    key: '_onDragDown',
-    value: function _onDragDown() {
-      if (!this.isCursorOverPoint) return;
-      this.isDragging = this.isCursorOverPoint;
-      this._map.getCanvas().style.cursor = 'grab';
-
-      this._map.on('mousemove', this.onDragMove);
-      this._map.on('mouseup', this.onDragUp);
-
-      this._map.on('touchmove', this.onDragMove);
-      this._map.on('touchend', this.onDragUp);
-    }
-  }, {
-    key: '_onDragMove',
-    value: function _onDragMove(e) {
-      if (!this.isDragging) return;
-
-      var coords = [e.lngLat.lng, e.lngLat.lat];
-      switch (this.isDragging.layer.id) {
-        case 'directions-origin-point':
-          this.actions.createOrigin(coords);
-          break;
-        case 'directions-destination-point':
-          this.actions.createDestination(coords);
-          break;
-        case 'directions-hover-point':
-          this.actions.hoverMarker(coords);
-          break;
-      }
-    }
-  }, {
-    key: '_onDragUp',
-    value: function _onDragUp() {
-      if (!this.isDragging) return;
-
-      var _store$getState6 = store.getState(),
-          hoverMarker = _store$getState6.hoverMarker,
-          origin = _store$getState6.origin,
-          destination = _store$getState6.destination;
-
-      switch (this.isDragging.layer.id) {
-        case 'directions-origin-point':
-          this.actions.setOriginFromCoordinates(origin.geometry.coordinates);
-          break;
-        case 'directions-destination-point':
-          this.actions.setDestinationFromCoordinates(destination.geometry.coordinates);
-          break;
-        case 'directions-hover-point':
-          // Add waypoint if a sufficent amount of dragging has occurred.
-          if (hoverMarker.geometry && !_utils2.default.coordinateMatch(this.isDragging, hoverMarker)) {
-            this.actions.addWaypoint(0, hoverMarker);
-          }
-          break;
-      }
-
-      this.isDragging = false;
-      this._map.getCanvas().style.cursor = '';
-
-      this._map.off('touchmove', this.onDragMove);
-      this._map.off('touchend', this.onDragUp);
-
-      this._map.off('mousemove', this.onDragMove);
-      this._map.off('mouseup', this.onDragUp);
-    }
-
-    // API Methods
-    // ============================
-
-    /**
-     * Turn on or off interactivity
-     * @param {Boolean} state sets interactivity based on a state of `true` or `false`.
-     * @returns {Directions} this
-     */
-
-  }, {
-    key: 'interactive',
-    value: function interactive(state) {
-      if (state) {
-        this._map.on('touchstart', this.move);
-        this._map.on('touchstart', this.onDragDown);
-
-        this._map.on('mousedown', this.onDragDown);
-        this._map.on('mousemove', this.move);
-        this._map.on('click', this.onClick);
-      } else {
-        this._map.off('touchstart', this.move);
-        this._map.off('touchstart', this.onDragDown);
-
-        this._map.off('mousedown', this.onDragDown);
-        this._map.off('mousemove', this.move);
-        this._map.off('click', this.onClick);
-      }
-
-      return this;
-    }
-
-    /**
-     * Returns the origin of the current route.
-     * @returns {Object} origin
-     */
-
-  }, {
-    key: 'getOrigin',
-    value: function getOrigin() {
-      return store.getState().origin;
-    }
-
-    /**
-     * Sets origin. _Note:_ calling this method requires the [map load event](https://www.mapbox.com/mapbox-gl-js/api/#Map.load)
-     * to have run.
-     * @param {Array<number>|String} query An array of coordinates [lng, lat] or location name as a string.
-     * @returns {Directions} this
-     */
-
-  }, {
-    key: 'setOrigin',
-    value: function setOrigin(query) {
-      if (typeof query === 'string') {
-        console.log('this is a query');
-        this.actions.queryOrigin(query);
-      } else {
-        this.actions.setOriginFromCoordinates(query);
-      }
-
-      return this;
-    }
-
-    /**
-     * Returns the destination of the current route.
-     * @returns {Object} destination
-     */
-
-  }, {
-    key: 'getDestination',
-    value: function getDestination() {
-      return store.getState().destination;
-    }
-
-    /**
-     * Sets destination. _Note:_ calling this method requires the [map load event](https://www.mapbox.com/mapbox-gl-js/api/#Map.load)
-     * to have run.
-     * @param {Array<number>|String} query An array of coordinates [lng, lat] or location name as a string.
-     * @returns {Directions} this
-     */
-
-  }, {
-    key: 'setDestination',
-    value: function setDestination(query) {
-      if (typeof query === 'string') {
-        this.actions.queryDestination(query);
-      } else {
-        this.actions.setDestinationFromCoordinates(query);
-      }
-
-      return this;
-    }
-
-    /**
-     * Swap the origin and destination.
-     * @returns {Directions} this
-     */
-
-  }, {
-    key: 'reverse',
-    value: function reverse() {
-      this.actions.reverse();
-      return this;
-    }
-
-    /**
-     * Add a waypoint to the route. _Note:_ calling this method requires the
-     * [map load event](https://www.mapbox.com/mapbox-gl-js/api/#Map.load) to have run.
-     * @param {Number} index position waypoint should be placed in the waypoint array
-     * @param {Array<number>|Point} waypoint can be a GeoJSON Point Feature or [lng, lat] coordinates.
-     * @returns {Directions} this;
-     */
-
-  }, {
-    key: 'addWaypoint',
-    value: function addWaypoint(index, waypoint) {
-      if (!waypoint.type) waypoint = _utils2.default.createPoint(waypoint, { id: 'waypoint' });
-      this.actions.addWaypoint(index, waypoint);
-      return this;
-    }
-
-    /**
-     * Change the waypoint at a given index in the route. _Note:_ calling this
-     * method requires the [map load event](https://www.mapbox.com/mapbox-gl-js/api/#Map.load)
-     * to have run.
-     * @param {Number} index indexed position of the waypoint to update
-     * @param {Array<number>|Point} waypoint can be a GeoJSON Point Feature or [lng, lat] coordinates.
-     * @returns {Directions} this;
-     */
-
-  }, {
-    key: 'setWaypoint',
-    value: function setWaypoint(index, waypoint) {
-      if (!waypoint.type) waypoint = _utils2.default.createPoint(waypoint, { id: 'waypoint' });
-      this.actions.setWaypoint(index, waypoint);
-      return this;
-    }
-
-    /**
-     * Remove a waypoint from the route.
-     * @param {Number} index position in the waypoints array.
-     * @returns {Directions} this;
-     */
-
-  }, {
-    key: 'removeWaypoint',
-    value: function removeWaypoint(index) {
-      var _store$getState7 = store.getState(),
-          waypoints = _store$getState7.waypoints;
-
-      this.actions.removeWaypoint(waypoints[index]);
-      return this;
-    }
-
-    /**
-     * Fetch all current waypoints in a route.
-     * @returns {Array} waypoints
-     */
-
-  }, {
-    key: 'getWaypoints',
-    value: function getWaypoints() {
-      return store.getState().waypoints;
-    }
-
-    /**
-     * Subscribe to events that happen within the plugin.
-     * @param {String} type name of event. Available events and the data passed into their respective event objects are:
-     *
-     * - __clear__ `{ type: } Type is one of 'origin' or 'destination'`
-     * - __loading__ `{ type: } Type is one of 'origin' or 'destination'`
-     * - __profile__ `{ profile } Profile is one of 'driving', 'walking', or 'cycling'`
-     * - __origin__ `{ feature } Fired when origin is set`
-     * - __destination__ `{ feature } Fired when destination is set`
-     * - __route__ `{ route } Fired when a route is updated`
-     * - __error__ `{ error } Error as string
-     * @param {Function} fn function that's called when the event is emitted.
-     * @returns {Directions} this;
-     */
-
-  }, {
-    key: 'on',
-    value: function on(type, fn) {
-      this.actions.eventSubscribe(type, fn);
-      return this;
-    }
-  }]);
-
-  return Directions;
-}();
-
-exports.default = Directions;
-
-},{"./actions":36,"./controls/inputs":39,"./controls/instructions":40,"./directions_style":42,"./reducers":44,"./utils":45,"polyline":7,"redux":14,"redux-thunk":8}],42:[function(require,module,exports){
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var style = [{
-  'id': 'directions-route-line-alt',
-  'type': 'line',
-  'source': 'directions',
-  'layout': {
-    'line-cap': 'round',
-    'line-join': 'round'
-  },
-  'paint': {
-    'line-color': '#bbb',
-    'line-width': 4
-  },
-  'filter': ['all', ['in', '$type', 'LineString'], ['in', 'route', 'alternate']]
-}, {
-  'id': 'directions-route-line',
-  'type': 'line',
-  'source': 'directions',
-  'layout': {
-    'line-cap': 'round',
-    'line-join': 'round'
-  },
-  'paint': {
-    'line-color': '#3bb2d0',
-    'line-width': 4
-  },
-  'filter': ['all', ['in', '$type', 'LineString'], ['in', 'route', 'selected']]
-}, {
-  'id': 'directions-hover-point-casing',
-  'type': 'circle',
-  'source': 'directions',
-  'paint': {
-    'circle-radius': 8,
-    'circle-color': '#fff'
-  },
-  'filter': ['all', ['in', '$type', 'Point'], ['in', 'id', 'hover']]
-}, {
-  'id': 'directions-hover-point',
-  'type': 'circle',
-  'source': 'directions',
-  'paint': {
-    'circle-radius': 6,
-    'circle-color': '#3bb2d0'
-  },
-  'filter': ['all', ['in', '$type', 'Point'], ['in', 'id', 'hover']]
-}, {
-  'id': 'directions-waypoint-point-casing',
-  'type': 'circle',
-  'source': 'directions',
-  'paint': {
-    'circle-radius': 8,
-    'circle-color': '#fff'
-  },
-  'filter': ['all', ['in', '$type', 'Point'], ['in', 'id', 'waypoint']]
-}, {
-  'id': 'directions-waypoint-point',
-  'type': 'circle',
-  'source': 'directions',
-  'paint': {
-    'circle-radius': 6,
-    'circle-color': '#8a8bc9'
-  },
-  'filter': ['all', ['in', '$type', 'Point'], ['in', 'id', 'waypoint']]
-}, {
-  'id': 'directions-origin-point',
-  'type': 'circle',
-  'source': 'directions',
-  'paint': {
-    'circle-radius': 18,
-    'circle-color': '#3bb2d0'
-  },
-  'filter': ['all', ['in', '$type', 'Point'], ['in', 'marker-symbol', 'A']]
-}, {
-  'id': 'directions-origin-label',
-  'type': 'symbol',
-  'source': 'directions',
-  'layout': {
-    'text-field': 'A',
-    'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'],
-    'text-size': 12
-  },
-  'paint': {
-    'text-color': '#fff'
-  },
-  'filter': ['all', ['in', '$type', 'Point'], ['in', 'marker-symbol', 'A']]
-}, {
-  'id': 'directions-destination-point',
-  'type': 'circle',
-  'source': 'directions',
-  'paint': {
-    'circle-radius': 18,
-    'circle-color': '#8a8bc9'
-  },
-  'filter': ['all', ['in', '$type', 'Point'], ['in', 'marker-symbol', 'B']]
-}, {
-  'id': 'directions-destination-label',
-  'type': 'symbol',
-  'source': 'directions',
-  'layout': {
-    'text-field': 'B',
-    'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'],
-    'text-size': 12
-  },
-  'paint': {
-    'text-color': '#fff'
-  },
-  'filter': ['all', ['in', '$type', 'Point'], ['in', 'marker-symbol', 'B']]
-}];
-
-exports.default = style;
-
-},{}],43:[function(require,module,exports){
-'use strict';
-
-var _directions = require('./directions');
-
-var _directions2 = _interopRequireDefault(_directions);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-module.exports = _directions2.default; /**
-                                        * A directions component using Mapbox Directions APi
-                                        * @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 {Boolean} [options.interactive=true] Enable/Disable mouse or touch interactivity from the plugin
-                                        * @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`
-                                        * @param {string|Element} options.container HTML element to initialize the map in (or element id as string). If no container is passed map.getContainer() is used instead.
-                                        * @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.
-                                        * @param {Boolean} [options.controls.instructions=true] Hide or display the instructions control.
-                                        * @example
-                                        * var directions = new mapboxgl.Directions({
-                                        *   container: 'directions',
-                                        *   unit: 'metric',
-                                        *   profile: 'walking'
-                                        * });
-                                        *
-                                        * map.addControl(directions);
-                                        * @return {Directions} `this`
-                                        */
-
-},{"./directions":41}],44:[function(require,module,exports){
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _action_types = require('../constants/action_types.js');
-
-var types = _interopRequireWildcard(_action_types);
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-var initialState = {
-  // Options set on initialization
-  api: 'https://api.mapbox.com/v4/directions/',
-  profile: 'driving',
-  unit: 'imperial',
-  proximity: false,
-  styles: [],
-
-  // UI controls
-  controls: {
-    inputs: true,
-    instructions: true
-  },
-
-  // Optional setting to pass options available to mapbox-gl-geocoder
-  geocoder: {},
-
-  interactive: true,
-
-  // Container for client registered events
-  events: {},
-
-  // Marker feature drawn on the map at any point.
-  origin: {},
-  destination: {},
-  hoverMarker: {},
-  waypoints: [],
-
-  // User input strings or result returned from geocoder
-  originQuery: null,
-  destinationQuery: null,
-  originQueryCoordinates: null,
-  destinationQueryCoordinates: null,
-
-  // Directions data
-  directions: [],
-  routeIndex: 0
-};
-
-function data() {
-  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
-  var action = arguments[1];
-
-  switch (action.type) {
-    case types.SET_OPTIONS:
-      return Object.assign({}, state, action.options);
-
-    case types.DIRECTIONS_PROFILE:
-      return Object.assign({}, state, {
-        profile: action.profile
-      });
-
-    case types.ORIGIN:
-      return Object.assign({}, state, {
-        origin: action.origin,
-        hoverMarker: {}
-      });
-
-    case types.DESTINATION:
-      return Object.assign({}, state, {
-        destination: action.destination,
-        hoverMarker: {}
-      });
-
-    case types.HOVER_MARKER:
-      return Object.assign({}, state, {
-        hoverMarker: action.hoverMarker
-      });
-
-    case types.WAYPOINTS:
-      return Object.assign({}, state, {
-        waypoints: action.waypoints
-      });
-
-    case types.ORIGIN_QUERY:
-      return Object.assign({}, state, {
-        originQuery: action.query
-      });
-
-    case types.DESTINATION_QUERY:
-      return Object.assign({}, state, {
-        destinationQuery: action.query
-      });
-
-    case types.ORIGIN_FROM_COORDINATES:
-      return Object.assign({}, state, {
-        originQueryCoordinates: action.coordinates
-      });
-
-    case types.DESTINATION_FROM_COORDINATES:
-      return Object.assign({}, state, {
-        destinationQueryCoordinates: action.coordinates
-      });
-
-    case types.ORIGIN_CLEAR:
-      return Object.assign({}, state, {
-        origin: {},
-        originQuery: '',
-        waypoints: [],
-        directions: []
-      });
-
-    case types.DESTINATION_CLEAR:
-      return Object.assign({}, state, {
-        destination: {},
-        destinationQuery: '',
-        waypoints: [],
-        directions: []
-      });
-
-    case types.DIRECTIONS:
-      return Object.assign({}, state, {
-        directions: action.directions
-      });
-
-    case types.ROUTE_INDEX:
-      return Object.assign({}, state, {
-        routeIndex: action.routeIndex
-      });
-
-    case types.ERROR:
-      return Object.assign({}, state, {
-        error: action.error
-      });
-
-    default:
-      return state;
-  }
-}
-
-exports.default = data;
-
-},{"../constants/action_types.js":37}],45:[function(require,module,exports){
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-function validCoords(coords) {
-  return coords[0] >= -180 && coords[0] <= 180 && coords[1] >= -90 && coords[1] <= 90;
-}
-
-function coordinateMatch(a, b) {
-  a = a.geometry.coordinates;
-  b = b.geometry.coordinates;
-  return a.join() === b.join() || a[0].toFixed(3) === b[0].toFixed(3) && a[1].toFixed(3) === b[1].toFixed(3);
-}
-
-function wrap(n) {
-  var d = 180 - -180;
-  var w = ((n - -180) % d + d) % d + -180;
-  return w === -180 ? 180 : w;
-}
-
-function createPoint(coordinates, properties) {
-  return {
-    type: 'Feature',
-    geometry: {
-      type: 'Point',
-      coordinates: coordinates
-    },
-    properties: properties ? properties : {}
-  };
-}
-
-var format = {
-  duration: function duration(s) {
-    var m = Math.floor(s / 60),
-        h = Math.floor(m / 60);
-    s %= 60;
-    m %= 60;
-    if (h === 0 && m === 0) return s + 's';
-    if (h === 0) return m + 'min';
-    return h + 'h ' + m + 'min';
-  },
-  imperial: function imperial(m) {
-    var mi = m / 1609.344;
-    if (mi >= 100) return mi.toFixed(0) + 'mi';
-    if (mi >= 10) return mi.toFixed(1) + 'mi';
-    if (mi >= 0.1) return mi.toFixed(2) + 'mi';
-    return (mi * 5280).toFixed(0) + 'ft';
-  },
-  metric: function metric(m) {
-    if (m >= 100000) return (m / 1000).toFixed(0) + 'km';
-    if (m >= 10000) return (m / 1000).toFixed(1) + 'km';
-    if (m >= 100) return (m / 1000).toFixed(2) + 'km';
-    return m.toFixed(0) + 'm';
-  }
-};
-
-exports.default = { format: format, coordinateMatch: coordinateMatch, createPoint: createPoint, validCoords: validCoords, wrap: wrap };
-
-},{}]},{},[43])(43)
-});
\ No newline at end of file
diff --git a/dist/icons/arrive.svg b/src/icons/arrive.svg
similarity index 100%
rename from dist/icons/arrive.svg
rename to src/icons/arrive.svg
diff --git a/dist/icons/bear-left.svg b/src/icons/bear-left.svg
similarity index 100%
rename from dist/icons/bear-left.svg
rename to src/icons/bear-left.svg
diff --git a/dist/icons/bear-right.svg b/src/icons/bear-right.svg
similarity index 100%
rename from dist/icons/bear-right.svg
rename to src/icons/bear-right.svg
diff --git a/dist/icons/continue.svg b/src/icons/continue.svg
similarity index 100%
rename from dist/icons/continue.svg
rename to src/icons/continue.svg
diff --git a/dist/icons/depart.svg b/src/icons/depart.svg
similarity index 100%
rename from dist/icons/depart.svg
rename to src/icons/depart.svg
diff --git a/dist/icons/enter-roundabout.svg b/src/icons/enter-roundabout.svg
similarity index 100%
rename from dist/icons/enter-roundabout.svg
rename to src/icons/enter-roundabout.svg
diff --git a/dist/icons/error.svg b/src/icons/error.svg
similarity index 100%
rename from dist/icons/error.svg
rename to src/icons/error.svg
diff --git a/dist/icons/reverse.svg b/src/icons/reverse.svg
similarity index 100%
rename from dist/icons/reverse.svg
rename to src/icons/reverse.svg
diff --git a/dist/icons/sharp-left.svg b/src/icons/sharp-left.svg
similarity index 100%
rename from dist/icons/sharp-left.svg
rename to src/icons/sharp-left.svg
diff --git a/dist/icons/sharp-right.svg b/src/icons/sharp-right.svg
similarity index 100%
rename from dist/icons/sharp-right.svg
rename to src/icons/sharp-right.svg
diff --git a/dist/icons/turn-left.svg b/src/icons/turn-left.svg
similarity index 100%
rename from dist/icons/turn-left.svg
rename to src/icons/turn-left.svg
diff --git a/dist/icons/turn-right.svg b/src/icons/turn-right.svg
similarity index 100%
rename from dist/icons/turn-right.svg
rename to src/icons/turn-right.svg
diff --git a/dist/icons/u-turn.svg b/src/icons/u-turn.svg
similarity index 100%
rename from dist/icons/u-turn.svg
rename to src/icons/u-turn.svg
diff --git a/dist/icons/waypoint.svg b/src/icons/waypoint.svg
similarity index 100%
rename from dist/icons/waypoint.svg
rename to src/icons/waypoint.svg

From e7eb4f1b9b20cad1dfc83ad03f961d2af3a1f82a Mon Sep 17 00:00:00 2001
From: mapsam <matthews.sam@gmail.com>
Date: Fri, 18 Nov 2016 09:21:33 -0800
Subject: [PATCH 06/17] add circle

---
 circle.yml | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 circle.yml

diff --git a/circle.yml b/circle.yml
new file mode 100644
index 0000000..7989a72
--- /dev/null
+++ b/circle.yml
@@ -0,0 +1,3 @@
+machine:
+  node:
+    version: 4
\ No newline at end of file

From be82ca2133d27c97639557fa55b47f8b2f5195c9 Mon Sep 17 00:00:00 2001
From: mapsam <matthews.sam@gmail.com>
Date: Fri, 18 Nov 2016 09:35:06 -0800
Subject: [PATCH 07/17] get accessToken from state

---
 src/actions/index.js   | 1 -
 src/controls/inputs.js | 6 +++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/actions/index.js b/src/actions/index.js
index 9bd50cc..f55f960 100644
--- a/src/actions/index.js
+++ b/src/actions/index.js
@@ -142,7 +142,6 @@ function setError(error) {
 }
 
 export function queryOrigin(query) {
-  console.log('querying origin');
   return {
     type: types.ORIGIN_QUERY,
     query
diff --git a/src/controls/inputs.js b/src/controls/inputs.js
index 6fe3ed0..b1d4066 100644
--- a/src/controls/inputs.js
+++ b/src/controls/inputs.js
@@ -63,12 +63,12 @@ export default class Inputs {
       reverse
     } = this.actions;
 
-    const { geocoder } = this.store.getState();
+    const { geocoder, accessToken } = this.store.getState();
 
     this.originInput = new Geocoder(Object.assign({}, {
       flyTo: false,
       placeholder: 'Choose a starting place',
-      accessToken: 'pk.eyJ1IjoibWFwc2FtIiwiYSI6ImNpaWR1MXlxcDAxMTJ1M2tzYWUyeTdpY24ifQ.QG1jCTgj-WYwJa2y1W0wMw'
+      accessToken: accessToken
     }, geocoder));
 
     var originEl = this.originInput.onAdd();
@@ -78,7 +78,7 @@ export default class Inputs {
     this.destinationInput = new Geocoder(Object.assign({}, {
       flyTo: false,
       placeholder: 'Choose destination',
-      accessToken: 'pk.eyJ1IjoibWFwc2FtIiwiYSI6ImNpaWR1MXlxcDAxMTJ1M2tzYWUyeTdpY24ifQ.QG1jCTgj-WYwJa2y1W0wMw'
+      accessToken: accessToken
     }, geocoder));
 
     var destinationEl = this.destinationInput.onAdd();

From bdcae0f2e76adc96bfbac7b319011c7ccab96676 Mon Sep 17 00:00:00 2001
From: mapsam <matthews.sam@gmail.com>
Date: Fri, 18 Nov 2016 09:52:52 -0800
Subject: [PATCH 08/17] update docs

---
 API.md    | 97 ++++++++++++++++++++++++++++++++++++++++++++++++++++++-
 README.md | 20 +++++++++++-
 2 files changed, 115 insertions(+), 2 deletions(-)

diff --git a/API.md b/API.md
index 83635fe..25a9724 100644
--- a/API.md
+++ b/API.md
@@ -10,7 +10,6 @@ A directions component using Mapbox Directions APi
     -   `options.interactive` **\[[Boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)]** Enable/Disable mouse or touch interactivity from the plugin (optional, default `true`)
     -   `options.profile` **\[[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)]** Routing profile to use. Options: `driving`, `walking`, `cycling` (optional, default `"driving"`)
     -   `options.unit` **\[[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)]** Measurement system to be used in navigation instructions. Options: `imperial`, `metric` (optional, default `"imperial"`)
-    -   `options.container` **([string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) \| [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element))** HTML element to initialize the map in (or element id as string). If no container is passed map.getContainer() is used instead.
     -   `options.geocoder` **\[[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)]** Pass options available to mapbox-gl-geocoder as [documented here](https://github.com/mapbox/mapbox-gl-geocoder/blob/master/API.md#mapboxglgeocoder).
     -   `options.controls` **\[[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)]** 
         -   `options.controls.inputs` **\[[Boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)]** Hide or display the inputs control. (optional, default `true`)
@@ -30,6 +29,12 @@ map.addControl(directions);
 
 Returns **Directions** `this`
 
+# remove
+
+Removes the control from the map it has been added to.
+
+Returns **Control** `this`
+
 # interactive
 
 Turn on or off interactivity
@@ -137,3 +142,93 @@ Subscribe to events that happen within the plugin.
 -   `fn` **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)** function that's called when the event is emitted.
 
 Returns **Directions** this;
+
+# mapboxgl.Geocoder
+
+A geocoder component using Mapbox Geocoding API
+
+**Parameters**
+
+-   `options` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** 
+    -   `options.country` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** a comma seperated list of country codes to limit results to specified country or countries.
+    -   `options.accessToken` **\[[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)]** Required unless `mapboxgl.accessToken` is set globally (optional, default `null`)
+    -   `options.container` **([string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) \| [element](https://developer.mozilla.org/en-US/docs/Web/API/Element))** The HTML element to append the Geocoder input to. if container is not specified, `map.getcontainer()` is used.
+    -   `options.proximity` **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)&lt;[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)>** If set, search results closer to these coordinates will be given higher priority.
+    -   `options.position` **\[[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)]** A string indicating the control's position on the map. Options are `top-right`, `top-left`, `bottom-right`, `bottom-left` (optional, default `"top-right"`)
+    -   `options.zoom` **\[[Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)]** On geocoded result what zoom level should the map animate to. (optional, default `16`)
+    -   `options.flyTo` **\[[Boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)]** If false, animating the map to a selected result is disabled. (optional, default `true`)
+    -   `options.placeholder` **\[[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)]** Override the default placeholder attribute value. (optional, default `"Search"`)
+    -   `options.types` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** a comma seperated list of types that filter results to match those specified. See <https://www.mapbox.com/developers/api/geocoding/#filter-type> for available types.
+    -   `options.bbox` **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)&lt;[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)>** Limit results to a given bounding box provided as `[minX, minY, maxX, maxY]`.
+
+**Examples**
+
+```javascript
+var geocoder = new mapboxgl.Geocoder();
+map.addControl(geocoder);
+```
+
+Returns **Geocoder** `this`
+
+# getResult
+
+Return the input
+
+Returns **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** input
+
+# query
+
+Set & query the input
+
+**Parameters**
+
+-   `query` **([Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) \| [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String))** An array of coordinates [lng, lat] or location name as a string.
+
+Returns **Geocoder** this
+
+# setInput
+
+Set input
+
+**Parameters**
+
+-   `value` **([Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) \| [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String))** An array of coordinates [lng, lat] or location name as a string. Calling this function just sets the input and does not trigger an API request.
+
+Returns **Geocoder** this
+
+# on
+
+Subscribe to events that happen within the plugin.
+
+**Parameters**
+
+-   `type` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** name of event. Available events and the data passed into their respective event objects are:-   **clear** `Emitted when the input is cleared`
+    -   **loading** `Emitted when the geocoder is looking up a query`
+    -   **results** `{ results } Fired when the geocoder returns a response`
+    -   **result** `{ result } Fired when input is set`
+    -   **error** \`{ error } Error as string
+-   `fn` **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)** function that's called when the event is emitted.
+
+Returns **Geocoder** this;
+
+# fire
+
+Fire an event
+
+**Parameters**
+
+-   `type` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** event name.
+-   `data` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** event data to pass to the function subscribed.
+
+Returns **Geocoder** this
+
+# off
+
+Remove an event
+
+**Parameters**
+
+-   `type` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** Event name.
+-   `fn` **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)** Function that should unsubscribe to the event emitted.
+
+Returns **Geocoder** this
diff --git a/README.md b/README.md
index 6cf6731..7886faf 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,25 @@ A full featured directions plugin for [mapbox-gl-js](https://github.com/mapbox/m
 
 ### Usage
 
-See https://www.mapbox.com/mapbox-gl-js/example/mapbox-gl-directions/
+```javascript
+var mapboxgl = require('mapbox-gl');
+var MapboxDirections = require('mapbox-gl-directions');
+
+var directions = new MapboxDirections({
+  accessToken: 'YOUR-MAPBOX-ACCESS-TOKEN',
+  unit: 'metric',
+  profile: 'cycling'
+});
+
+var map = new mapboxgl.Map({
+  container: 'map',
+  style: 'mapbox://styles/mapbox/streets-v9'
+});
+
+map.addControl(directions, 'top-left');
+```
+
+Live example: https://www.mapbox.com/mapbox-gl-js/example/mapbox-gl-directions/
 
 ### Deeper dive
 

From 41cf3c2c32105c70745a534318bfd13e2c254983 Mon Sep 17 00:00:00 2001
From: mapsam <matthews.sam@gmail.com>
Date: Fri, 18 Nov 2016 10:41:39 -0800
Subject: [PATCH 09/17] remove routes and control with onRemove

---
 example/index.js     | 20 ++++++++++++++------
 src/actions/index.js |  4 +---
 src/directions.js    | 29 ++++++++++++++++++++++++-----
 3 files changed, 39 insertions(+), 14 deletions(-)

diff --git a/example/index.js b/example/index.js
index 50730aa..75f7e39 100644
--- a/example/index.js
+++ b/example/index.js
@@ -20,9 +20,15 @@ var map = window.map = new mapboxgl.Map({
   zoom: 13
 });
 
-// ui
-var button = document.createElement('button');
-button.textContent = 'click me';
+// remove control
+var button = document.body.appendChild(document.createElement('button'));
+button.style = 'z-index:10;position:absolute;top:10px;right:10px;';
+button.textContent = 'Remove directions control';
+
+// remove all waypoints
+var removeWaypointsButton = document.body.appendChild(document.createElement('button'));
+removeWaypointsButton.style = 'z-index:10;position:absolute;top:30px;right:10px;';
+removeWaypointsButton.textContent = 'Remove all waypoints';
 
 // directions
 var MapboxDirections = require('../src/index');
@@ -33,12 +39,14 @@ var directions = new MapboxDirections({
 });
 window.directions = directions;
 
-map.getContainer().querySelector('.mapboxgl-ctrl-top-right').appendChild(button);
 map.addControl(directions, 'top-left');
 
 map.on('load', () => {
   button.addEventListener('click', function() {
-    directions.setOrigin([-79.4512, 43.6568]);
-    directions.setDestination('Montreal Quebec');
+    map.removeControl(directions);
+  });
+
+  removeWaypointsButton.addEventListener('click', function() {
+    directions.removeRoutes();
   });
 });
\ No newline at end of file
diff --git a/src/actions/index.js b/src/actions/index.js
index f55f960..639e8c8 100644
--- a/src/actions/index.js
+++ b/src/actions/index.js
@@ -61,9 +61,7 @@ function fetchDirections() {
     options.push('instructions=text');
     options.push('alternatives=true');
     options.push('steps=true');
-
-    var token = accessToken ? accessToken : mapboxgl.accessToken;
-    options.push('access_token=' + token);
+    options.push('access_token=' + accessToken);
 
     request.abort();
     request.open('GET', `${api}mapbox.${profile}/${query}.json?${options.join('&')}`, true);
diff --git a/src/directions.js b/src/directions.js
index 0e34586..e777e4c 100644
--- a/src/directions.js
+++ b/src/directions.js
@@ -34,7 +34,7 @@ export default class Directions {
 
     const { controls } = store.getState();
 
-    var el = document.createElement('div');
+    var el = this.container = document.createElement('div');
     el.className = 'mapboxgl-ctrl-directions mapboxgl-ctrl';
 
     // Add controls to the page
@@ -65,10 +65,18 @@ export default class Directions {
    *
    * @returns {Control} `this`
    */
-  remove() {
-      this.container.parentNode.removeChild(this.container);
-      this._map = null;
-      return this;
+  onRemove(map) {
+    this.container.parentNode.removeChild(this.container);
+    this.removeRoutes();
+    const _this = this;
+    map.off('move', _this.move);
+    map.off('mousedown', _this.mousedown);
+    map.off('mousemove', _this.mousemove);
+    map.off('touchstart', _this.touchstart);
+    map.off('touchstart', _this.touchstart);
+    this._map = null;
+    console.log('final this', this);
+    return this;
   }
 
   mapState() {
@@ -427,6 +435,17 @@ export default class Directions {
     return store.getState().waypoints;
   }
 
+  /**
+   * Removes all routes and waypoints from the map.
+   *
+   * @returns {Directions} this;
+   */ 
+  removeRoutes() {
+    this.actions.clearOrigin();
+    this.actions.clearDestination();
+    return this;
+  }
+
   /**
    * Subscribe to events that happen within the plugin.
    * @param {String} type name of event. Available events and the data passed into their respective event objects are:

From 0a6c89c3c1c5eda73639a0935a2afeace62aa571 Mon Sep 17 00:00:00 2001
From: mapsam <matthews.sam@gmail.com>
Date: Fri, 18 Nov 2016 10:49:02 -0800
Subject: [PATCH 10/17] properly remove event listeners

---
 src/directions.js | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/directions.js b/src/directions.js
index e777e4c..8ec1a93 100644
--- a/src/directions.js
+++ b/src/directions.js
@@ -68,14 +68,12 @@ export default class Directions {
   onRemove(map) {
     this.container.parentNode.removeChild(this.container);
     this.removeRoutes();
-    const _this = this;
-    map.off('move', _this.move);
-    map.off('mousedown', _this.mousedown);
-    map.off('mousemove', _this.mousemove);
-    map.off('touchstart', _this.touchstart);
-    map.off('touchstart', _this.touchstart);
+    map.off('mousedown', this.onDragDown);
+    map.off('mousemove', this.move);
+    map.off('touchstart', this.onDragDown);
+    map.off('touchstart', this.move);
+    map.off('click', this.onClick);
     this._map = null;
-    console.log('final this', this);
     return this;
   }
 

From 7c95e314611a6637e953b6635814cafde8b0b811 Mon Sep 17 00:00:00 2001
From: mapsam <matthews.sam@gmail.com>
Date: Fri, 18 Nov 2016 11:56:00 -0800
Subject: [PATCH 11/17] update docs and class name

---
 API.md                   | 95 +++++++++++++++++-----------------------
 package.json             |  2 +-
 src/controls/geocoder.js | 23 ++--------
 src/directions.js        | 23 +++++-----
 src/index.js             | 16 ++++---
 5 files changed, 65 insertions(+), 94 deletions(-)

diff --git a/API.md b/API.md
index 25a9724..c8226d3 100644
--- a/API.md
+++ b/API.md
@@ -1,6 +1,6 @@
-# mapboxgl.Directions
+# MapboxDirections
 
-A directions component using Mapbox Directions APi
+A directions component using Mapbox Directions API
 
 **Parameters**
 
@@ -18,24 +18,30 @@ A directions component using Mapbox Directions APi
 **Examples**
 
 ```javascript
-var directions = new mapboxgl.Directions({
-  container: 'directions',
+var MapboxDirections = require('../src/index');
+var directions = new MapboxDirections({
+  accessToken: 'YOUR-MAPBOX-ACCESS-TOKEN',
   unit: 'metric',
-  profile: 'walking'
+  profile: 'cycling'
 });
-
+// add to your mapboxgl map
 map.addControl(directions);
 ```
 
-Returns **Directions** `this`
+Returns **[MapboxDirections](#mapboxdirections)** `this`
+
+## onRemove
+
+Removes the control from the map it has been added to. This is called by `map.removeControl`,
+which is the recommended method to remove controls.
 
-# remove
+**Parameters**
 
-Removes the control from the map it has been added to.
+-   `map`  
 
 Returns **Control** `this`
 
-# interactive
+## interactive
 
 Turn on or off interactivity
 
@@ -43,15 +49,15 @@ Turn on or off interactivity
 
 -   `state` **[Boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** sets interactivity based on a state of `true` or `false`.
 
-Returns **Directions** this
+Returns **[MapboxDirections](#mapboxdirections)** this
 
-# getOrigin
+## getOrigin
 
 Returns the origin of the current route.
 
 Returns **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** origin
 
-# setOrigin
+## setOrigin
 
 Sets origin. _Note:_ calling this method requires the [map load event](https://www.mapbox.com/mapbox-gl-js/api/#Map.load)
 to have run.
@@ -60,15 +66,15 @@ to have run.
 
 -   `query` **([Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)&lt;[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)> | [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String))** An array of coordinates [lng, lat] or location name as a string.
 
-Returns **Directions** this
+Returns **[MapboxDirections](#mapboxdirections)** this
 
-# getDestination
+## getDestination
 
 Returns the destination of the current route.
 
 Returns **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** destination
 
-# setDestination
+## setDestination
 
 Sets destination. _Note:_ calling this method requires the [map load event](https://www.mapbox.com/mapbox-gl-js/api/#Map.load)
 to have run.
@@ -77,15 +83,15 @@ to have run.
 
 -   `query` **([Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)&lt;[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)> | [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String))** An array of coordinates [lng, lat] or location name as a string.
 
-Returns **Directions** this
+Returns **[MapboxDirections](#mapboxdirections)** this
 
-# reverse
+## reverse
 
 Swap the origin and destination.
 
-Returns **Directions** this
+Returns **[MapboxDirections](#mapboxdirections)** this
 
-# addWaypoint
+## addWaypoint
 
 Add a waypoint to the route. _Note:_ calling this method requires the
 [map load event](https://www.mapbox.com/mapbox-gl-js/api/#Map.load) to have run.
@@ -95,9 +101,9 @@ Add a waypoint to the route. _Note:_ calling this method requires the
 -   `index` **[Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** position waypoint should be placed in the waypoint array
 -   `waypoint` **([Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)&lt;[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)> | Point)** can be a GeoJSON Point Feature or [lng, lat] coordinates.
 
-Returns **Directions** this;
+Returns **[MapboxDirections](#mapboxdirections)** this;
 
-# setWaypoint
+## setWaypoint
 
 Change the waypoint at a given index in the route. _Note:_ calling this
 method requires the [map load event](https://www.mapbox.com/mapbox-gl-js/api/#Map.load)
@@ -108,9 +114,9 @@ to have run.
 -   `index` **[Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** indexed position of the waypoint to update
 -   `waypoint` **([Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)&lt;[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)> | Point)** can be a GeoJSON Point Feature or [lng, lat] coordinates.
 
-Returns **Directions** this;
+Returns **[MapboxDirections](#mapboxdirections)** this;
 
-# removeWaypoint
+## removeWaypoint
 
 Remove a waypoint from the route.
 
@@ -118,15 +124,21 @@ Remove a waypoint from the route.
 
 -   `index` **[Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** position in the waypoints array.
 
-Returns **Directions** this;
+Returns **[MapboxDirections](#mapboxdirections)** this;
 
-# getWaypoints
+## getWaypoints
 
 Fetch all current waypoints in a route.
 
 Returns **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)** waypoints
 
-# on
+## removeRoutes
+
+Removes all routes and waypoints from the map.
+
+Returns **[MapboxDirections](#mapboxdirections)** this;
+
+## on
 
 Subscribe to events that happen within the plugin.
 
@@ -141,34 +153,7 @@ Subscribe to events that happen within the plugin.
     -   **error** \`{ error } Error as string
 -   `fn` **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)** function that's called when the event is emitted.
 
-Returns **Directions** this;
-
-# mapboxgl.Geocoder
-
-A geocoder component using Mapbox Geocoding API
-
-**Parameters**
-
--   `options` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** 
-    -   `options.country` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** a comma seperated list of country codes to limit results to specified country or countries.
-    -   `options.accessToken` **\[[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)]** Required unless `mapboxgl.accessToken` is set globally (optional, default `null`)
-    -   `options.container` **([string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) \| [element](https://developer.mozilla.org/en-US/docs/Web/API/Element))** The HTML element to append the Geocoder input to. if container is not specified, `map.getcontainer()` is used.
-    -   `options.proximity` **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)&lt;[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)>** If set, search results closer to these coordinates will be given higher priority.
-    -   `options.position` **\[[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)]** A string indicating the control's position on the map. Options are `top-right`, `top-left`, `bottom-right`, `bottom-left` (optional, default `"top-right"`)
-    -   `options.zoom` **\[[Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)]** On geocoded result what zoom level should the map animate to. (optional, default `16`)
-    -   `options.flyTo` **\[[Boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)]** If false, animating the map to a selected result is disabled. (optional, default `true`)
-    -   `options.placeholder` **\[[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)]** Override the default placeholder attribute value. (optional, default `"Search"`)
-    -   `options.types` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** a comma seperated list of types that filter results to match those specified. See <https://www.mapbox.com/developers/api/geocoding/#filter-type> for available types.
-    -   `options.bbox` **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)&lt;[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)>** Limit results to a given bounding box provided as `[minX, minY, maxX, maxY]`.
-
-**Examples**
-
-```javascript
-var geocoder = new mapboxgl.Geocoder();
-map.addControl(geocoder);
-```
-
-Returns **Geocoder** `this`
+Returns **[MapboxDirections](#mapboxdirections)** this;
 
 # getResult
 
diff --git a/package.json b/package.json
index edc54cd..7b740fc 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
   "scripts": {
     "prepublish": "npm run build",
     "start": "NODE_ENV=development budo example/index.js:example/bundle.js --live",
-    "build": "NODE_ENV=production mkdir -p dist && browserify -s MapboxDirections src/index.js > dist/mapbox-gl-directions.js",
+    "build": "NODE_ENV=production mkdir -p dist && browserify -s MapboxDirections src/index.js > dist/mapbox-gl-directions.js && cp src/mapbox-gl-directions.css dist/",
     "test": "NODE_ENV=test npm run lint && browserify test/index.js | smokestack -b firefox | tap-status",
     "docs": "documentation build --format=md > API.md",
     "lint": "eslint --no-eslintrc -c .eslintrc src"
diff --git a/src/controls/geocoder.js b/src/controls/geocoder.js
index a292b6d..62862d1 100644
--- a/src/controls/geocoder.js
+++ b/src/controls/geocoder.js
@@ -9,26 +9,9 @@ import utils from '../utils'
 // Mapbox Geocoder version
 var API = 'https://api.mapbox.com/geocoding/v5/mapbox.places/';
 
-/**
- * A geocoder component using Mapbox Geocoding API
- * @class mapboxgl.Geocoder
- *
- * @param {Object} options
- * @param {String} [options.position="top-right"] A string indicating the control's position on the map. Options are `top-right`, `top-left`, `bottom-right`, `bottom-left`
- * @param {String} [options.accessToken=null] Required unless `mapboxgl.accessToken` is set globally
- * @param {string|element} options.container The HTML element to append the Geocoder input to. if container is not specified, `map.getcontainer()` is used.
- * @param {Array<number>} options.proximity If set, search results closer to these coordinates will be given higher priority.
- * @param {Array<number>} options.bbox Limit results to a given bounding box provided as `[minX, minY, maxX, maxY]`.
- * @param {Number} [options.zoom=16] On geocoded result what zoom level should the map animate to.
- * @param {Boolean} [options.flyTo=true] If false, animating the map to a selected result is disabled.
- * @param {String} [options.placeholder="Search"] Override the default placeholder attribute value.
- * @param {string} options.types a comma seperated list of types that filter results to match those specified. See https://www.mapbox.com/developers/api/geocoding/#filter-type for available types.
- * @param {string} options.country a comma seperated list of country codes to limit results to specified country or countries.
- * @example
- * var geocoder = new mapboxgl.Geocoder();
- * map.addControl(geocoder);
- * @return {Geocoder} `this`
- */
+// Geocoder - this slightly mimicks the mapboxl-gl-geocoder but isn't an exact replica.
+// Once gl-js plugins can be added to custom divs, we should be able to require mapbox-gl-geocoder
+// instead of including it here
 function Geocoder(options) {
   this._ev = new EventEmitter();
   this.options = extend({}, this.options, options);
diff --git a/src/directions.js b/src/directions.js
index 8ec1a93..b0dd44e 100644
--- a/src/directions.js
+++ b/src/directions.js
@@ -15,7 +15,7 @@ import directionsStyle from './directions_style';
 import Inputs from './controls/inputs';
 import Instructions from './controls/instructions';
 
-export default class Directions {
+export default class MapboxDirections {
 
   constructor(options) {
     this.actions = bindActionCreators(actions, store.dispatch);
@@ -61,7 +61,8 @@ export default class Directions {
   }
 
   /**
-   * Removes the control from the map it has been added to.
+   * Removes the control from the map it has been added to. This is called by `map.removeControl`,
+   * which is the recommended method to remove controls.
    *
    * @returns {Control} `this`
    */
@@ -308,7 +309,7 @@ export default class Directions {
   /**
    * Turn on or off interactivity
    * @param {Boolean} state sets interactivity based on a state of `true` or `false`.
-   * @returns {Directions} this
+   * @returns {MapboxDirections} this
    */
   interactive(state) {
     if (state) {
@@ -342,7 +343,7 @@ export default class Directions {
    * Sets origin. _Note:_ calling this method requires the [map load event](https://www.mapbox.com/mapbox-gl-js/api/#Map.load)
    * to have run.
    * @param {Array<number>|String} query An array of coordinates [lng, lat] or location name as a string.
-   * @returns {Directions} this
+   * @returns {MapboxDirections} this
    */
   setOrigin(query) {
     if (typeof query === 'string') {
@@ -366,7 +367,7 @@ export default class Directions {
    * Sets destination. _Note:_ calling this method requires the [map load event](https://www.mapbox.com/mapbox-gl-js/api/#Map.load)
    * to have run.
    * @param {Array<number>|String} query An array of coordinates [lng, lat] or location name as a string.
-   * @returns {Directions} this
+   * @returns {MapboxDirections} this
    */
   setDestination(query) {
     if (typeof query === 'string') {
@@ -380,7 +381,7 @@ export default class Directions {
 
   /**
    * Swap the origin and destination.
-   * @returns {Directions} this
+   * @returns {MapboxDirections} this
    */
   reverse() {
     this.actions.reverse();
@@ -392,7 +393,7 @@ export default class Directions {
    * [map load event](https://www.mapbox.com/mapbox-gl-js/api/#Map.load) to have run.
    * @param {Number} index position waypoint should be placed in the waypoint array
    * @param {Array<number>|Point} waypoint can be a GeoJSON Point Feature or [lng, lat] coordinates.
-   * @returns {Directions} this;
+   * @returns {MapboxDirections} this;
    */
   addWaypoint(index, waypoint) {
     if (!waypoint.type) waypoint = utils.createPoint(waypoint, { id: 'waypoint' });
@@ -406,7 +407,7 @@ export default class Directions {
    * to have run.
    * @param {Number} index indexed position of the waypoint to update
    * @param {Array<number>|Point} waypoint can be a GeoJSON Point Feature or [lng, lat] coordinates.
-   * @returns {Directions} this;
+   * @returns {MapboxDirections} this;
    */
   setWaypoint(index, waypoint) {
     if (!waypoint.type) waypoint = utils.createPoint(waypoint, { id: 'waypoint' });
@@ -417,7 +418,7 @@ export default class Directions {
   /**
    * Remove a waypoint from the route.
    * @param {Number} index position in the waypoints array.
-   * @returns {Directions} this;
+   * @returns {MapboxDirections} this;
    */
   removeWaypoint(index) {
     const { waypoints } = store.getState();
@@ -436,7 +437,7 @@ export default class Directions {
   /**
    * Removes all routes and waypoints from the map.
    *
-   * @returns {Directions} this;
+   * @returns {MapboxDirections} this;
    */ 
   removeRoutes() {
     this.actions.clearOrigin();
@@ -456,7 +457,7 @@ export default class Directions {
    * - __route__ `{ route } Fired when a route is updated`
    * - __error__ `{ error } Error as string
    * @param {Function} fn function that's called when the event is emitted.
-   * @returns {Directions} this;
+   * @returns {MapboxDirections} this;
    */
   on(type, fn) {
     this.actions.eventSubscribe(type, fn);
diff --git a/src/index.js b/src/index.js
index 14f3cd2..1441184 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,6 @@
 /**
- * A directions component using Mapbox Directions APi
- * @class mapboxgl.Directions
+ * A directions component using Mapbox Directions API
+ * @class MapboxDirections
  *
  * @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/).
@@ -13,14 +13,16 @@
  * @param {Boolean} [options.controls.inputs=true] Hide or display the inputs control.
  * @param {Boolean} [options.controls.instructions=true] Hide or display the instructions control.
  * @example
- * var directions = new mapboxgl.Directions({
- *   container: 'directions',
+ * var MapboxDirections = require('../src/index');
+ * var directions = new MapboxDirections({
+ *   accessToken: 'YOUR-MAPBOX-ACCESS-TOKEN',
  *   unit: 'metric',
- *   profile: 'walking'
+ *   profile: 'cycling'
  * });
- *
+ * // add to your mapboxgl map
  * map.addControl(directions);
- * @return {Directions} `this`
+ * 
+ * @return {MapboxDirections} `this`
  */
 import MapboxDirections from './directions';
 

From 3d89ac716f543ddd50413bc597e6e604c07dac04 Mon Sep 17 00:00:00 2001
From: mapsam <matthews.sam@gmail.com>
Date: Fri, 18 Nov 2016 11:59:59 -0800
Subject: [PATCH 12/17] update changelog

---
 CHANGELOG.md | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3515171..551e0a6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,8 +1,17 @@
+## 3.0.0
+
+Support for the Mapbox GL JS 0.27.0 API. This is compatible with 0.27.0 and later, and not compatible with earlier versions.
+
+- [breaking] `container` option removed - attaching the control outside of the map is no longer supported
+- [breaking] `position` option removed - the `addControl` method now specifies the position
+- [breaking] Now exports `MapboxDirections` rather than attaches to `mapbox.Directions`
+- [internal] no longer creates a new map control for each of the two geocoders, instead creates two internal geocoders
+- [feature] `removeRoutes` method that removes all route lines, waypoints, and instructions
+
 ## 2.2.0
 - [feature] Defer mapboxgl dependency til runtime to support webpack async loading #86 https://github.com/mapbox/mapbox-gl-directions/pull/86
 - [bug] Fix mapboxgl.GeoJSONSource deprecation in gl-js v.22 and map.load race condition
 
-
 ## 2.1.0
 
 - [bug] Warn if mapboxgl is not present [#66](https://github.com/mapbox/mapbox-gl-directions/issues/66)

From 05501a3cfe73b3c7c82de42006c1b9232d76cd5a Mon Sep 17 00:00:00 2001
From: mapsam <matthews.sam@gmail.com>
Date: Fri, 18 Nov 2016 12:22:41 -0800
Subject: [PATCH 13/17] remove gl-geocoder

---
 package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/package.json b/package.json
index 7b740fc..1bdb4f1 100644
--- a/package.json
+++ b/package.json
@@ -60,7 +60,6 @@
     "lodash.debounce": "^4.0.6",
     "lodash.isequal": "^4.2.0",
     "lodash.template": "^4.2.5",
-    "mapbox-gl-geocoder": "^2.0.0",
     "polyline": "^0.2.0",
     "redux": "^3.5.2",
     "redux-thunk": "^2.1.0",

From 808bd2c9a1003cb1cf6ca02bdd00d7376b5d6ca7 Mon Sep 17 00:00:00 2001
From: mapsam <matthews.sam@gmail.com>
Date: Fri, 18 Nov 2016 12:30:39 -0800
Subject: [PATCH 14/17] copy icons

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 1bdb4f1..f470154 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
   "scripts": {
     "prepublish": "npm run build",
     "start": "NODE_ENV=development budo example/index.js:example/bundle.js --live",
-    "build": "NODE_ENV=production mkdir -p dist && browserify -s MapboxDirections src/index.js > dist/mapbox-gl-directions.js && cp src/mapbox-gl-directions.css dist/",
+    "build": "NODE_ENV=production mkdir -p dist && browserify -s MapboxDirections src/index.js > dist/mapbox-gl-directions.js && cp src/mapbox-gl-directions.css dist/ && cp -r src/icons/ dist/",
     "test": "NODE_ENV=test npm run lint && browserify test/index.js | smokestack -b firefox | tap-status",
     "docs": "documentation build --format=md > API.md",
     "lint": "eslint --no-eslintrc -c .eslintrc src"

From 36f846b72e350bce527dff57aed7c1956cf4f809 Mon Sep 17 00:00:00 2001
From: mapsam <matthews.sam@gmail.com>
Date: Fri, 18 Nov 2016 14:51:41 -0800
Subject: [PATCH 15/17] updated css to fit screen

---
 src/mapbox-gl-directions.css | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/mapbox-gl-directions.css b/src/mapbox-gl-directions.css
index 8c7e212..b2d1b27 100644
--- a/src/mapbox-gl-directions.css
+++ b/src/mapbox-gl-directions.css
@@ -298,11 +298,10 @@
   position: relative;
   z-index:1;
   width:100%;
-  min-height:50px;
   background-color:rgba(0,0,0,0.75);
   color:#fff;
-  padding:10px 20px;
-  font-size:20px;
+  padding:5px 10px;
+  font-size:15px;
   line-height:28px;
   }
   .mapbox-directions-route-summary + .mapbox-directions-instructions {
@@ -324,11 +323,12 @@
       overflow: scroll;
     }
     .mapbox-directions-instructions-wrapper {
-      max-height: 500px;
+      max-height: 50vh;
       }
   .mapbox-directions-routes {
-    margin:0 0 10px;
+    margin-left: 5px;
     font-size:12px;
+    float: right;
     }
   .mapbox-directions-routes input[type=radio] { display: none;}
   .mapbox-directions-routes input[type=radio]:not(:checked) + .button:before { width: 0;}
@@ -346,8 +346,8 @@
 /* Instructions */
 .mapbox-directions-instructions .directions-icon {
   position:absolute;
-  left:10px;
-  top:25px;
+  left:12px;
+  top:20px;
   margin:auto;
   }
   .mapbox-directions-instructions .directions-icon:before {
@@ -365,7 +365,7 @@
   padding:5px 10px;
   font-size:12px;
   left:30px;
-  bottom:-15px;
+  bottom:-10px;
   }
 .mapbox-directions-steps {
   position:relative;
@@ -378,8 +378,10 @@
     color:rgba(255,255,255,.75);
     cursor:pointer;
     padding:20px 20px 20px 40px;
-    font-size:20px;
-    line-height:25px;
+    font-size:14px;
+    line-height:18px;
+    font-weight: 300;
+    letter-spacing:0.1em;
     }
     .mapbox-directions-step * { pointer-events:none; }
     .mapbox-directions-step:hover {
@@ -388,8 +390,8 @@
     .mapbox-directions-step:after {
       content:'';
       position:absolute;
-      top:50px;
-      bottom:-20px;
+      top:45px;
+      bottom:-10px;
       border-left:2px dotted rgba(255,255,255,.2);
       left:20px;
       }

From 823195675c1f7753af9af0da5d00c93727b0fe84 Mon Sep 17 00:00:00 2001
From: mapsam <matthews.sam@gmail.com>
Date: Fri, 18 Nov 2016 15:04:03 -0800
Subject: [PATCH 16/17] update relative positioning and button

---
 src/mapbox-gl-directions.css | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/mapbox-gl-directions.css b/src/mapbox-gl-directions.css
index b2d1b27..35e64d1 100644
--- a/src/mapbox-gl-directions.css
+++ b/src/mapbox-gl-directions.css
@@ -141,6 +141,14 @@
     }
 
 /* Basics */
+.mapboxgl-ctrl-directions {
+  width: 33.33333%;
+  min-width: 250px;
+  max-width: 300px;
+}
+.mapbox-directions-component {
+  position: relative;
+}
 .mapbox-directions-component,
 .mapbox-directions-component *,
 .mapbox-directions-component *:after,
@@ -160,9 +168,7 @@
 
 /* Layout containers */
 .directions-control {
-  width:33.3333%;
-  max-width:300px;
-  min-width:250px;
+  width:100%;
   z-index:1;
   }
   .directions-control.directions-control-directions {
@@ -178,7 +184,6 @@
   .directions-control.directions-control-inputs {
     top:10px;
     left:10px;
-    max-width:360px;
     }
 
 /* Inputs */
@@ -210,8 +215,8 @@
   position:absolute;
   z-index:10;
   background:white;
-  left:50px;
-  top:40px;
+  left:40px;
+  top:30px;
   cursor:pointer;
   }
 

From 46e5e96690393d537acd80608ffa1bf76a5abbd1 Mon Sep 17 00:00:00 2001
From: mapsam <matthews.sam@gmail.com>
Date: Fri, 18 Nov 2016 15:07:06 -0800
Subject: [PATCH 17/17] add peer dep for mapbox-gl

---
 package.json | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/package.json b/package.json
index f470154..9ced6de 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,9 @@
       "brfs"
     ]
   },
+  "peerDependencies": {
+    "mapbox-gl": "^0.27.0 || ^0.28.0"
+  },
   "scripts": {
     "prepublish": "npm run build",
     "start": "NODE_ENV=development budo example/index.js:example/bundle.js --live",