Mapbox directions: how to extract directions data from result

Question

I am using Mapbox Directions in a javascript app to successfully return geometry and routing data (between two lat/long pairs) to the browser. I am trying to display -- eventually -- the route polyline connecting them on a map, but I can not access the directions data from the result object even though the data is there.

Here is the request code:

L.mapbox.accessToken ='pk.eyJ1Ij...9Uk_Z8JqMOQ';
L.mapbox.id = 'tom...ibb';
var startLatLng = L.latLng(38.935899, -77.022353);
var endLatLng = L.latLng(38.90, -77.10);
var directions = L.mapbox.directions();
directions.setOrigin(startLatLng);
directions.setDestination(endLatLng);
var route = directions.query();
console.dir(route);

Note the console.dir line. This is what I see in the console for route:

_initHooksCalled:true
_query:null
_requests:Array[0]
_waypoints:Array[0]
destination:Object
directions:Object
options:Object
origin:Object

This is what I see in the console for the route.destination, route.options and route.origin objects:

    console.log(route.destination);
      => Object {type: "Feature", geometry: Object, properties:...
    console.log(route.origin);
      => Object {type: "Feature", geometry: Object, properties:...
    console.log(route.options);
      => Object {units: "imperial"}

But when I try to see route.directions, it is undefined.

    console.log(route.directions);
      => undefined

When "opening" the whole route object in the console (via console.dir) I see the directions data I am looking for:

    directions:Object
        destination:Object
        origin:Object
        routes:Array[2]
            0:Object
                distance:10460
                duration:862
                geometry:Object
                steps:Array[26]
                ...

Why would this be "undefined" when accessing it with route.directions, especially when I can see contents of the other "sub-objects" (e.g. route.options) using the same dot syntax?

Finally, when I "stringify" the route object var routeJson = JSON.stringify(route); I see this:

    {"options":{
        "units":"imperial"
    },
    "_waypoints":[],
    "_initHooksCalled":true,
    "origin":{
        "type":"Feature",
        "geometry":{
            "type":"Point",
            "coordinates":[-77.022353,38.935899]
        },
        "properties":{"query":[-77.022353,38.935899]}
    },
    "destination":{
        "type":"Feature",
        "geometry":{
            "type":"Point",
            "coordinates":[-77.1,38.9]},
        "properties":{"query":[-77.1,38.9]}
    },
    "_requests":[],
    "_query":{}}

Again, NO directions content! Any thoughts would be greatly appreciated!

Perhaps if you pass the instructions and/or geometry parameters, those bits of information will be returned? The documentation is a little bit vague... — Steve Bennett

Steve Bennett Steve Bennett · Accepted Answer · 2016-03-26T14:00:12

Where are you finding this API with a query function? According to the Directions API documentation on Github, you should be calling it like this:

var mapboxClient = new MapboxClient('ACCESSTOKEN');
mapboxClient.getDirections(
  [
    { latitude: 33.6, longitude: -95.4431 },
    { latitude: 33.2, longitude: -95.4431 } ],
  function(err, res) {
  // res is a document with directions
});

// With options
mapboxClient.getDirections([
  { latitude: 33.6875431, longitude: -95.4431142 },
  { latitude: 33.6875431, longitude: -95.4831142 }
], {
  profile: 'mapbox.walking',
  instructions: 'html',
  alternatives: false,
  geometry: 'polyline'
}, function(err, results) {
  console.log(results.origin);
});

I suspect that passing the geometry: 'polyline is what you need to make sure you get geometry information included in the response.

Mapbox directions: how to extract directions data from result

1 Answers