React-Native and Mapbox | Tracing the Route using Mapbox's Directions API

welcome back everyone to today's video on the previous videos we saw how to implement the map box uh into our react native project we saw how to implement also the 3D maps or the 3D buildings and uh how to play with the pitch attribute how to create our own 3D maps using the mapbox studio and we we saw also how to make a customized pointer instead of the classic one that my box provides we used a uh an icon from react native Vector icons and when the user clicks on that icon model display model appears model is triggered and inside that model we displayed the reverse geocoding information which contain the city the country and much more so we saw a lot of stuff especially uh on yesterday's video so in today's video we'll be working on the directions API provided by mapbox so what's the usability of this API so it allows you actually to trace the route into your map and it really depends on the writing profiles there are multiple writing profiles for example driving traffic driving walking cycling cycling and each one of it displays a certain uh route for the moment we will be working uh working just with The Walking profile and in the next video we will be making the user choose which one of these four profiles that he wants to use for example he wants to use the car so he will be choosing driving cycling or he wants to walk and uh yeah but for the moment let us keep it simple and by the time it will be updating and improving our app so before you before we begin I want to to start a new project or you can just clone this project right here so it really contains everything that we'll be needing I didn't want to build and just code these because these are basic things and also it is not the purpose of the video because these tutorial series will be only focusing on mapbox and react native maybe in the future I'll be doing some front with react native but for the moment you can just clone the code clone the project and run it and yeah it's simple it contains the data list of stores it's very simple actually and uh two screens one is home and one is store location and I also installed some packages you need to install the react native Community slash geolocation the react navigate this so this package will be needing it to get the current user geolocation coordinates or data or whatever you want to call it and this one the react navigation native as as you know we needed to be able to manipulate our screens to navigate into our screens you need also to install all of these the react navigation stack the native gesture Handler react native reanimated Etc we already installed these yesterday these two the react native Vector icons and their react native map box forward slash Maps so yeah but as I said if you want you can simply clone the project and start working so yeah and in the app.tsx we just did the simple things so this will allow us to literally manipulate our screens and be able to navigate from screen to another so the initial routing will be home which is this component or this screen right here and that's all it's very simple and there is nothing special about it so let's let's start let's say that we have a list of stores like we have a store in cabinets store in Heidelberg store C and story okay and each store contains some data some simple data I just chose an image URL from Google the latitude and longitude the coordinates add a simple description so what will we be needing is these two these two are the most important things because you will we need it we need these two to trace our root into our map from the user's current location into these location okay so let's start so this is simple you have we have a list and whenever the user clicks on it it's just a blank a blank screen we have nothing here it's just a simple component that contains a text tag with hello world so let's start so the first thing we need to do is we need to do some stuff before we start dealing with the series stuff okay so the first thing I want you to do is to determine the road directions so for that as I said we need to declare our root directions here and this will be you state Let's uh okay we'll put any okay let's say any or null here and what else okay and here it's all let's not forget to import our view State Hook from react okay perfect the next thing is to determine the chords because we will be getting these chords from the user's current geolocation information that we'll be getting from that package we installed so for that I want you to do you state here you state snippet and here we can just type chords okay but here it needs to be good so for the use state we will choose right here okay let's clean this I will do a number because we will be having an array of numbers so we need to declare it like this okay and what else we can just let's say uh let's say we put like some random I will put my current uh latitude and longitude you can put yours it depends on you good perfect good the next thing is the root variable and we will be using this to get the informations from a screen to another for example if we have like let me explain this this screen contains some list and each one of them each one of these four components contain or it's typed with some infos so in order to get these infos we need to get it using the root okay and for that before you do this you need to do this step right here so you will tell react native okay I need to go to the store location which is this component but don't go alone I need you to go with these infos right here with this variable which contains our object which contains all the infos that we paste it here okay so it's really simple and as I said I won't be focusing a lot in these things because this is not the purpose of this video we'll be working on my box so yeah maybe in the future I'll be doing like uh correct native tutorial from scratch which which I will be like explaining the basic things and doing some front-end styling and stuff okay so good and let's not forget to import our model right here good so what's next the next thing is we need to get these stores information so here we have a variable just called store which contains the item and the item which contains all the store data okay so for that we need to type const store equals root Dot params simple easy okay now we will start dealing with the series stuff so the first thing I need to do is to get the user's current geolocation so how can we do it it's simple just follow me we'll be defining an async function and we will name it get permission location good and let's not forget the trying catch here perfect there's nothing special about it so we need to define the Geo variable which will get all these geolocation and let's not forget to import this package right here do not forget it or you'll be getting a lot of problems a lot of errors and you have a lot of options so not really it's obvious we need this option right here you get current position to get the users currently location and before I continue you can actually set the location here so if you have if you had like some errors or some issues with uh with the location you need to actually set the location manually okay so you just determine here the coordinates or you can select a point from here and then you click sell a set location right here that's all it's very simple and this is in case you you you encounter some issues with the emulator because it happened to me sometimes okay so let's back get current position location and then set chords here location dot chords dot longitude because inside the the location variable will tag the chords and inside the chords we will be having like longitude latitude and other infos so since we need the longitude and latitude and in order to access it we need to we need to pass from the chords so we will be having here location.corset longitude and location dot chords Dot latitude good what else do we need in case of Errors if we in case we had an error we can Define the error here console.log or you can do an alert it depends on your other one to display an alert here in my in my app and enable high accuracy so this variable this option right here allows you to get a uh it allows you uh to manipulate the accuracy of the geolocation data if you want if you activate this option right here it will get it multiple times and if you and sometimes and you need to do it to let's say avoid some issues sometimes your device or your emulator doesn't get the uh the geolocation infos instantly so if you enable this option right here it will be like as mentioned in its name it's high accuracy it will be high accuracy you can get a lot of infos if you check the uh document official docs from direct native uh from Iraq native from this Library and what else so yeah let's not forget the catch console.error let's say error again location this is in case we had an error and let's not forget the error variable okay so what else the next step we need to do is the use effect they use effect to whenever the user uh pops on this screen or opens the screen this effect will be triggered and then we'll be calling this get permission location inside the user effect so whenever the user uh gets inside this component it will get automatically the user's location and yeah let's type here and let's not forget to import the use effect hook we don't need this and we know we just need actually to call the get permission location function and that's all okay let's do some testing if I click here okay uh let's say I want to get console.log here and I want to get the store not the store actually uh the chords the chords okay and the chord is this variable right here and sit chord is here so normally it will display has the uh geolocation infos good here it is okay let me check another time I will just write a small message right here users location perfect good good so we now have the user's location so we already dealt with this problem right now so the next step is to now we'll be writing the real the real deal because the next step will be defining the root feature and we will be tracing the route so you need to type it correctly to avoid any problems or something okay so let's start so after our use effect hook let's define a function and let's call it function make router feature and we will pass coordinates which will be an array of number and number here perfect and here is any good perfect so let's Define a variable and let's type let's router feature type feature collection so you can find some infos about these things and the official Docs so it's not Magic features we have an array good so we will type here type feature properties okay let's Okay for the moment and geometry geometry which will contain type line string and there are a lot of options other options so as I said you can check the official docs of mapbox directions API and coordinates which will be coordinates good what else and yeah let's not forget our return return router feature good the next function the next function will create our router line it's the function where it will be displaying the line in the map so yeah let's do a in a sync sorry sync function and let's call it create router line we will be passing the chords which is number an array of number and let's type here promise void good so let's do it step by step so what we will be needing we need the start coordinates it's the coordinates that let's say it's the point of uh start or I don't know how you call it and the end chords the ending point because we need uh four uh four variables we need the latitude longitude of the current user okay and we need the location or the coordinates of the point which is our store okay so let's start the first thing we'll be defining the start chords right here okay this is uh okay let's type Here chords of zero which will be latitude uh longitude yep and what else and we need a chords well good this template string do not forget it okay and now we need the end chords which is our final point or the point where the user will be reaching which is our store geolocation or let's say coordinates we need to define the variable and chords again here and here we need the data from the store because this store will give us these data right here it will give us a name image URL latitude longitude and description we need these two okay so in order to access it if you cancel log here for example if you console log in the use effect and you type store which is this object that we got from our home screen you'll be getting these infos right here okay so automatically you will put like here for example we will be typing store Dot longitude because it will be needing the longitude okay and then and yeah do not forget that this needs to be an array okay if you if you remove the array you will face some issues when you you when when you want to trace the root okay because this needs to be an array or you can Define or you can change this structure and you can put these two inside an array and yeah you won't be needing to define the array here it's easy it really depends on you can do whatever you want and also we need the store dot latitude latitude perfect so what else now we need to define the geometries because we will be needing this variable inside the API URL okay and you will see this later we will choose here Geo Json again this is in the official docs so you can access it and then this is the most important part okay so you can just copy this and I would explain it in a second okay so here we have another an API it's right here as I said it's everything is inside the official docs right here so the first thing we need to do is to call this part right here and then we choose our profile okay we have four profiles here we have the driving traffic the driving the walking and the cycling on the next video we will be making this Dynamic so when the user clicks on the store a model or a window will appear and it will the app will ask the user which profile you want to use you want to use the driving or you want to walk or you want to cycle the cycling so yeah but for now I will be choosing the walking and as I mentioned in the beginning earlier that the route will be changed will change whenever we change the profile because if you choose walking you have a certain route if you choose cycling you have another route you can when we finish you can just test this by yourself okay but for now we'll be just doing this for the moment so we need the start chords of course the starting point and the ending point okay these options will be needing in the future okay the Alternatives is true in case there is an issue in this route so since it's uh since my box is contains a lot of features so if you activate this feature right here okay in case there is a problem or it didn't detect this route he can automatically track or display another route okay so geometry is it's very important so you need to Define it here it is also I guess mentioned in the docs here okay here it is alternatives okay and uh what else there are a lot of options actually you can just play with these but you will be using these uh here it is here is geometries okay we'll be using these uh in the future Maybe so step equals true Banner all of these are optional and do not forget the API key okay your API key I showed you how to get the API key you just need to register and then you will you will be having the public token copy it put it in a variable and then call it here it's easy simple as that so what's next we need actually a try and catch statement so for that we need a response so let's define our response here sorry wait let's use fetch you can use axios you can use whatever you want but for the moment I will be just using fetch and let Json await response dot Json good what else now we need our data so our data will be json.truths dot map data will be defined as any and then okay let's console.log this data okay we will see what's inside this this because we'll be needing needing these data in the future it's very they are very important let coordinates equals Json let's put here routes of let's say uh zero geometry and also coordinates good now we need an if statement if we have our coordinates so to check whether we have a coordinates if coordinates dot length if you leave it like this means it's equal to or okay cost router feature equals make router feature typo here and then call the coordinates good and we need to set our route directions in order to get the route router here it is ETC directions router and we'll pass the router feature and for the catch we can simply I don't know can just control log whatever here good so now we finished with these functions but how can we use it how can we use this one because this one is very important because the make router feature we already use it here okay but how can we use it use this to create our route and to trace the root inside the map so now we will be dealing with uh with our view okay let's delete this text tag and let's define and redefine again our map box view right here and it's not a self-closing tag so pay attention so we'll Define the style let's say Styles dot map okay and what else Zoom enabled yeah to be able to zoom this style URL and we already talked about this a lot you can Define your your style whether with whether with the ordinary styles that mapbox provides or with the one that you created with the map box Studio so I'll be typing here my box Stars let's say my box there are a lot of options there are satellite but I'll be using the navigation uh Knight here V1 you can use satellite for example or other options and what else do we need we have the rotate enabled to be able to rotate the map will pass through and here comes the real deal so there are there is a natural bit here called Undead finish loading map and this means when the map finishes loading and all the map components were loaded here we will be calling our create router line this function right here okay and we will pass the chords as simple as that so for that we'll be typing Undead finish loading map it will be the sync okay and we need to wait create a router line and we will pass our chords good let's type here and let's not forget API our camera which is a very important here camera and it is it is a self-closing tag here okay so we have the option I guess as I remember we have a zoom level yeah we will show True seven then the last time I guess it was 15 but yeah it's a lot Let's uh put seven for the moment and after that you will see Center coordinate here we need the center coordinate to focus on the location where you want to tag or something so I will be putting my own location you can put yours or you can use mine 15.72 724 perfect and the famous pitch which I talked a lot about we'll we'll put 60 here you can put it you can avoid it it really depends on you but as I said maybe it won't be a very fancy or glamorous in this type of map because it's not a 3D map because the the 3D map is the one that we made with the studio the matte box Studio but if you use the 3D map with the pitch and with the the route tracing that we'll be making it will be a very very beautiful map because you'll be having like 3D buildings with the route it will be with the navigation the directions it will be very beautiful but for now yeah you can leave it we'll see I'll put Pitch 60 animation mode and I also talked about this uh option right here animation mode and this needs to be okay let's put here fly two good what else and animation duration I always put 6 000 but yeah I I feel it's too much but I just like it you can just put less or more it really depends on you so we finish with the uh with this part of the my box camera now we will be dealing with the route directions okay so let's say here in case we have route directions what we need to do what we need to do okay so we need to Define our mapbox GL and there is something called shape source okay and this is uh not a self-closing tag so we'll be doing like this and we will Define our options right here so what we need we need the ID of course if you ignore the ID you will be facing some issues sorry to okay and we need the shape which will be our route directions good and inside this set this map box GL shape source we need to Define our map box here not shape but line layer my vs code is lagging again and this will be a self-closing tag okay so what we need here we need also the ID and for that we'll just type here router line okay let's say zero one we'll Define the style you can Define your own style you can put whenever you want line color will be this color for the moment and you need to choose the right color to to have a good display for example your map is with the is white you chose the light mode and you choose here or you put here the the white color you can face some issues seeing your yeah your your direct the directions so for that if for example you have a dark or a light map I suggest that you put the orange color which is the color we will be using right now okay four and what else we need the line width you can put less or more it really depends on your map okay let's say let's put like this here we do have an error here oh it's not okay how this happened okay I guess this needs to be inside like this color [Music] okay oh God I lost my concentration a bit so normally the error should disappear okay my vs code is lagging so that's why I'm doing these kind of mistakes and that's real a really huge problem okay what else so the final thing we need right now the final thing finally is our user location okay so it's the point where it's the start Point okay so after the shape Source after here okay our condition will be calling the map box GL not shape Source but it will be user location there is an option called user location and it's a self-closing tag okay so we need animated we'll put here two Android render mode you will choose GPS and show user heading indicator will be true and this is everything okay so now we need to just Define our map style okay because here it's giving us an error okay so we will just put flex one and that's all it's lagging again okay it disappeared so let's go back and I do prefer that we refresh our project okay let's wait a bit good maybe this code seems a bit complicated but it's not actually if you focus on each line it will be very logic okay there is nothing special about it and also you can find all these infos right here in the official docs of mapbox so I use nothing special or magical it's just from the official sources and we get rid of this warning and let's do storing chemnitz let's see what will be having okay here we're having an issue and it's okay so this is a Styles problem s double slash style slash mapbox slash navigation Knight V1 so here we are having some issues so we just have the user location but we are not getting our our K let's see what's the what's wrong with I refreshed the uh the app and everything worked so we went back I don't know what happened anyway so this is our home screen we will choose for example store in cabinets once we choose this store right here it will do this some sort of fly to animation and it would take six seconds and when the map finishes loading which is this option right here okay it will Define our route okay for the moment it's just like displaying this this route right here but in the next video we will in the ending point we'll be defining an icon the store icon okay okay let's choose another store uh maybe store in Helberg for example okay let's see once it finishes loading okay perfect so all of this info is right here this is what we're getting from this part the data okay so we are getting all the directions info and we can use this to create some sort of it's like we can do we can use these like the Google Maps functionality like how can we name it because each array here contains all the infos of each route it's huge but if you know how to manipulate these objects right here you can literally create a Google Maps clone okay so here what we can we we can actually in the next video we'll be using the distance we'll be displaying it in a very beautiful card okay inside the map it will pop up once the route is defined so here we have the distance okay we have the duration and this geometry is are the coordinates of all the route here that's why it's huge because yeah okay let's let me for a second let's just move this pitch thing and let's try how it looks from okay I'll go back for a second I'll start choose chemnitz again okay this error happens sometimes okay good now it will be much better much clearer good perfect but in case you use I will repeat it in case you use the 3D maps the one that we did in the first video you literally have to call the I attribute to yeah to define the pitch attribute to make it much more beautiful and then with these buildings you can like Define the route good so yeah this is all for today's video I hope you learned something new okay so in the next video we'll be defining a lot of things actually we'll be defining uh an icon for the ending point which will be the store we'll be defining a card here which will display uh the distance the uh the duration and some other and the name of for example of the store what else we can do yeah maybe we will we will also be doing a live tracking navigation okay and I will be uh demonstrating it live so I will just build this in uh in my phone and on a real device and go out and see what will happen okay and yeah that's all that's all for today's video I hope you heard something and see you on the next video bye

Channel: Firas Jerbi

Views: 5,198

Keywords: react nativ, react native maps, react native mapbox, react native directions, react native mapbox directions, react native route, react native 3d map

Id: J6YJb0ocwDQ

Length: 44min 5sec (2645 seconds)

Published: Wed Aug 02 2023