Navigation with MapBox in Flutter Apps

[Music] hey guys in this video we'll have a look at mapbox and we'll see why it might be a great idea to use it in your next project not only that we'll be building a complete flutter application together uh we'll be using map box will be using its maps sdk the navigation sdk and also create a route between the source and the destination uh i'm really excited to get started let us begin by understanding what exactly mapbox is so mapbox is a modern and flexible map service which can easily integrate into your web and mobile applications if we have a look at the mapbox website we see that they provide us with a lot of features such as the navigation sdk we have the map box studio which is my personal favorite you can do a lot of modifications like changing camera angles 3d features colors fonts you can completely customize how your maps look and behave then you have the maps sdk for integration you have the search apis the vision sdk data and atlas so the question which arises is why should we choose mapbox and why should we not choose google maps platform there is no doubt that google maps offers one of the best services in the industry but there is only one field where google maps lags behind and that is pricing in fact mapbox came into limelight when google started to make a business out of its map api if we have a look at the pricing of mapbox and compare that with google maps we see uh that mapbox has a much more generous free tier let's say we look at the directions api here we have 1 100 000 monthly free requests uh but if you go to the directions api inside google maps uh we have to pay five dollars per every 1000 requests that we make and yes google does offer you 200 of free credit per month after you set up your billing account but then that is just 40 000 free requests per month for directions api provided directions api is the only thing you are using which i doubt will be the case uh so that that is pretty clear that mapbox offers a better pricing model as compared to google maps and that is why mapbox started gaining a lot of customers let's say we have yahoo we have cnn we have new york times we have some names like adobe and ibm perhaps the biggest two names that mapbox added to its list is actually snap international corporation and facebook both of which also use mapbox for their services so two things are clear now mapbox has a lot of features and it has an amazing pricing model so if you're a startup who is just entering the market you are let's say a developer who is making the next big product uh you are a student community who is trying to build something for college or pretty much everyone who is trying to avoid use bills mapbox is the solution for you now that being said i think it's time for us to get started with the coding you'll find a link to a github repository in the description and clone the repository open your favorite id vs code android studio whatever you want to and let's get started so this is the github repository i was talking about uh based on the time of your viewing the video uh the repository might look a little different because i am continuously updating it uh but yeah the folder structure is going to stay the same uh you'll have two folders here one is completed code and one is starter code uh so the starter code is the one which you should be using you should clone the repository and then you should open this particular folder now before we can actually start writing code we'll have to run the starter code so for that we need to do some initialization in the code and those initialization will be done in basically five steps uh so the first step that we have to take care of is actually creating our own account in mapbox you can sign up for a new account and when when you create a new account you will be getting a public token like this here and and you can also have option to create a token so mapbox works based on two tokens one is a public token and one is a secret token so a secret token that you can create so when you click on this you can actually choose any particular xyz name but the one thing you should make sure is actually selecting the downloads read option so this must be checked and then you can add your own url restrictions if you are using it for the web uh so that you know you want to prevent managers activities and then finally you can click on create a token so i have already created my token uh i won't be creating a new token but you can follow these steps along so once you have created those tokens it's time for you to use them in your code so i have actually cloned and opened the starter code here and i also have my simulator running which will be using for development throughout uh and i'm running android studio right now you might be using vs code that's completely alright you can follow along so the first thing that we have to do is we have to set it up for the the ios for ios we need to take care of two things uh that is we have the info dot uh property list here where you have your public access token so your public access token should be replaced by the public access token on your mapbox account and uh the other thing that we have to take care of is actually using your secret access token uh so for ios that works in the following way if i if i open my terminal and i look for this file in my home page that is a dot any trc file this stores some of the passwords and other stuff and that your ios system uses to download stuff so in our case uh if you remember we had selected download read access option in the secret access token so in the dot ntrc file we have to uh basically add a few lines uh that will allow the uh system to download the mapbox api onto your device uh so that works in the following way i am not opening mine because that already has the secret token but you have to write a uh these three lines basically machine api.mapbox.com and the login should be mapbox remember this should not be your user id or anything else it should be map box only and the password should be the secret token that you have created uh so if you add these three lines in your dot netrc file it should it should be fine uh and that that will be all you have to do for ios uh for android what you have to do is you have to save your secret token in the gradle.properties file so you have your secret token written here you'll just have to replace this with whatever secret token you get and similarly you also have your public access token uh inside your app source main resource values and strings.xml so in strings.xml you have this thing mentioned as well so you have to put your public access token here now remember one thing uh that we we have to take care of is that your public access token looks like uh pk dot some uh some strings xyz something and your secret access token looks like s k and dot something so these represent the public key and the secret key respectively uh so that will help you distinguish between those keys and keep a track of what you are putting where and another simple thing which you could do is to just use the uh search in the entire project you can look for public access you can also look for let's say secret uh token so you can replace this here so that concludes your step three and four basically the only thing remaining is actually uh to go to your assets folder and to create a config uh folder here and to store an environment file here inside the environment file will actually be storing our public access token so when we use a map box we'll actually be needing that public access token to render the map tiles so that is what i'll be storing there and for the purpose we're using the dot env package so one thing that is good is i have already included all the packages that we are going to use uh in here so once you actually run the project uh you do a flutter pub get uh you should be good to go you don't have to you know manually install or look for packages uh so that would be all about setting up the project uh i would highly recommend that you also move to the documentation and have a look at how uh on what other steps they are suggesting you to do i have included the links to the documentation in the description why i am saying is because i have added a lot of things like permissions and other stuff inside the gradle files inside the property list files which is actually helping the application run even with this small configurations but it's good that you know the complete set of changes that you have to make to include mapbox in any project uh so that being said let's uh start and run our application so we can run the application by clicking on the uh run main dot add button here and that actually will launch the main.dart on my simulator which is this uh and for the very first time that you actually install the application it's gonna take you let's say a minute or so uh it depends on your system but that should be what uh the typical time should be so it will first run an xcode build it will also do a pod install and then after completion uh it will actually show up on my screen so now the xcode build has been done and you see that my application has also launched on the simulator i should actually uh shortly be greeted by my splash screen which i have here in the ui folder and yeah so here we have our splash screen and also we see our application so it's good that our application is up and running so all the configurations we did all the keys we have put we have put them correctly uh and things have started to work uh let me just quickly uh you know go through two things so i'll tell you what all folders and files we have and what the uh application is uh looking like corresponding to those files and then also talk about what our aim is uh before we get started you know uh towards uh coding and fulfilling that aim uh so the the first thing is uh going through the folders so we have a constant folder here that has a restaurants.dart this is a list of maps so it's pretty similar to a response you might get from an api let's say and here we have an id a name items and image and the coordinates corresponding to each restaurant and then we have the helpers folder so helpers folder contains some of the helper functions so we have some comments where you know we have a function to get latitude longitude from restaurant data we have do exceptions uh which actually uh you know deal with the exceptions uh raised by the do package uh which you'll be using to send api requests uh then we have the directions handler so directions handler are sort of uh manipulating the directions api response and uh storing them in the shared preferences and then we have a shared preference.dart which contains functions to set and you know get information from the shared preferences so we are going to use shared preference quite a lot uh so we have actually declared them here in the like before the main function so we can globally use this uh variable shared preferences throughout the application then we have the request folder as the name suggests uh you guessed it correctly it is here that we use our do uh package and we make a request to the direction api uh we'll talk about this in a bit uh obviously we'll come to this uh but the response that we get from here is actually plays a crucial role in designing uh those routes that we are going to do in this project then we have our screens so inside screens we have these three screens we have a home management we have a restaurant we have a restaurant stable uh so in our case uh the home management actually is the entire screen that you are seeing which contains this bottom navigation bar and the app bar and the other two screens are whatever content you are seeing between uh so the restaurant maps is something which will work on and will build the restaurant table already contains a visual representation of the restaurants we have all these restaurants in the form of cards and we also see the distance here which we will be modifying based on the data that we get from our directions api uh after that we have already seen our splash screen so splash scene right now just redirects us to uh the home management screen after a particular duration uh and i have put it in this way because we will be using the navigator thing in the end in the same way as it is now uh and we'll be adding some uh asynchronous calls here or some function calls uh which will actually make this entire function asynchronous as well uh so we'll we'll come to that in the very next step uh and the other thing that we have is widgets so widgets we have the carousel card dot dart so this is something which will use to generate uh a list of all the restaurants uh which is stack on the top of our map and then we'll actually be you know moving those uh carousel list we'll be using that character list uh to focus on a particular route uh that is to say to connect our current location to a particular destination uh so that would be all uh let's actually get started uh uh with writing the first few lines of code all right so the first thing that we have to do here is actually show the user current location or the current location of this device in this restaurants map page instead of the let's build something awesome line for that purpose i will be declaring three variables here so the first one will be called location and i'll call the constructor i have to import this package remember so that is done uh the second one will actually be a boolean i'll call it a service enabled and the third one will be permission status so since i am not initializing them right away i have to you know add those question marks which show that these variables can be null uh but yeah that's just uh taking into account the flutter's latest convention of null safety uh so the so the service enabled variable will store uh a boolean that will check if the service has been enabled or not since we are going to use the evade keyword we have to make this function asynchronous and that we do that by calling location dot or dot service enabled now since it's a boolean it's possible that it has the value false so in that particular case uh we'll just go ahead and uh you know instead of saying service enabled uh we will say request service all right now similarly for the permission status uh i'll check if the permission has been granted or not you can do that by writing a weight location dot has permission which returns a boolean and then you also check if the permission has been granted or not so in in this case since it's not a boolean anymore we have to actually check it with permission status.denied and here we'll say permission granted equals await await location dot request permission not run time request permission okay so now the permissions uh and the service enabled thing has been handled uh the next thing that we have to do is to capture the location data of the user so again you guys are right we're going to store it inside a location data variable uh and i'll also call this location data for convenience uh and what it will have is a weight location dot get location yeah that's the function uh and now uh since we already have the location data i want to store it in a latitude longitude format so i'll call this latitude longitude i'll name the variable current latitude longitude and i'll store uh latitude longitude uh and where here the latitude will actually be location data uh dot latitude and i have to make sure that it's not null similarly location data dot longitude and also making sure it's not null uh so we have the current latitude longitude stored another now uh what we have to do next is actually call the shared preferences that we had defined in the main.dart file here and uh though that say at preferences will store uh uh the latitude and longitude so we'll do that by using the set double function uh set double function is used to save a double value to the persistent storage uh and i'll name the key location and sorry i'll name the key latitude and longitude not location latitude and longitude and the latitude will of course to locationdata.latitude and i'll just copy the line again i'm lazy and i'll call it uh location longitude in this case longitude and longitude again make sure that these are not null and now we have stored them in the shared preferences uh the last thing is to remove the future delay we don't need it anymore because we already have some asynchronous function calls here uh so that that would actually complete the task for my splash uh [Music] screen uh if i go ahead and you know restart the application so right now it uh it fetches the user location for me uh i have already granted the permission of this application since i ran it once before but if you're running for the first time you must get a warning from the apple system that uh whether you want to grant location or not now the main dot dart file has this air preferences so we can access this in any file uh i'll go to this restaurants map and under the map box related uh variables i will create a variable that can store uh i mean basically access the data from shared preferences so again its type will be latitude longitude since uh we just want to reduce our work and i'll call latitude longitude uh and i'll use a helper function of the same that will be get lately longitude from shared preferences uh so if you go to shared preferences dot dot you see this function and it does nothing but just to get those two doubles uh in the latitude longitude format now inside restaurants map i have already already initialized this so in the text field what i'll do is instead of this i'll create two template strings and separate them by comma uh the first one will contain of course you need to remove the constant here because it's no longer a constant now and inside here you have to say latitude longitude dot latitude and latitude longitude dot longitude so once that is done we see uh that we have the current user latitude and longitude and this device is right now in apple park i have set it to this and in fact all the restaurants around here that we have in this file are also located within a few 100 meters or you know 400 500 meters of this location so that we can show the routes properly so if you are using a different device or a custom location make sure to set it to something similar or something within the apple part that you can use directly and you know follow along with the video so next thing that we can do is to use the mapbox package and render a map on the screen and show our current user location okay so to render the current location with a map box we'll need two variables uh one is a mapbox controller and the other one will be actually a camera position so we'll declare both of them as late now uh late is a term which uh is related to null safety which just says you that your variable will not be initialized uh when it is declared so i'll call this initial initial camera position and i'll call the other one as just controller so it will be map box controller and this is just ctrl m so inside the init state what we have to do is actually we have to initialize the initial camera position initial camera position will actually be camera position and inside the constructor what we'll do is we'll add a target so the target will be the same latitude longitude we had defined previously uh in line 14 here and the other thing will be a zoom so i i'll prefer a zoom of 15 for this so zoom basically determines how how much area of the map you are seeing uh now that initial camera position is done here we have to go to uh this function on map created which i've already done for you so we'll need all these three functions so i have some comments here so that you can also understand what's happening uh but on cam on map created is a function that is that will be called when the map is created and on style loaded will be called uh when all the map styles are loaded so we'll be using both of them but for now what i can say is inside this function i'll say this dot controller is equal to controller so it will assign the controller that is uh from uh given by the map box uh widget and i'll i'll set it to the one that i have declared here so that i can use it globally inside this particular class restaurants map state so now inside safe area will remove whatever we have and we'll put let's say what should we put here so we'll put a stack uh now why i'm putting a stack is because i later have to stack those carousel cards on the top of my map so i'll just start with the stack uh and the next important thing is to use a size box uh that is because the map box uh widget that you're going to use uh that needs to have a predefined uh size or a predefined height to it otherwise it will just expand and you'll get error so i'm going to use media query for this i'll just set it to 0.8 times of the uh height of the screen so that is done in this way i'll say size.height and i'll set it into 0.8 okay so the child of this will be our map box widget so for us it is map box map that's the widget you have to use uh and the mapbox map will need a few things now the first thing will be access token remember i told you before we'll be using the dot env because we that is where our environment variables have been stored now map box map ish uh okay we'll see what's the issue here so we'll need the initial camera position okay and the dot env also needs to be imported yeah so we have imported the dot env as well and the environment variable that we'll need for our case is actually called uh map box axis [Music] token and the initial camera position uh yes you guessed it right we have already declared it so we'll set it initial camera position uh after that what we have to do is to uh set a few more properties so on map created again we have a function over there on created and then we have on style loaded call back we'll also set this to on style loaded callback uh although this function is currently empty but still that's okay and when we need my location enabled which is a boolean and by default this is actually false so we have to set it to true so that i can show the user his or her current location and then we have the my location tracking mode which you can set to my location uh tracking mode dot gps tracking and then you have a min max zoom preference so i said i mean my zoom preference so that the user cannot just zoom out infinitely and see the entire globe we don't want that but we want to keep him within a particular zoom level so i'll set it something within 14 to 17 and my by default one is uh 15 that we had defined here in the initial camera position zoom okay uh so that is done one more thing i'll add here is uh like below this stack or maybe i'll just add it separately so that is a floating action button so if floating action button will have to add it to these scaffold and that floating action button will be giving me the uh ability to migrate to my current user location so how are we going to do that again i think it needs the on pressed argument by default and inside the onpress argument we'll write controller uh and this is the mapbox controller we defined evolve and we'll write the controller dot animate camera and this requires a camera update variable so we'll say camera update update dot new camera position so the new camera position will hold the initial camera position so the aim of this particular thing is to bring me back to my initial location if i tend to migrate or go somewhere away and what else we need to add okay we'll add a child of course and the child in this case can be just an icon so i'll make it constant since it's a constant thing and we'll say i can start my location okay so now if i do a hot restart i see that my map tiles are being rendered and the map types have been rendered now and i see my current user location as we had predicted it is near the apple campus uh and now we have our latitude and longitude shown on the map uh so let's go ahead and you know play around a little bit and add the carousels on the top and also look have a look at how the direction api works okay before we continue writing more code and understanding uh how to write those characters and stack those on the top of our map let's have a look at the mapbox playground that we have for the directions api uh so you can find this in the link to the description i'll add the link or to this to this website as well and what we have here is we have a access token which is my public key we can add coordinates uh we can add the routing profile we can add the format in which i want the response to be in and then also configure a few more options so what we'll quickly do is i'll paste the coordinates that i want uh in this format longitude comma latitude and semicolon longitude comma latitude for even up to 25 uh waypoints uh so the first one represents my current location in the apple park and the second one represents the location of one of the restaurants so what i want to do next is i want to set the routing profile to cycling because i'm assuming that we are cycling and then we also want to set this overview to full and now i can go ahead and click on add coordinates so i see beautiful animation it goes from new york uh to california and here i see my current location if you remember we saw this on the map and this is connecting me to one of the restaurants out there and one interesting to note is that we have multiple routes to that so by default the one that is shown is the one that has a shorter time 1 minute 28 seconds as compared to 1 minute 34 seconds uh and yeah so that is how the directions api work and the response that we'll receive uh is actually something interesting which we can have a look at if i click on show more here okay so we have routes and you have two routes since there were two possible options remember here we had two possible options uh and within each route i have a geometry and i have some coordinates now these set of coordinates that i have here these are actually latitude longitude pairs or uh to be more accurate longitude latitude pairs uh which is the way that uh data is returned from mapbox uh but this geometry uh object is something which you will need to actually plot those routes in our application so this is one thing that we are interested in the other thing is to take a note of the duration and the distance now distance is in meters duration is in seconds we'll be using both of them to actually also decide that how far the the restaurant is from my current location or how much time it will take for me if i were to follow the shortest possible route uh so that being said we can now go ahead and have a look at how to implement this uh in our flutter application so the first thing we'll have a look at is the mapbox request file here so this is the file i had actually shown you earlier and we were using the do package here to make a request so the request that we are making is actually following the format that we saw here uh in the request url and this format here has your uh you know uh the pairs that you have uh put in uh that is the coordinates and also some more configuration variables that we have said like overview and routing profile and other parameters so that is what we are taking care of in our code as well and we are creating a url uh based on that and then we are sending the request to the uh directions api uh the response data that we'll be getting will be similar to what we saw in the website uh but we are interested in only three things so what do we do is we make use of a uh helper function and directions handler i had also talked about this uh this actually modifies the response and it gives me those three things geometry duration and distance and then i uh create a map of those and i call it modified response and then what i do is i actually save it to my shared preferences now these are the two functions and now we have to actually call the mapbox request and then make use of these functions here and save it to share preference so where should we do that we will go to our splash.dart so inside splash.dart just before this you see this comment that says get and store the direction they pay responsive share preference so for that what it will do is we'll do it for every restaurant that we have so i'll run a loop i'll say equal to 0 i less than uh restaurants restaurants uh dot length did i make a mistake no okay yeah so restorance dot length and then uh i plus plus and what i'll do is i'll say map modified response that is i'll set it equal to await get direction api response so this is the one that we have in our map box request file and this requires a current attribute longitude which is already set to the current actually longitude we had defined before and then we have an index here so i'll just set it to i uh and then what we can do is we will call the other function that is safe direction api response uh we'll use the index as i again but this time we will have to encode this response in the format of a json string now that is because uh the shared preferences cannot store maps and other complicated uh variables but they can only store double strings integers and such stuff so we'll actually encode this so for that we'll write json uh this one dot encode and it expects the object so that for me will be my modified response so those two lines will uh fetch the response from the directions api using the do package and it will save it to our shared preference so now i'll go ahead and restart my application and one interesting thing we can note here is actually if we open our run we see that all these four uh you know entries and so the four times we called our uh the directions api we get correspondingly two prints so those two prints are actually this uh correspond to the distance and the duration for that particular restaurant uh once that is done now we can uh we have the data with us on the duration and the distance data so just for an example let's go to the restaurants table which we have and we had this hard coded two kilometers everywhere so inside restaurants table let's go ahead and actually use our proper uh distance now so what i will do is i will again use a template string i'll let the key kilometers stay uh i'll remove the constant uh that's something which is important and the template string what it will do is it will make use of another helper function and that is called get distance from shared preferences uh this gives a index and that index is also specified by my list view builder and i divide that response by thousand since i want to you know have it in the form of kilometers instead of meters which is returned by the api and i want to convert this into string and i want to fix the number of decimal digits to do so if i run this now i see that these things change instantly we have zero point four zero kilometers zero point two five kilometers upon exercise zero point four kilometers uh so from prediction at least if i ignore the route uh it looks like maybe kfc is the one will reach the fastest too uh so now the next step is to render those uh those cards of these restaurants as a carousel slider on the top of this map so we can slide and have a look at which one comes first in order to add those carousel items we'll have to define a few variables so the first thing we'll define is a list of maps and that i will call as carousel data and what next i can do is to define uh a integer that is page index so this will represent the current uh carriage item that is being focused on and then we'll define another uh widget i mean a list of widgets so i'll mark it as late because i won't initialize it yet while i'm declaring it and i'll call this as carousel items so what we will do now is we will also sort these items that we are going to show on the screen in order of their duration so it means the restaurants which i will reach fast uh that will be shown uh in the first position and then the second and so for that i'll have to write a loop here i'll call it as integer index equals zero and index less than again uh you guessed it it's restorance dot length okay i think something happened restaurants dot length and inside the loop what i will have is actually uh two variables so i'll call the norm distance and i'll set it from the helper function that is get distance from shared preference and the index is shared and then divided by a thousand to store the value in kilometers and similarly what i can do is i'll uh get the num duration uh i'll declare that and i'll get duration from shared preference now both of these were saved in another helper function if you remember and we are now fetching them uh the last thing is actually in putting data into carousel data so i will call carousel data dot add i'll make a map of three items of three keys so the first one is index that will store the index the second one is distance uh so that stores my distance and the third one is uh duration which will store my duration so now that it's already added what we can do is we can go ahead and uh sort this so i'll call carouseldata.sort and now this is how we sort a list of maps in flutter we'll take two map objects and we'll compare them so i'll compare a of duration uh with uh b of duration so i'll see if the a of duration is less than b of duration uh and if that's so then i will actually uh give it a zero otherwise i'll give it a one okay so now my data is sorted uh inside the carousel data uh and then i'll generate a list of the casual widgets so you remember this late uh variable late that we declared here so the carousel items uh will now get in data and they will be of the format of list widget so i will mention that and then i will use dot generate function uh now we know that the length of this is actually restorance uh dot length and uh for each index what we'll do is we will take carousel card okay so for each index what we'll do is we will take uh carousel card and uh so carousel card is something we have defined before uh in in the widgets so i'll call this carousel card and that expects the index which is already given but we want to replace that index with uh the index of carousel data so that is because once we have sorted this so we want uh the data or the indices here to be the indices that is uh corresponding to the sorted indices so so that i i don't uh give the index of the first restaurant but i give the index of the restaurant with the shortest time so that is why i'm using this uh the next thing that i will do is for distance so for distance similarly i will uh give the distance of uh the same thing but now this will just say distance and again for duration also we will do the same thing okay so that being done our list of items uh of of carousel items are generated uh now what we have to do next is actually we will go go to our widget so the build widget that we have here and we'll use a package that we have called or that we have used in the application and that is called carousel slider so for the carousel slider i'll just declare it uh below this one so below my size box and that carousel slider will take a few things now now the items here can be uh carousel items uh and then the options will have the type carousel options uh carousel options and inside casual options will define a few parameters now okay uh so the character options will take a height let's say 100 and then we'll take a viewport fraction i'll say it as 6 0.6 so viewport fraction represents how much of the current widget you are having looking at and how much of the next widget or the next page you can see uh and then we have initial page i'll set it to zero uh then we have enable infinite scroll which is true by default but we won't we don't want that we'll set that to false and the scroll direction uh obviously needs to be accessed.horizontal uh and we need a function on page changed so on page change it will actually take a function of this type uh that takes a index and it has a carousel page change uh reason so that's the type and we call it reason so this okay uh reason i'm sorry yeah and now inside that we'll call a set state and we'll set our page index to the index represented by this so what does this function do it just uh changes the page index so we can make use of page index to keep a track of what page we are on uh and the index will just show me what page i am on when i uh traverse through that uh casual slider by moving it uh so that would be all if i just restart my application uh on this particular page on the very first page i should now be seeing a set of uh widgets that i have so these are the carousel cards and i i had guessed it right that kfc is the shortest uh path and the shortest time uh so that is the character that is coming in first and then we have pizza hut then then we have starbucks and then we have dominos so the next thing that we have to do is actually to show these restaurants on the map and to join them by polylines or by lying layers so we'll do that using uh using the controller that we have already declared uh so for that what we can do is uh first of all we'll have to uh declare a list of camera positions so again i'll mark it as late i'll call it late list camera position and i'll call this as k refs tolerance list and then what i'll do is uh in inside this init state uh function uh we'll go ahead and add basically initialize the map symbols so what we'll do here is we'll say k restaurants list uh that is equal to list of uh camera of positions and will then generate it so this is similar to how what we did in the previous case to generate the list of carousel widgets so here also we will have a length so that length will actually be the same that we used here which will be restorance dot length again for the uh function here so we will return a camera position and that camera position will will set the target to get uh latitude longitude uh from restaurant data so this is another helper function uh and that uh that is just getting the lateral longitude corresponding to a restaurant and the index that we will give here is actually casual data of index of index that is again because we want to specify the proper index and not the index in the order in which we are generating it so that being done we will need one more thing here that is a zoom parameter so zoom parameter i have set it to 15 and i will complete this uh now the next thing that we have to do is in the add source and line layer we will add these sources to the map and we'll add a few lines to the map so by line here i mean polylines which are basically routes connecting the current user location to one of these restaurants that come on the map so the first thing is uh to add the animate camera uh like so that if i see a particular route i should focus on that particular uh restaurant and i'll do that by saying controller or dot animate camera and here i'll use camera update so you remember this is something we did for the current location in our uh floating action uh button as well uh so i'll say new camera position and i'll say k restaurants list of index and for the next thing we need to add a polyline between source and destination uh so for that what we'll do is we'll take the geometry uh you remember geometry we got from uh the response of the directions api and we'll call and the helper function that gets us get this geometry from us from the shared preferences and we'll call it as carousel data of index and of index and then what we'll do is uh we will create a final fills object which will help us render this on the map so this has a peculiar uh way in which we have to write it so the first thing will be called feature collection and then the next thing will be actually features so inside features uh that expects a uh us to give a uh basically a list now and in features what we'll do is we will provide a uh object and in that object uh our type will be a feature so since it's a feature collection uh the type is feature and we provide id so id is 0. so let's assume we wanted multiple features to be rendered so even catering things like a polygon in the map or something like that so that's why we have uh you know ids and stuff uh but if we add properties uh in properties we will need to add the type of data that we want here but we don't have any property here though so i'll just leave it blank and the last thing is geometry so geometry is what we got from here and that is geometry okay so my fence is ready uh now uh the other thing is to remove line layer and source if it exists so since we'll be traversing between these cards basically so we will be generating polylines on the map for one card and for the next card we'll be generating another polyline so we need to remove those polylines before we actually generate the next quality and otherwise it will be just too many polylines on the map and we want to show it one at a time so for that what we'll do is uh we'll check if remove layer is equal equal to true so remove layer something we don't have yet but we'll set that in in a bit and here if it's actually equal to true what we'll do is we'll say controller dot remove layer and that remove layer will take a id of lines uh and this is what we will create here and again for this one uh we will actually remove the source then and the source that will remove is fills so remember that you should always do this in this particular order you cannot remove a source when a layer exists because the layer depends on that particular source and it will give you an error so make sure to maintain the order in line 73 and 74. after that what we can do is we'll just add these things so i'll say await controller dot add source and add source will take fills as the source id and the property that will have here is jio json geojson properties and here the data that will be equal to fills sorry not minus fills but fills okay so the source is added uh the next thing is adding a layer so we'll say evade controller uh dot add line layer and since we want a line on the screen we don't want any other kind of layer so that that's will whereas the function will use and instead of source id i will use fills now instead of layer id uh you see we remove that layer here so that's the layer that we'll use that is lines and in properties we'll use line layer properties so line layer properties have a few things we have to add that is line color so line color i prefer to use the color that we had seen on the demo uh in the playground the direction cpa so i'll call it colors.green and i will convert into two hex string rgb now remember you have to do this because line color will expect uh uh so line color if you see this it expects a dynamic but it expects uh the color in this particular format so make sure to convert that into a rgb string or i mean a hex string and then you can have a line cap so line cap can be round that means your line edges and other things will be down and similarly line join so if there are two lines joining that also you can set it as round uh that gives a nice curvature and then we have the line width so i'll just keep it as two uh on the map and now we have actually added the source and the line layers so the very last thing that we have to do is to uh put this here so inside on style loaded callback we have to actually go for all the camera positions uh inside the list of camera positions for restoring that we made so i'll call it as ks torrent uh k restorant uh in k restaurant list and for each kilo store and what i'll do is i will await my controller and i will add a symbol so i'll do add symbol here and that add symbol will take some options so the type of this is symbol options and the symbol options here uh they will need some parameters now so uh the parameters are geometry uh the geometry will be uh kristolen.target so that is the latitude longitude and we need the icon size so i can size i'll set it as 0.2 and i have already put something for you in the asset so that is the icon image and the icon image will have a path of assets slash icon slash food.png okay so that does it for us and let's use a double quoted string because i kind of like it okay uh that's there and the last thing we have to do is to uh call the add source line layer and we have an index and we have a remove layer so on-site loaded callback is the first time the styles are loaded and that is when i want to show uh the line and the symbol corresponding to kfc so my index here will be zero and the remove layer that i will do is false since we i don't want to remove anything the first time i am rendering a layer uh but when i want to actually uh render the next layers i want to remove those things so when should i call that i i will call that inside the on page changed function so in the on page change function below the set state go ahead and call the function add source line layer and the index can be the index you have specified and this one should be true because now you want that to be removed now once this is done i can go ahead and restart my application uh it seems we have some error in restaurant maps let's fix that quickly or have a double comma okay so now if i go ahead and hot restart my application will restart again and in the run you can see we are getting these distances and bam you have your current location connected to kfc so you see these four things that we have on the map right so we have these four restorants on the map again this is why i made this one to get back so we have the four restaurants here and the case is the one it's connected to if i move on to the next one that is pizza hut it connects me to pizza hut if i go to starbucks it connects me to starbucks and if i go to domino's it connects to domino's so that is the aim that we wanted to uh actually achieve that whenever we go to a particular uh restaurant we should see the path to that you can also zoom in and have a look at you know the proper path again i'm sorry for getting away but if you zoom in you can see the path here and that is how we have achieved the aim of our project uh so that would be all for this uh one now uh one more thing we can do is to actually have a look at the android emulator so if you open the android emulator and look uh and you have put a let's say you put a slightly different location here and then this list of restaurants that we see here might change because the distances between them will be different so i hope that video gave you a complete insight of how you can use map box in your web and mobile applications uh and for people who are starting with their map projects for the first time in a flutter application uh i i really hope that you found it interesting uh one more thing which you could do is actually implementing a turn by turn navigation so let's say you have uber application and you're actually in a car going to destination so all those storms and you know things that you have the entire route can be simulated uh that is something which you can also implement using mapbox and it will be a pretty interesting session uh to build a project like that so if you want to uh you know if you want me to go ahead and do that then let me know in the comments uh for today uh thanks for watching the video make sure to like share and subscribe uh that really keeps me motivated uh and i'll see you in the next one [Music] you

Channel: AB Satyaprakash

Views: 23,880

Keywords: Mapbox, Flutter, Tutorial

Id: oFDx6tLipmw

Length: 55min 36sec (3336 seconds)

Published: Sat Feb 12 2022