Handle errors

dist/mapbox-gl-directions.css

@@ -30,6 +30,7 @@
   }
   .directions-control.directions-control-directions {
     background:rgba(0,0,0,0.75);
+    color:#fff;
     top:0;
     right:0;
     bottom:0;
@@ -222,6 +223,11 @@
     vertical-align:top;
     }
 
+.mapbox-directions-error {
+  padding:20px;
+  font-size:20px;
+  line-height:25px;
+  }
 .mapbox-directions-steps {
   position:relative;
   list-style:none;
@@ -321,8 +327,7 @@
 .mapbox-directions-profile { margin:5px 10px; }
 
 /* Instructions container */
-.directions-control.directions-control-directions { top:60%; }
-
+.directions-control.directions-control-directions { top:auto; max-height:40%; }
 }
 
 @-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } }

example/index.js

@@ -12,8 +12,7 @@ var map = new mapboxgl.Map({
 var directions = mapboxgl.Directions({
   unit: 'metric',
   profile: 'walking',
-  container: 'directions',
-  proximity: [-79.45, 43.65]
+  container: 'directions'
 });
 
 var button = document.createElement('button');
@@ -25,7 +24,7 @@ map.addControl(directions);
 
 map.on('load', () => {
   button.addEventListener('click', function() {
-    directions.setOrigin('Toronto');
-    directions.setDestination([-78, 42]);
+    directions.setOrigin('Montreal Quebec');
+    directions.setDestination('Toledo Spain');
   });
 });

src/actions/index.js

@@ -83,6 +83,8 @@ function geocode(query, callback) {
 
     return mapbox.geocodeForward(query.trim(), options, (err, res) => {
       if (err) throw err;
+      if (res.error) return dispatch(setError(res.error));
+      dispatch(setError(null));
       return dispatch(callback(res.features));
     });
   };
@@ -96,7 +98,8 @@ function fetchDirections(query, profile) {
       geometry: 'polyline'
     }, (err, res) => {
       if (err) throw err;
-      if (res.error) throw res.error;
+      if (res.error) return dispatch(setError(res.error));
+      dispatch(setError(null));
       if (!res.routes[routeIndex]) dispatch(setRouteIndex(0));
       dispatch(setDirections(res.routes));
 
@@ -160,12 +163,23 @@ function setLoading(input, loading) {
   };
 }
 
+function setError(error) {
+  return dispatch => {
+    dispatch({
+      type: 'ERROR',
+      error
+    });
+    if (error) dispatch(eventEmit('directions.error', { error: error }));
+  };
+}
+
 export function clearOrigin() {
   return dispatch => {
     dispatch({
       type: types.ORIGIN_CLEAR
     });
     dispatch(eventEmit('directions.clear', { type: 'origin' }));
+    dispatch(setError(null));
   };
 }
 
@@ -175,6 +189,7 @@ export function clearDestination() {
       type: types.DESTINATION_CLEAR
     });
     dispatch(eventEmit('directions.clear', { type: 'destination' }));
+    dispatch(setError(null));
   };
 }
 

src/constants/action_types.js

@@ -5,6 +5,7 @@ export const DESTINATION_LOADING = 'DESTINATION_LOADING';
 export const DIRECTIONS = 'DIRECTIONS';
 export const DIRECTIONS_PROFILE = 'DIRECTIONS_PROFILE';
 export const EVENTS = 'EVENTS';
+export const ERROR = 'ERROR';
 export const HOVER_MARKER = 'HOVER_MARKER';
 export const ORIGIN = 'ORIGIN';
 export const ORIGIN_CLEAR = 'ORIGIN_CLEAR';

src/controls/instructions.js

@@ -3,7 +3,8 @@ import template from 'lodash.template';
 import isEqual from 'lodash.isequal';
 
 let fs = require('fs'); // substack/brfs#39
-let tmpl = template(fs.readFileSync(__dirname + '/../templates/instructions.html', 'utf8'));
+let instructionsTemplate = template(fs.readFileSync(__dirname + '/../templates/instructions.html', 'utf8'));
+let errorTemplate = template(fs.readFileSync(__dirname + '/../templates/error.html', 'utf8'));
 
 /**
  * Summary/Instructions controller
@@ -27,13 +28,18 @@ export default class Instructions {
   render() {
     this.store.subscribe(() => {
       const { hoverMarker } = this.actions;
-      const { routeIndex, unit, directions } = this.store.getState();
+      const { routeIndex, unit, directions, error } = this.store.getState();
       const shouldRender = !isEqual(directions[routeIndex], this.directions);
 
+      if (error) {
+        this.container.innerHTML = errorTemplate({ error });
+        return;
+      }
+
       if (directions.length && shouldRender) {
         const direction = this.directions = directions[routeIndex];
 
-        this.container.innerHTML = tmpl({
+        this.container.innerHTML = instructionsTemplate({
           routeIndex,
           steps: direction.steps,
           format: format[unit],

src/directions.js

@@ -401,6 +401,7 @@ export default class Directions extends mapboxgl.Control {
    * - __directions.origin__ `{ feature } Fired when origin is set`
    * - __directions.destination__ `{ feature } Fired when destination is set`
    * - __directions.route__ `{ route } Fired when a route is updated`
+   * - __directions.error__ `{ error } Error as string
    * @param {Function} fn function that's called when the event is emitted.
    * @returns {Directions} this;
    */

src/reducers/index.js

@@ -123,6 +123,11 @@ function data(state = initialState, action) {
       routeIndex: action.routeIndex
     });
 
+  case types.ERROR:
+    return Object.assign({}, state, {
+      error: action.error
+    });
+
   default:
     return state;
   }

src/templates/error.html

@@ -0,0 +1,5 @@
+<div class='directions-control directions-control-directions'>
+  <div class='mapbox-directions-error'>
+    <%= error %>
+  </div>
+</div>

test/index.js

@@ -9,6 +9,7 @@ mapboxgl.accessToken = process.env.MapboxAccessToken;
 // Tests
 require('./test.directions');
 require('./test.inputs');
+require('./test.instructions');
 
 // close the smokestack window once tests are complete
 test('shutdown', (t) => {

test/test.instructions.js

@@ -0,0 +1,39 @@
+'use strict';
+
+const once = require('lodash.once');
+const test = require('tape');
+
+test('Directions#instructionControl', tt => {
+  let container, map, directions;
+
+  function setup(opts) {
+    container = document.createElement('div');
+    map = new mapboxgl.Map({ container: container });
+    directions = mapboxgl.Directions(opts);
+    map.addControl(directions);
+  }
+
+  tt.test('displayed', t => {
+    setup();
+    t.plan(2);
+    directions.setOrigin([-79, 43]);
+    directions.setDestination([-77, 41]);
+    directions.on('directions.route', once((e) => {
+      t.ok(e.route, 'route is emitted');
+      t.ok(container.querySelector('.directions-control-directions').textContent, 'instructions are shown');
+    }));
+  });
+
+  tt.test('error', t => {
+    setup();
+    t.plan(1);
+    directions.setOrigin('Montreal Quebec');
+    directions.setDestination('Toledo Spain');
+    directions.on('directions.error', once((e) => {
+      t.ok(e.error, 'error is emitted');
+    }));
+  });
+
+  tt.end();
+});
+