Skip to content

Commit

Permalink
Merge pull request #34 from mapbox/handle-errors
Browse files Browse the repository at this point in the history
Handle errors
  • Loading branch information
tristen committed Dec 6, 2015
2 parents b618cd7 + 1ae093f commit 06bbd91
Show file tree
Hide file tree
Showing 10 changed files with 87 additions and 10 deletions.
9 changes: 7 additions & 2 deletions dist/mapbox-gl-directions.css
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
}
.directions-control.directions-control-directions {
background:rgba(0,0,0,0.75);
color:#fff;
top:0;
right:0;
bottom:0;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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); } }
Expand Down
7 changes: 3 additions & 4 deletions example/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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');
});
});
17 changes: 16 additions & 1 deletion src/actions/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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));
});
};
Expand All @@ -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));

Expand Down Expand Up @@ -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));
};
}

Expand All @@ -175,6 +189,7 @@ export function clearDestination() {
type: types.DESTINATION_CLEAR
});
dispatch(eventEmit('directions.clear', { type: 'destination' }));
dispatch(setError(null));
};
}

Expand Down
1 change: 1 addition & 0 deletions src/constants/action_types.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
12 changes: 9 additions & 3 deletions src/controls/instructions.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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],
Expand Down
1 change: 1 addition & 0 deletions src/directions.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
*/
Expand Down
5 changes: 5 additions & 0 deletions src/reducers/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
5 changes: 5 additions & 0 deletions src/templates/error.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<div class='directions-control directions-control-directions'>
<div class='mapbox-directions-error'>
<%= error %>
</div>
</div>
1 change: 1 addition & 0 deletions test/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down
39 changes: 39 additions & 0 deletions test/test.instructions.js
Original file line number Diff line number Diff line change
@@ -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();
});

0 comments on commit 06bbd91

Please sign in to comment.