mapbox_navigation

Description:

mapbox navigation

mapbox_navigation #
A Flutter plugin for MapBox's Navigation SDK, NavigationView & Navigation services. (Android)
iOS Support comming soon.

Overview #
This plugin is developed to use advance features of MapBox for Flutter apps. This plugin provides all the basic features of MapBox along with some useful callbacks.



Generate Route


Built-in Navigation


Embedded Navigation



Features #

MapBox Map View UI
MapBox's Navigation UI
Add markers on Map
Move camera to location on Map
Draw route on Map
Start Navigation (Built-In)
Start Navigation (Embedded)
Simulate Route Option
Listen to Navigation Events
Listen to User Off Route Event
Listen to Fast Route Available
Listen to Voice Events
Listen to Banner Messages
Listen to Route Progress Events (Distance, Duration, Travelled & more)
Listen to Mile stone Events
Control Camera zoom, tile, bearing

Install #
In your pubspec.yaml
dependencies:
mapbox_navigation: [LATEST_VERSION]
copied to clipboard
import 'package:mapbox_navigation/mapbox_navigation.dart';
copied to clipboard
MapViewController controller;
var mapBox = MapboxNavigation();

@override
void initState() {
super.initState();
mapBox.init();

mapBox.getMapBoxEventResults().onData((data) {
print("Event: ${data.eventName}, Data: ${data.data}");

var event = MapBoxEventProvider.getEventType(data.eventName);

if (event == MapBoxEvent.route_building) {

print("Building route..");

} else if (event == MapBoxEvent.route_build_failed) {

print("Route building failed.");

} else if (event == MapBoxEvent.route_built) {
var routeResponse = MapBoxRouteResponse.fromJson(jsonDecode(data.data));

controller.getFormattedDistance(routeResponse.routes.first.distance)
.then((value) => print("Route Distance: $value"));

controller.getFormattedDuration(routeResponse.routes.first.duration)
.then((value) => print("Route Duration: $value"));

} else if (event == MapBoxEvent.progress_change) {


var progressEvent = MapBoxProgressEvent.fromJson(jsonDecode(data.data));

controller.getFormattedDistance(progressEvent.legDistanceRemaining)
.then((value) => print("Leg Distance Remaining: $value"));

controller.getFormattedDistance(progressEvent.distanceTraveled)
.then((value) => print("Distance Travelled: $value"));

controller.getFormattedDuration(progressEvent.legDurationRemaining)
.then((value) => print("Leg Duration Remaining: $value"));

print(
"Voice Instruction: ${progressEvent.voiceInstruction},"
"Banner Instruction: ${progressEvent.bannerInstruction}");

} else if (event == MapBoxEvent.milestone_event) {

var mileStoneEvent = MapBoxMileStoneEvent.fromJson(jsonDecode(data.data));

controller.getFormattedDistance(mileStoneEvent.distanceTraveled)
.then((value) => print("Distance Travelled: $value"));

} else if (event == MapBoxEvent.speech_announcement) {

var speechEvent = MapBoxEventData.fromJson(jsonDecode(data.data));
print("Speech Text: ${speechEvent.data}");

} else if (event == MapBoxEvent.banner_instruction) {

var bannerEvent = MapBoxEventData.fromJson(jsonDecode(data.data));
print("Banner Text: ${bannerEvent.data}");

} else if (event == MapBoxEvent.navigation_cancelled) {


} else if (event == MapBoxEvent.navigation_finished) {


} else if (event == MapBoxEvent.on_arrival) {


} else if (event == MapBoxEvent.user_off_route) {

var locationData = MapBoxLocation.fromJson(jsonDecode(data.data));
print("User has off-routed: Location: ${locationData.toString()}");

} else if (event == MapBoxEvent.faster_route_found) {

var routeResponse = MapBoxRouteResponse.fromJson(jsonDecode(data.data));

controller.getFormattedDistance(routeResponse.routes.first.distance)
.then((value) => print("Faster route found: Route Distance: $value"));

controller.getFormattedDuration(routeResponse.routes.first.duration)
.then((value) => print("Faster route found: Route Duration: $value"));
}
});
}

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('MapBox Demo'),
),
body: MapBoxMapView(onMapViewCreated: _onMapViewCreated)
),
);
}

