mapbox_navigation 1.0.4
mapbox_navigation: ^1.0.4

Flutter Android iOS

A Flutter plugin for MapBox's Navigation SDK, NavigationView & Navigation services.

mapbox_navigation #

A Flutter plugin for MapBox's Navigation SDK, NavigationView & Navigation services. (Android)

iOS Support comming soon.

pub package

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
1
Built-in Navigation
2
Embedded Navigation
3

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]
    import 'package:mapbox_navigation/mapbox_navigation.dart';
    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));
    }

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()
        }
    }
Step 2:

Add your MapBox's token on strings.xml file:

    <string name="access_token" translatable="false">YOUR_ACCESS_TOKEN_HERE</string>

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
    );

Start Navigation (Built-In): #

This will start navigation based on route fetched using 'buildRoute' method.

    await controller.startNavigation(shouldSimulateRoute: true);

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);

Add Marker: #

This will add marker on provided location.

    await controller.addMarker(
        latitude: 33.569126, 
        longitude: 73.1231471);

Move Camera: #

This will move camera to provided location.

    await controller.moveCameraToPosition(
            latitude: 33.569126, 
            longitude: 73.1231471);

Format Distance: #

This will return formatted distance in meters/Kilometers.

    controller.getFormattedDistance(88777.99)
            .then((value) => print("Distance: $value"));

Format Duration: #

This will return formatted duration hh/mm/ss.

    controller.getFormattedDuration(88777.99)
            .then((value) => print("Duration: $value"));

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}");
    });

Author #

MapBox Navigation plugin is developed by Umair Adil. You can email me at m.umair.adil@gmail.com for any queries.

1
likes
80
pub points
55%
popularity

Publisher

umairadil.com

A Flutter plugin for MapBox's Navigation SDK, NavigationView & Navigation services.

Repository (GitHub)
View/report issues

Documentation

API reference

License

Apache 2.0 (LICENSE)

Dependencies

flutter

More

Packages that depend on mapbox_navigation