multiple point direction draw in GL mapbox

Question

I have draw direction to more then 2 park in gl mapbox. I have try this code but not work perfectly.

 mapboxgl.accessToken = 'pk.eyJ1IjoiYWNoYWxwcmFqYXBhdGkiLCJhIjoiY2lyNGkwZGsxMDFpenUybHd5bjRtMjVjeiJ9.2teTa5MmVqOW-MDpryv56w';
            var map = new mapboxgl.Map({
                container: 'map',
                style: 'mapbox://styles/achalprajapati/cis1byfch0008hgnitiwbym9c',
                center: [-122.222461, 37.172263],
                zoom: 8
            });

            var directions = new mapboxgl.Directions({
                unit: 'metric', // Use the metric system to display distances.
                profile: 'walking', // Set the initial profile to walking.
                container: 'directions', // Specify an element thats not the map container.
               // proximity: [-122.222453, 37.172271] // Give search results closer to these coordinates higher priority.
            });
            debugger;
            //map.addControl(new mapboxgl.Directions());
            //map.addControl(directions);



            map.on('load', function () {

                directions.setOrigin([-122.222461, 37.172263]);
                directions.addWaypoint(0, [-122.222461, 37.172263]);
                directions.addWaypoint(1, [-122.483318, 37.724502]);
                directions.setDestination([-122.483318, 37.724502]);

            });

            directions.on('route', function (e) {
                console.log(e.route); // Logs the current route shown in the interface.
            });

mollymerp mollymerp · Accepted Answer · 2016-08-24T20:04:52

there was a breaking change in a recent update of mapbox-gl-js that caused the mapbox-gl-directions plugin to error.

Here is a working jsfiddle of your code with the new versions (v2.2.0 of mapbox-gl-directions plugin and v0.22.1 of mapbox-gl-js)

mapboxgl.accessToken = 'pk.eyJ1IjoiYWNoYWxwcmFqYXBhdGkiLCJhIjoiY2lyNGkwZGsxMDFpenUybHd5bjRtMjVjeiJ9.2teTa5MmVqOW-MDpryv56w';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/achalprajapati/cis1byfch0008hgnitiwbym9c',
    center: [-122.222461, 37.172263],
    zoom: 8
});

var directions = new mapboxgl.Directions({
    unit: 'metric', // Use the metric system to display distances.
    profile: 'walking', // Set the initial profile to walking.
    container: 'directions', // Specify an element thats not the map container.
});

map.addControl(directions)

map.on('load', function () {
    directions.setOrigin([-122.222461, 37.172263]);
    directions.addWaypoint(0, [-122.222461, 37.172263]);
    directions.addWaypoint(1, [-122.483318, 37.724502]);
    directions.setDestination([-122.483318, 37.724502]);
});

directions.on('route', function (e) {
    console.log(e.route); // Logs the current route shown in the interface.
});

multiple point direction draw in GL mapbox

1 Answers