No Google Maps Again: Creating a Flutter Map with OSRM

Hi everyone! 🖖

A few days ago, I embarked on a project for my company called More Than Code that required integrating a map to allow users to access their historical locations and paths. My first instinct was to use Google Maps with the Router API, but I discovered a more free alternative that I found quite satisfying.

In this post, I’ll show you how to achieve similar results by integrating flutter_map with OSRM (Open Street Maps Routing Machine).

Flutter Map 🗺️

flutter_map is a versatile mapping package for Flutter and is incredibly straightforward to implement. Here’s a step-by-step guide to building a map with FlutterMap.

Setting Up the Map

First, build the FlutterMap widget:

This setup uses Layers, which need to be included in the children of the FlutterMap widget.

The main layer type used in these maps is TileLayer. The TileLayer displays tiles, or square segments, of the map. This example uses OpenStreetMap (OSM) data to provide detailed and up-to-date geographic information.

getting something like this:

Centering the Map on the Device’s Location

📢 This part may be unnecessary, but it is good practice to understand the package better. So if you don’t want to implement this part, jump to the OSRM implementation.

Next, I want to center the map on the device’s location and add a marker. This requires the geolocator package to get the device’s location and handle permissions.

Ensure to configure the library for your platform, particularly for Android. If you encounter an error like this:

You may need to modify setting.gradle with the specified version.

Checking Permissions and Getting Location

Set up a small service to check permissions and obtain the device’s location:

In my case, I used a FutureBuilder on the HomePage to check the status of the permissions.

If everything works, we should see the application asking for location permissions.

⚠️ I decided to move the initial code, where we initialized FlutterMap, to a new widget called MapWidget.

Once permissions are granted, we render the MapWidget. Using GeolocatorServices, we obtain the device’s current location and set it as the initialCenter in the MapOptions provided by FlutterMap. Initially, the map will be centered on the desired location but viewed from the highest point. To fix this, we can add zoom functionality by setting the initialZoom attribute to 16.

Get Mauro Beltrame’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Our MapWidget should look something like this at this point.

We still need to add an icon or marker to indicate precisely where the device is located. For this, we will use the MarkerLayer and add it to the list of children of FlutterMap, leaving our code as follows:

OSRM Implementation 🗺️

To implement routing functionality, we’ll utilize the OSRM API. While OSRM offers multiple methods for routing implementation, we’ll opt for the REST API for its simplicity.

At MTC, we commonly use Riverpod and DIO for our REST clients. To accelerate development, I reused our latest implementation of these tools and focused on integrating the map functionality. However, you can use any method you prefer to invoke the API.

I’ll share this part of the code at the end of the post, so no worries 😉. If you want more details about this implementation, let us know in the comments, and we can create a dedicated post explaining it.

Once our API client is ready, the next step is to understand how to invoke the service and handle the response.

I must admit, this part was a bit tricky 😅.

To get the route between various points, we need to invoke an endpoint like this:

Changing longitude and latitude points for ours.

In the response, you’ll find a value called geometry, which might seem overwhelming 😅. Fortunately, we only need the geometry value contained within the steps field.

This encoded string contains all the points necessary to display the path on the map between our relevant locations. To utilize this data, we must first decode the string. For this task, we’ll use the flutter_polyline_points package to parse the response, like this:

Next, we need to add a new layer to the FlutterMap widget: a PolylineLayer. This layer enables us to draw lines and shapes using latitude and longitude points. By utilizing the points provided by OSRM, we can render the desired path on the map.

And here’s the result:

And that’s it!

Feel free to explore the complete code at https://github.com/Mauro124/flutter_map_osrm/.

Thank you for coming this far. 😊

See you in the next post! 👋🖖

References

• https://docs.fleaflet.dev/getting-started/installation
• https://project-osrm.org/docs/v5.24.0/api/?language=cURL#general-options
• https://github.com/Project-OSRM/osrm-backend/blob/HEAD/docs/http.md
• https://pub.dev/packages/geolocator
• https://pub.dev/packages/flutter_polyline_points
• https://afi.io/blog/osrm-route-api-free-directions-api-with-turn-by-turn-directions-and-polylines/

Do you want to develop an app in Flutter?

Learn more about us at https://mtc-flutter.com/

Follow us on Instagram @mtc.morethancode