mapbox / mapbox-gl-directions

Directions plugin for mapbox-gl-js using Mapbox Directions API.

Mapbox GL Directions

A full featured directions plugin for Mapbox GL JS using the Mapbox Directions API. Quickly add UI to display driving, cycling, or walking directions on the map. The Mapbox Directions API is powered by the OSRM routing engine and open data from the OpenStreetMap project.

For directions functionality in native mobile and desktop applications, see Mapbox Android Services, MapboxDirections.swift, and MapboxNavigation.swift.

Usage

var mapboxgl = require('mapbox-gl');
var MapboxDirections = require('@mapbox/mapbox-gl-directions');

var directions = new MapboxDirections({
  accessToken: 'YOUR-MAPBOX-ACCESS-TOKEN',
  unit: 'metric',
  profile: 'mapbox/cycling'
});

var map = new mapboxgl.Map({
  container: 'map'
});

map.addControl(directions, 'top-left');

Live example: https://www.mapbox.com/mapbox-gl-js/example/mapbox-gl-directions/

Deeper dive

See API.md for complete reference.

Contributing

See CONTRIBUTING.md.

mapbox-gl-directions's Issues

Better request management on endpoint dragging

@tristen Currently the endpoint dragging is very laggy, because it sends too many requests. We can drastically improve the experience by doing two things:

1. Throttle or debounce the requests. They shouldn't fire more often than 200ms, maybe more.
2. Cancel outdated requests — when you move the mouse, only the latest position is relevant but requests for all previous points during the move still hang until completed. See GL JS for an example of request canceling (we do this for tiles).

Drop down appears when it's been used after each action

Prevent this.

Do not use data attributes

https://github.com/mapbox/gl-directions/blob/85e3702790e641c43fac3b70545ffd50afe4f7a8/src/components/instructions.js#L8

This is React, it has data-binding. Use that.

Pass custom styles in the options argument.

via https://twitter.com/eliglazier/status/677253464444035073

Dragging a new waypoint from an alternate route updates routeIndex to 0.

My b. When a new directions query is made I reset the back routeIndex to 0. I probably shouldn't do that.

Warn if mapboxjs is not a global variable on initialization

And drop the peerDependency line. https://github.com/mapbox/mapbox-gl-directions/blob/master/package.json#L52-L54 this is causing more issues than solving any.

Autocomplete needs backspace to autocomplete

I need to hit the backspace to get suggestions in the drop down box.

Documentation in the README

• Description
  • Overview
  • Version number
  • Testing badges
  • Link to live site (if applicable)
• Usage
  • How to use it with code samples
  • Links to documentation (if applicable)
• Running locally
  • How to run it locally
  • Include dependencies
• Testing
  • How to test it locally

Support touch dragging

• Use built-in touch events as of v0.16.0
• Also: Drop the use of raw DOM events for dragging so we can delete this line.

Drop icon fonts

Serve these as SVGs instead.

Point main in package.json to dist/mapbox-gl-directions.js

Babel shouldn't be required in order for clients to use this via Browserify. cc @tadjohnston

Drop `directions` prefix in event names

Align with what was done in mapbox-gl-geocoder mapbox/mapbox-gl-geocoder#17

v5: Integrate new-style turn-by-turn instructions

The new turn instructions will enable better guidance. They are not in the API yet, but flagging already for milestone.

Why does this require css from a dist folder

dist is for end-products.

Better feature design

• Pseudo class styling. Unlocked by mapbox/mapbox-gl-js#200?
• Features should float more on top of the map
• Better/Clearer marker origin/destination styling
• Labels on Alternate and Selected route indicating Time/Distance based on mode of commute.
• Tooltips on waypoints to instruct dragging

Use wrap for selected coordinates outside the -180, 180 range

https://www.mapbox.com/mapbox-gl-js/api/#LngLat.wrap

Tests

There are no tests for this library. Please add tests before adding code.

URL hash

Reading / Writing

Zoom to bounds if exist on origin or destination geocode

Currently this is just zooms to a coordinate. Zooming to bounds is great for results like cities or towns.

Plugin not taking the clicked position

When clicked on the map the marker is not appearing at the clicked place but displaying in another place.

To recreate the same:

• Zoom in to India.
• Click on one of the major roads near Pune.

