Map Direction using Mapbox




How can I implement the nativescript map direction with mapbox.

I follow the demo here in
but it doesn’t work.

Please help.

Thank you and God bless,


Check out this demo:


Hi Eddy,

Thank you very much for your response.
Can I integrate the map direction using only the mapbox without opening the google map app?



I’m not 100% sure I get your question. What’s the exact use case? Anyway, you can use the directions plugin with or without showing a map first.


Because I want to build an app like uber which has a map direction. I wonder how to apply that in mapbox.

Here’s the sample photo:

Thank you,


You can’t use the direction plugin for that, you have to use the Google’s rest apis to fetch the routes between destination and draw lines yourself with the points returned. I’m not sure if MapBox has it’s own apis for same.


Indeed. That’s not what the directions plugin is for. This is simply a polyline with 2 markers.


Hi @Eddy,

I use polyline for the direction.
But it shows straight line.

How can I get the exact map direction?

Here is what i get:

I want an output like this:

Can you give me an example on how to do this using mapbox.

Here’s the response I get from Mapbox API but the problem is I do not know where to put this response in my mapbox code:
Here’s the link for the response :

I really need your help guys.

Thank very much,


@Yugo in that doc there’s an array of coordinates (conveniently named coordinates) . Can you try adding those as points here?


Thank you very much @Eddy.
You saved my day.

Is it possible to animate/move the marker from Point A to Point B?

Thank you,


Not through the plugin. Perhaps not even directly with the Mapbox SDK.


Hi @Eddy,
Do you have any suggestion for this?



Hello `Eddy, using the guide here, … I am getting this error => Cannot read property ‘navigate’ of undefined.


@klever34 You’ll need to install the nativescript-directions plugin for that to work.


Done that already, I even did this =>
var Directions = require(“nativescript-directions”).Directions;
var directions = new Directions();
in my showDirectionsTo()


Remove the platforms/android folder and try again.

Btw if you’re not using Angular, then this may be an easier example (although the plugin code is the same):


I am currently writing Nativescript-Vue using the vue-cli-template


This is almost the same with the one I am using it’s just the navigate property it complains about…=> this.directions.navigate


Still doesn’t work yet


Got it working now… Gracias