void _onMapViewCreated(MapViewController controller) async {
this.controller = controller;
await controller.showMap(MapBoxOptions(
initialLat: 33.569126,
initialLong: 73.1231471,
enableRefresh: false,
alternatives: true,
zoom: 13.0,
tilt: 0.0,
bearing: 0.0,
clientAppName: "MapBox Demo",
voiceInstructions: true,
bannerInstructions: true,
continueStraight: true,
profile: "driving-traffic",
language: "en",
testRoute: "",
debug: true));
}
copied to clipboard
Android #
Step 1:
Change your Android Project's MainActivity class to following:
import androidx.annotation.NonNull
import com.umair.mapbox_navigation.MapboxNavigationPlugin
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugins.GeneratedPluginRegistrant


class MainActivity : FlutterActivity() {

companion object {

@JvmStatic
var flutterEngineInstance: FlutterEngine? = null
}

override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) {
GeneratedPluginRegistrant.registerWith(flutterEngine)
flutterEngineInstance = flutterEngine
}

override fun onResume() {
super.onResume()

flutterEngineInstance?.let {
MapboxNavigationPlugin.registerWith(it, getString(R.string.access_token))
}
}

override fun onDestroy() {
flutterEngine?.platformViewsController?.onFlutterViewDestroyed()
super.onDestroy()
}
}
copied to clipboard
Step 2:
Add your MapBox's token on strings.xml file:
<string name="access_token" translatable="false">YOUR_ACCESS_TOKEN_HERE</string>
copied to clipboard
Flutter #
Build Route: #
This will build route based on origin & destination values provided.
await controller.buildRoute(
originLat: 33.569126,
originLong: 73.1231471,
destinationLat: 33.6392443,
destinationLong: 73.278358,
zoom: 9.5
);
copied to clipboard
Start Navigation (Built-In): #
This will start navigation based on route fetched using 'buildRoute' method.
await controller.startNavigation(shouldSimulateRoute: true);
copied to clipboard
Start Navigation (Embedded): #
This will start navigation on the MapBox's MapView without opening seperate screen.
await controller.startEmbeddedNavigation(
zoom: 18.0,
tilt: 90.0,
bearing: 50.0,
shouldSimulateRoute: false);
copied to clipboard
Add Marker: #
This will add marker on provided location.
await controller.addMarker(
latitude: 33.569126,
longitude: 73.1231471);
copied to clipboard
Move Camera: #
This will move camera to provided location.
await controller.moveCameraToPosition(
latitude: 33.569126,
longitude: 73.1231471);
copied to clipboard
Format Distance: #
This will return formatted distance in meters/Kilometers.
controller.getFormattedDistance(88777.99)
.then((value) => print("Distance: $value"));
copied to clipboard
Format Duration: #
This will return formatted duration hh/mm/ss.
controller.getFormattedDuration(88777.99)
.then((value) => print("Duration: $value"));
copied to clipboard
MapBox Events: #
MapBox events from 'MapBoxEvent' will be returned in the following stream along with data. Data will be a JSON String.
enum MapBoxEvent {
map_ready,
route_built,
progress_change,
user_off_route,
milestone_event,
navigation_running,
navigation_cancelled,
navigation_finished,
faster_route_found,
speech_announcement,
banner_instruction,
on_arrival,
failed_to_reroute,
reroute_along
}

mapBox.getMapBoxEventResults().onData((data) {
print(
"Event: ${data.eventName} Data: ${data.data}");
});
copied to clipboard

Author #
MapBox Navigation plugin is developed by Umair Adil. You can email me at [email protected] for any queries.