Draw Routes in Flutter using OpenRouteService. (No Google Maps API) #flutter #fluttermapp #leaflet

drawing route on a map is possible with Google Maps as it is one of functionalities that come with this API but what if we don't want to request for Google Maps services for any reason then comes up the idea to look for an open source alternative luckily the product map plugin is a gold drill welcome guys on my YouTube channel my name is Abdul Harford and in this video I will show you how to draw roots on top of a flutter map using open Root Service open Root service is an open source solution that helps in finding intermediate coordinates between two geographical points without wasting time less time riding okay all right this is the project I have already set on my project and a part of the default product app.com I have created the map screen to help maintain the code okay as you can see I have already launched the app okay the first thing you have to do is add the Florida map plugin to the project okay here is a for a map project for a map plugin and I have already added to be to the project so let us show the map here you can see that Below in the on the Florida map plugin page we have the documentation link here and you can click it and will relate to yeah you'll build it here okay this is the Forum up documentation so we have to show the the map itself every form every shape that comes with Flora map Plugin or available within the Florida map plugin uh type uh types of layer okay so we have the marker layer let me show you yeah yeah we have the tile layer for showing the app itself we have the marker layer for showing a geographical point on the map we have the polyline layer the point line layer this is the is that layer that will help us to draw The Roots between two geographical points so okay so let's start with the tile layer let's copy this and paste it in your app okay you have to add this great okay let's start the let's press that if you have half name foreign great we have our map we have our map as you can see it comes with a default Zoom parameter that we can change ourselves okay so this is our map yeah so let's come back to the coatings here in the map option you can specify the zoom you can specify the zoom option okay [Music] let's put it at 15. and you have the center you have we can Center the map to a geographical points a specific geographical point so let's l engine okay one thing I most tell you is any geographical point is in latitude and longitude form so in Florida we have a plugin that will help us manage this kind of points okay it's called the duplicate oh no that's welcome I was looking for so it's called The Lads and belong to plugin let's add it to our products okay pick it as you can see is still processing I'm still processing okay great I think it's good the lat long to plugin is added and if you come here you can just do this okay it's correct now I have a now we add the latitude and we can add the coordinates this is a specific coordinate as I'm recording this video in lome so this is a geographical point Lumi crate less let's restart the app to see the changes yeah yeah this is low main as you can see here my great love me so the back and now the thing we're gonna do is after adding the map itself you have to add two marker okay markers are words markers uh at the point are the geographical points on a map okay and with the Florida map plugin we must use the layer to add a marker on the map okay let's copy this oh what's going on okay come here okay paste it here creates good and good and good let's replace this but with a an icon button I'll press icon icon works icon location on your location on [Music] crease so this is the color cream icon size passport 45 okay icon size 45 okay now here I think we must we should put a coordinate of the request marker on you can put any coordinate parts this is Dos on example okay that's great as you can see this is the marker in green color okay let's make it twice this is the first marker and this will be the second marker okay this is the of colon cream and we will change the coordinate click Start this also okay so it's good it's good I think it's good okay as you can see this is the second marker right here okay now we are done with putting the geographical point on our map so the next level The Next Step will be will be register on open road service because before drawing and routes between two geographical points we have to find a intermediate coordinate the intermediate point between these two points so this task will be done with the open road service so let's go to the openhost service website let's go on the open roads service websites yeah before doing anything here we have to login I already have my um I will just log in okay if you log in and you come here you will be or directly to the dashboard okay you have Direction here isocon Matrix geocode we have many service with open hotels okay but what we are interested in is the direction service the direction service is one that will help us finding intermediate coordinates you come here Direction you click on the gets in you can make an example by clicking on the call yeah as you can see the draw The Roots okay to use this API we have to be logged in before and generate an API key after specify the start point and the end points okay but this is the most important thing that you have to gain in mind while using open Root Service open road service represents a geographical format in this form longitude and latitude so I will come here we come back to our code and create an API API file is API Dot file okay what we will do here okay I just copy and paste my credential okay to to go very fast okay but here as you can see this is a it's just a function that takes the start point and the end point in pi as parameters and this is the API roots okay this is the API key and the build URL so next step is use this API request this API in a map screen class okay so this method function to consume the open puts services API gets coordinates here okay we'll sync this okay I will request for the made this comment so response awaits HTTP okay this is another useful plugin that we have to install before doing any API communication you have to install the the http plugin yeah copy this come back to uh in our file and paste it here all right let me continue this Mean Time get coordinate now this is a guess votes yeah let's add it okay let me add it here okay we go we are good now so let's go foreign the start point and end point will be added in the longitude and latitude form so I will come here and copy and paste we will give as parameters to start points and the end points in longitude and latitude form so we have those two inverse parameters create now if this also is a stateful widget it request for it so if the response the API call is code we will check the status code if the status code is equal to 200 so I mean everything is good so uh data equal to Json code response dots body okay here we retrieve the data from the API okay now the data retrieved is a list of points okay this is the most one of the most important part to to to to look for okay the data travel is a list of points okay a normal list so we have to create a variable here of tip lists of type lists okay list of points this is a list on ordinary list okay let me come in here okay let me show you something if you come here and copy this if you copy this if you copy this you will see that the response is in Json format in especially in dual Json format your Json format is a specific specific format that has managed geographical data okay so let's try the data data data here reports a feature as you can see here the the first level is the features okay so we put the features after put the features have only one elements inside a future so we put zero no so we come here inside both property yeah as you can see here we have inside the geometry property we have the list of points as you can see from the start point to the end points okay and these are the intermediate coordinates that we have to retrieve and put in our app okay as you can see these are the intermediate coordinates so available geometry property so geometry and after you have the coordinates go from the coordinates okay okay this now this is the list of points the ordinal list of points but any point that is that is used on a map is on latitude and longitude form as we said before so we have to convert this this list of points in a list of points of latitude and longitude form okay longitude points now we have done with retrieving the list of points so what we'll do is convert the this list of points of normal points coordinates in into a list of latitude and longitude points so we have to create a list right here okay list of points you have to map this list so for every matter here good good okay now here we convert the lists of points into a list of latitude and longitude points because this will help us show coordinate on the map okay after doing this we can simply call our function here let's first start so if we click on it haha nothing happened nothing happened because we didn't we did not yet add the polyline layer okay the polyline here help us as the roots on the into the map on top of the map so when you come here we copy the polyline layer to print the rules so crates so we come here and puts the list of points very easy like this you can specify the stroke with F5 if you want okay okay let me come here voila we have done with the fruits drawing using open source open road services so this is a very this is a relative very simple step to follow but if you have any question you can leave the comments in the comment section you can find this code all these codes on my GitHub the link is in the description thank you for watching and see you next time

Channel: Abdel-Khafid

Views: 3,203

Keywords: flutter_map, flutter, openrouteservice, google_maps, routes, directions

Id: k0kDJfdPSvc

Length: 28min 36sec (1716 seconds)

Published: Sun Mar 05 2023