Hey everyone, welcome back to Johnny B. with devslopes.com and I got some more Mapbox fun for you in this lesson. We are going to work on our getting the route showing as well as the navigation turn-by-turn interface in. So this is where we left off in the last lesson. We are able to tap on our map and set markers and enable our Start Navigating button so let’s go ahead and jump right in and make it so that we can add that route overlay and then make it so that we can click on Start Navigating and show that awesome turn-by-turn navigation UI. Now, that may seem like a lot but with Mapbox it makes it so easy. So let’s get into it! First thing we are going to need to do is add a couple of dependencies into our project We are need we are going to need the navigation and the navigation UI dependencies. So I am just going to paste those in right here. And as you can see we are using the navigation and the navigation UI dependencies versions 0.13 currently, if you’re watching this in the future and there are newer versions go ahead and use those alright, and we are also going to have to bump down the appcompat to 27.0.2. Okay. I’m going to sync that, there we go. And now we have all of the classes that we are going to need so I’m going to jump back into Java folder into our main_activity file and we are going to need a new variable. So let’s go ahead and add that. We are going to need a navigation map route so that we can actually see our route and that is going to be of type NavigationMapRoute, okay? And this is the class that provides the runtime styling for the selected route that we see drawn on the map and we are going to call it navigationMapRoute. We’re also going to need a tag for some logs later on. So when I want to say private static final String TAG is equal to and we’ll just call it “MainActivity.” All right, so let’s go ahead and create that function for getting our route, okay? So we’re gonna call it right after or right when we click on a map so we are going to put that below onMapClick() here. So I’m gonna say private void And we’re going to call it getRoute(). So to generate the route we need to know where we’re starting and where we are finishing. So we are going to put in Point and origin and then Point and destination. Okay, and so those are the two parameters that we need for this function and then before I forget we are going to call the getRoute() function here when we click on the map so I’ll say getRoute() and then we will pass in the originPosition and the destinationPosition. All right, so here in the getRoute() function that we just created we are going to get our route and we do that using the NavigationRouteBuilder, okay, so I’m going to say Navigation Route.builder and then it needs a couple of parameters. I’m going to say .accessToken(), it needs to know what our token is. So I’m going to say Mapbox .getAccessToken() Then it’s going to need the origin. So I’m going to pass in the origin as well as the destination and then we are going to build it and then finally we are going to actually get the route. Okay? Mapbox uses Retrofit under the hood for their network calls. So I’m going to say new Callback() we’re going to need a callback here and make sure that you have the Retrofit 2 – I’m going to say Callback() and we’re going to be getting back a DirectionsResponse here in the onResponse() and this DirectionsResponse object has three parts to it: there is a code which is a string indicating the state of the response, there is a Waypoints array if your route has multiple stops along the way – waypoints and then what we are going to be working with most importantly is the Routes array which is an array of Route objects ordered by descending recommendation or rank And there can be at most two routes, okay? So here in the onResponse() call we’re going to be working with this response and the first thing that we want to do is make sure that we that we got a response back and that is not null Okay, so I’m going to say if (response .body==null) then we’re just going to jump right up out of here; we’re going to return and we’ll also go ahead and Log a message so I’m gonna say log.E and We will put TAG as our tag and then we’ll go ahead and give the message something like “No routes found. Check right user and access token.” The other thing that we want to do is check to make sure that we have at least one route so we’re gonna say else if (response.body.routes.size==0) so if there are no routes then we are also going to log and we’ll say log.E and TAG and then we’ll say something like “No routes found.” Now you may want to make a little bit more of a user-facing error handling right here; throw up an alert dialogue or a toast just so that they know that something is going wrong but for our purposes right now, this is fine. And then we will also return. Alright, so now that we know that we have at least one route, let’s go ahead and grab that from the body so I’m going to say Directions Route is – we’re going to name it currentRoute is equal to response .body.routes and we will get that first one because we want the one that is the highest-ranked for recommendation. All right, so now that we have our current route let’s go ahead and initialize our NavigationMapRoute that we made the variable for at the beginning of the lesson, this guy right here. Okay, so I’m going to say navigationMapRoute is equal to new Navigation MapRoute and we need to pass into it null for the navigation then we’re going to pass in the mapView and the map and then we can add our route to the navigationMapRoute so we can see navigationMapRoute.addRoute() and the route that we want to add is currentRoute. Now, this would work, but we’d get a crash because we could be – after we tap once – we could be adding multiple NavigationMapRoutes so what we need to do is have an if check so we’re going to say if the (navigationMapRoute !=null) then we are going to say navigationMapRoute. removeRoute() else then I’m going to take this line, cut it and paste it there. And just do a little bit of cleanup here, I think that looks good All right. So let’s handle the on failure. So if we are unsuccessful, then we’re just going to log it so I’m gonna say log.E, and I’m gonna say TAG and then our message will be “Error t. getMessage(). There we go! Alright, so let’s go ahead and test this. If all goes well we should be able to tap on our map, show a marker and then view the route overlay. All right, here we go… gonna tap and let’s see if we get a route overlay. Oh, there we go! Very nice! Let’s see, if I tap somewhere else, the previous one should be removed and a new one created. There we go All right. Wonderful So now we got the route overlay showing but if we click on Start Navigating, nothing’s happening still so let’s go ahead and fix that up here at the top in our onClickListener() where we launch the navigation UI this is amazingly simple. All we have to do is create some navigation launcher options and then launch the navigation UI. So we’re gonna say Navigation LauncherOptions and we’ll call those options and that is NavigationLauncherOptions.builder and then we need to give it the origin so I’m going to say originPosition, needs the destination, so destination Position and then we can use something called shouldSimulateRoute() and we can pass in true or false and what that will do is once we start the navigation UI it will actually simulate driving the route for us. So since I’m you know just sitting here in front of the computer and we would like to see some movement so I am going to simulate that route and later on when you can change that to false. Okay? So then I’m gonna say build. Alright and then final line all I got to do is say NavigationLauncher. startNavigation(), pass in our activity, which is MainActivity.this and then just pass in those options that we created and we should be good to go now. So I’m gonna run that again All right, so we’re going to tap, get us a destination and click on Start Navigating. Alright and here we go check it out so we got our map going I’m going to hold my device up to the microphone. See if you can hear the instructions How cool is that? You have the option to mute the instructions, the directions, you can also pull up let’s see here. Right below that sound icon. I’m going to tap here and you have options for, you know, sending information to the Mapbox system, you can let it know that the road closed or that this was a bad route and that will just serve to make Mapbox even better. Alright and check out everything that we get for practically free, you know, we wrote like six lines of code here I mean, really two – because this is all just a a chained line of code here and and you know, look at this you can do some really cool stuff here if you tap up here at the top you can see listed out the directions and you know, just some really awesome stuff that you get practically for free when you are using Mapbox. Alright, so this is this you know, this is the finished app. I hope you guys learned a lot and that you will definitely consider using Mapbox in all of your future apps that require location. All right, so this has been Johnny B. with devslopes. Hope you learned a lot and I will see you around!