What I expect :- Marker/circle to appear on the clicked place.

What I see :- Marker appearing away from the clicked place and geocoding to Maharashtra.

Allow interaction to be toggled on or off

When you click on the map with mapbox-gl-directions initialized it will always listen for click events and re-plot origin/destination points. We should expose a disable method to toggle this from happening.

Toggle routes from sidebar instructions

In addition to clicking the alternate path from the map.

Better instruction item format/details

More details could be included here. i.e

+------------------------------------------+
|                                          |
| +---+  Distance                          |
| |   |  STREET NAME                 Time  |
| +---+  Instruction                       |
|                                          |
+------------------------------------------+

Handle errors in the UI

Something like this should be communicated to the user:

Also pass as an event to directions.

use arrow functions if you need binding

https://github.com/mapbox/gl-directions/blob/master/src/components/instructions.js#L29

That said, I am doubtful that this should be in ES6 in the first place.

stop using assets from S3

This file is no longer going to be getting updates. This should be switched to use a tagged release from api.mapbox.com or local copy with the desired version.

Build scripts failing on dev-pages branch

These lines appear to not be building out as scripts on staging.

Don't reverse geocode coordinates before making a Directions request.

There's something janky going on when clicking to set origin / destination. I assume the code reverse geocodes a location and then updates the location returned? This leads to very weird behavior in areas where our geocoding locations are sparse:

Make this work on mobile

The interface should accommodate smaller displays

Should this use React

CDN link

Use mapbox-sdk-js for API access

broken with mapbox-gl-js 0.16 due to featuresAt breaking change

src/directions.js still uses map.featuresAt which is broken due to mapbox/mapbox-gl-js#2224 with mapbox-gl-js 0.16.

/cc @lyzidiamond This is also affecting the example at https://www.mapbox.com/mapbox-gl-js/example/mapbox-gl-directions/

Upgrade babel packages

Configuration and versions are outdated. Babel is pretty bleeding edge and things have changed.

cc @tadjohnston

Export raw class & remove factory method

I am documenting this in code as uppercase. By exporting as a factory I'm preventing any instanceOf check. This should just export the raw class.

This is not browserify compatible

Drop shortest distance calc for waypoints and manage their position in the query by route segments

It's otherwise a performance kill calculating the shortest distance between them

Bump suggestions package for fuzzy filtering

https://github.com/tristen/suggestions/blob/gh-pages/CHANGELOG.md#v110

Return an object when dispatching input actions

I broke this when I refactored. Needs a fix + tests

Infer container if no element is passed

Also, In addition to that change, a passed container option should look like this:

Current:

new mapboxgl.Directions(document.getElementById('map'));

Proposed:

new mapboxgl.Directions({
  container: 'map'
});

This follows the same convention as mapbox-gl-js

Mention the `load` event in set methods

To setOrigin or destination the load event needs to have completed. This should be mentioned in the docs to avoid confusion.

Do not use dangerouslySetInnerHTML

https://github.com/mapbox/gl-directions/blob/85e3702790e641c43fac3b70545ffd50afe4f7a8/src/components/instructions.js#L43

This is a security vulnerability.

Make overview: simplified default

Currently it's overview: full, but simplified would be better.

This is pending upstream bug fix in Project-OSRM/osrm-backend#1935 (comment)

If one input is set and other input is returned on empty input loading spins.

Prevent this.

v5: use legs

instead of the current hacks around waypoints we should use the routes.legs that Directions V5 supports

Directions treats way name changes as intersections

This is very likely a ticket for the directions API or data team, but if those are internal this may be the best bet; please direct me if this should be posted elsewhere

In certain sections of US Interstate highway navigation, the directions plugin is offering guidance at every exit and subtle change of road name. I'm not familiar with how the underlying data came to be structured this way, but the navigation algorithm should be able to recognize consistency between segments of the same limited-access highway.

Add a loading state

Clicking on a point on the map coordinates a request to the geocoder before it's drawn. On slower networks this takes a beat so we should communicate something is happening.

Passed proximity as option should follow [lng, lat] format

Add `off` method for events

Edited punting on adding EventEmitter as events are intimately tied to redux actions.

Pass options

On initialization and action fired.

• accessToken: TOKEN
• unit: metric/imperial for distance calculation
• proximity: [lng,lat] to bias results