Drawing routes on a map, it’s possible with Google Maps as it’s one of functionalities that come with its API. But what if you don’t want to request for Google maps services for any reason ? Then comes up the idea to look for an opensource alternative. Luckily the flutter_map plugin is a good deal.
In this article, you will definitely learn how to draw routes on top of a map plugin using OpenRouteService that helps in finding intermediates coordinates between two points.
You can find the source code of this project at the end of the article. For now, let’s jump right in !
Create a new flutter app
You can create a new flutter project with the following command.
flutter create projectnameAdd flutter_map plugin to the project
A simple search on flutter packages website and you are led here : https://pub.dev/packages/flutter_map . At the time this article is written, flutter_map plugin is at version 3.1.0.
Open your project in a code editor and paste the plugin in the pubspec.yaml :
You may notice another package on the previous image : latlong2. You must add it in order to see points on the map as the package manages latitudes and longitudes coordinates.
Put two geographical points on the map
First of all, bear in mind that flutter_map comes with many layers. Layers help draw various object shapes. Visit the documentation here to learn more about them.
- Then add the map itself using the Tile Layer.
- And add points to the map by using the Marker Layer.
Register on OpenRouteService and Play with its API
Go to the openrouteservice website and create an account to get an API key. After getting in, you will be led to the dashboard. The API key can be found there.
Next step is to click on “API Playground” in the navigation menu and choose “directions” among the services. you must get the follow screen.
You can test the routes or directions service by clicking on the red CALL ACTION button. the parameters are :
- the API key
- Coordinates of the start point
- Coordinates of the end point
Consume OpenRouteService directions service
First of all, let’s create a function that will do the request. All in a new file api.dart.
Now here we come to the most important part of this article :
It consists in finding the coordinates of the intermediate points between the starting point and the end point in order to trace the route.
For doing so, we will install the http package and create a function that will consumed the api method.
Our example startPoint have these coordinates : (6.145332, 1.243344) in (Latitude, Longitude) form. But the OpenRouteService requires the coordinates to be given in (Longitude,Latitude), that is why you can see …(1.243344, 6.145332)… on the above image.
Last Step : draw the route from start point to end point
As a route is also a kind of form, you must the appropriate layer in the order to make it visible on the map : for that, we will use the Polyline Layer from flutter_map plugin.
The polyline layer requires a polylines parameter that takes the final list of point of type List<LatLng>.
Let’s add a floating button that will execute the function when it is pressed. This is final code :
Code Source of the project
You can find the code source of this project here.