query doesn't work

[lisatassonesimpro]

No matter what I seem to try, the query api method does not work. It keeps throwing an exception that it's not a function and indeed I can't see it in the bundle. I can however see a call to the mapbox api returning json data.

I can get the basic example working where it shows the inputs and routes from input. I'm now trying to supply it data to do the same thing but without the inputs. There is no documentation on it and the few examples I have tried have used something along the lines: let directions = new MapboxDirections({ accessToken: , unit: 'metric', profile: 'driving', geocoder: MapboxGeocoder, controls: {inputs: false} }); directions.setOrigin([this.lng, this.lat]); directions.setDestination([153.075892, -27.561993]); data = directions.query();

---

map.addSource({"someid", data: {data});

[tmcw]

Hi Lisa,

Sorry about this confusion, I've identified a few intertwined issues that are causing it:

• The query() method actually belongs to an individual geocoder input inside of mapbox-gl-directions, not the directions control. It shouldn't be documented, because it's not exposed.
• Your code should work without needing to call .query() at all: once you set an origin and a destination, the route should be computed. In my testing, that happens successfully, but I'm not consistently seeing a route line drawn. Are you seeing any route information?

I'm going to fix up the documentation now as part of this ticket.

• Tom

[lisatassonesimpro]

Thanks for the reply @tmcw. I had first left out the query function all together as it made sense that once you set the origin and destination that should be it. I don't however see any route information on the map or as directions. Is there a particular way I need to add it to the map?

[keithstric]

I'm totally new to this, but I was having the same issue of routes not being drawn on the map. I made the map on load event async then await creating the directions, and await setting origin and destination. This put the route(s) on the map for me. Hope that helps.

this.map.on('load', async () => {
    // Add routes
    const directions = this._mapbox.getDirections();
    await directions.setOrigin(this.currentLocation);
    await directions.setDestination(this.destination);
    this.map.addControl(directions);
});