Turn by Turn navigation with Mapbox

Let’s explore the powerful Navigation SDKs of Mapbox

In this article, we will look at the Mapbox Search APIs, Navigation SDK, and Geocoding APIs while simultaneously creating a complete Uber app-like experience.

Love videos and find articles harder to read? I got you covered.😇 Watch the video below for a complete tutorial.

In my last blog, we discussed Mapbox as a Google Maps Platform alternative and built a Flutter application using Directions API. I highly encourage you to give it a read.

Navigation with Mapbox for Flutter apps

Project Description

There are four significant screens when we look at the Uber application from a layman’s perspective. We also have tons of other features in place, but we won’t consider all of them for our demonstration.

1. Home Screen — where you can see your location and previous trips
2. Prepare Ride Screen — where you can choose source and destination
3. Review Ride Screen — where you choose your cabs and review the trip
4. Start Ride — where you see a turn-by-turn navigation

Visual of Mapbox navigation taken from the official website

To translate this into Mapbox terminologies, we need to use the Maps SDK, Search and Geocoding APIs, Directions API, and Navigation SDKs in these screens. Here are the final screens of the application. We have thrown in a splash and a rate ride screen too. 😇

Let’s work on each of the screens and see how we can build them. You will find the source code at the end of this blog, but make sure you read to understand how we have implemented each screen.

Home Screen

The home screen looks very simple. We need to use the Maps SDK and the Reverse Geocoding API to generate the current address and show the location on the Map. Since we are in Flutter, we can use the fantastic package of Mapbox GL for maps SDK. For reverse geocoding, you can use Dio and request the mapbox.places endpoint. A typical request URL looks like this —

https://api.mapbox.com/geocoding/v5/mapbox.places/-73.989,40.733.json?access_token=YOUR_PUBLIC_ACCESS_TOKEN

Prepare Ride Screen

This is where the fun begins. Mapbox provides forward Geocoding APIs that can be used as Search APIs and are damn powerful. The first step would be to go ahead and check out the Geocoding API playground. Tune your search settings with optional parameters like proximity, language, and country for improved results. Using the types parameter, we can filter to restrict returned features to the desired place type such as a place, postcode, address, etc.

Geocoding API | Playground

Use Dio again to make a request, and after extracting the features from the response and doing a little bit of state management with your favorite tool, you should be able to finish your second screen.

Review Ride Screen

In this screen, we can use the Directions API and generate a polyline between the two endpoints, the pickup, and the destination. We discussed it in great detail in my previous blog, so you can revisit that if you need guidance. We can also get the distance and drop-off time for the shortest route, keeping in mind the traffic.

Note that the response of directions API gives you the time to be taken. To convert that into the drop-off time, use the following function after importing the intl package.

import 'package:intl/intl.dart';

String getDropOffTime(num duration) {
  int minutes = (duration / 60).round();
  int seconds = (duration % 60).round();
  DateTime tripEndDateTime =
      DateTime.now().add(Duration(minutes: minutes, seconds: seconds));
  String dropOffTime = DateFormat.jm().format(tripEndDateTime);
  return dropOffTime;
}

Start Ride

The most essential part of the application is the turn by turn navigation, which makes use of the following package —

flutter_mapbox_navigation | Flutter Package

In short, we have to define a bunch of variables such as instructions, directions, options, distanceRemaining, etc. and a bunch of boolean flags such as isMultiStop, hasArrived, isNavigating to govern the trip events. You will have voice and banner instructions, route simulation, realtime traffic and many more features.

Other pages

And for the splash screen and rating they are mostly UI pages written in Flutter, though the SplashScreen does a bunch of asynchronous API calls and stores essential data to SharedPreferences.

Conclusion

Turn by turn navigation is a great feature available in Mapbox. We can build a complete range of products — from fully customized solutions to in-app navigation with smart defaults in minutes. We have covered most of the basic features available inside Mapbox and seen its action with real-life examples with this blog.

You can find the complete source code for the blog (and the video) in this Github repository.

GitHub - Imperial-lord/mapbox-flutter: A repository to demonstrate the use of Mapbox - it's Maps…

Also, you can connect with me on LinkedIn here —

AB Satyaprakash - App Development Head - Student's Web Committee IITG | LinkedIn

And as always, Happy Hacking!!! 😄