mapbox_navigation_flutter 0.1.4

Add Turn By Turn Navigation to Your Flutter Application Using MapBox. Never leave your app when you need to navigate your users to a location.

mapbox_navigation_flutter

Add Turn By Turn Navigation to Your Flutter Application Using MapBox. Never leave your app when you need to navigate your users to a location.

Features

• A full-fledged turn-by-turn navigation UI for Flutter that’s ready to drop into your application
• Professionally designed map styles for daytime and nighttime driving
• Worldwide driving, cycling, and walking directions powered by open data and user feedback
• Traffic avoidance and proactive rerouting based on current conditions in over 55 countries
• Natural-sounding turn instructions powered by Amazon Polly (no configuration needed)
• Support for over two dozen languages

IOS Configuration

⚠️ iOS Compatibility Note: There are known Swift compiler compatibility issues with newer versions of Mapbox SDK. These have since been fixed

1. Go to your Mapbox account dashboard and create an access token that has the DOWNLOADS:READ scope. PLEASE NOTE: This is not the same as your production Mapbox API token. Make sure to keep it private and do not insert it into any Info.plist file.

To add your Mapbox access token to the iOS Info.plist file, you can include it as follows:

<key>MBXAccessToken</key>
<string>sk.eyXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</string>

1. Mapbox APIs and vector tiles require a Mapbox account and API access token. In the project editor, select the application target, then go to the Info tab. Under the “Custom iOS Target Properties” section, set MBXAccessToken to your access token. You can obtain an access token from the Mapbox account page.

2. In order for the SDK to track the user’s location as they move along the route, set NSLocationWhenInUseUsageDescription to:

   Shows your location on the map and helps improve OpenStreetMap.

3. Users expect the SDK to continue to track the user’s location and deliver audible instructions even while a different application is visible or the device is locked. Go to the Capabilities tab. Under the Background Modes section, enable “Audio, AirPlay, and Picture in Picture” and “Location updates”. (Alternatively, add the audio and location values to the UIBackgroundModes array in the Info tab.)

Android Configuration

1. Mapbox APIs and vector tiles require a Mapbox account and API access token. Add a new resource file called mapbox_access_token.xml with it's full path being <YOUR_FLUTTER_APP_ROOT>/android/app/src/main/res/values/mapbox_access_token.xml. Then add a string resource with name "mapbox_access_token" and your token as it's value as shown below. You can obtain an access token from the Mapbox account page.

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
    <string name="mapbox_access_token" translatable="false" tools:ignore="UnusedResources">ADD_MAPBOX_ACCESS_TOKEN_HERE</string>
</resources>

2. Add the following permissions to the app level Android Manifest

<manifest>
    ...
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    ...
</manifest>

3. Add the MapBox Downloads token with the downloads:read scope to your gradle.properties file in Android folder to enable downloading the MapBox binaries from the repository. To secure this token from getting checked into source control, you can add it to the gradle.properties of your GRADLE_HOME which is usually at $USER_HOME/.gradle for Mac. This token can be retrieved from your MapBox Dashboard. You can review the Token Guide to learn more about download tokens

MAPBOX_DOWNLOADS_TOKEN=sk.XXXXXXXXXXXXXXX

After adding the above, your gradle.properties file may look something like this:

org.gradle.jvmargs=-Xmx1536M
android.useAndroidX=true
android.enableJetifier=true
MAPBOX_DOWNLOADS_TOKEN=sk.epe9nE9peAcmwNzKVNqSbFfp2794YtnNepe9nE9peAcmwNzKVNqSbFfp2794YtnN.-HrbMMQmLdHwYb8r

4. Update MainActivity.kt to extends FlutterFragmentActivity vs FlutterActivity. Otherwise you'll get Caused by: java.lang.IllegalStateException: Please ensure that the hosting Context is a valid ViewModelStoreOwner.

//import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.android.FlutterFragmentActivity

class MainActivity: FlutterFragmentActivity() {
}

5. Add implementation platform("org.jetbrains.kotlin:kotlin-bom:1.8.0") to android/app/build.gradle

Usage

Set Default Route Options (Optional)

    MapBoxNavigation.instance.setDefaultOptions(MapBoxOptions(
                     initialLatitude: 36.1175275,
                     initialLongitude: -115.1839524,
                     zoom: 13.0,
                     tilt: 0.0,
                     bearing: 0.0,
                     enableRefresh: false,
                     alternatives: true,
                     voiceInstructionsEnabled: true,
                     bannerInstructionsEnabled: true,
                     allowsUTurnAtWayPoints: true,
                     mode: MapBoxNavigationMode.drivingWithTraffic,
                     mapStyleUrlDay: "https://url_to_day_style",
                     mapStyleUrlNight: "https://url_to_night_style",
                     units: VoiceUnits.imperial,
                     simulateRoute: true,
                     language: "en"))

Listen for Events

  MapBoxNavigation.instance.registerRouteEventListener(_onRouteEvent);
  Future<void> _onRouteEvent(e) async {

        _distanceRemaining = await _directions.distanceRemaining;
        _durationRemaining = await _directions.durationRemaining;
    
        switch (e.eventType) {
          case MapBoxEvent.progress_change:
            var progressEvent = e.data as RouteProgressEvent;
            _arrived = progressEvent.arrived;
            if (progressEvent.currentStepInstruction != null)
              _instruction = progressEvent.currentStepInstruction;
            break;
          case MapBoxEvent.route_building:
          case MapBoxEvent.route_built:
            _routeBuilt = true;
            break;
          case MapBoxEvent.route_build_failed:
            _routeBuilt = false;
            break;
          case MapBoxEvent.navigation_running:
            _isNavigating = true;
            break;
          case MapBoxEvent.on_arrival:
            _arrived = true;
            if (!_isMultipleStop) {
              await Future.delayed(Duration(seconds: 3));
              await _controller.finishNavigation();
            } else {}
            break;
          case MapBoxEvent.navigation_finished:
          case MapBoxEvent.navigation_cancelled:
            _routeBuilt = false;
            _isNavigating = false;
            break;
          default:
            break;
        }
        //refresh UI
        setState(() {});
      }

Begin Navigating

    final cityhall = WayPoint(name: "City Hall", latitude: 42.886448, longitude: -78.878372);
    final downtown = WayPoint(name: "Downtown Buffalo", latitude: 42.8866177, longitude: -78.8814924);

    var wayPoints = List<WayPoint>();
    wayPoints.add(cityHall);
    wayPoints.add(downtown);
    
    await MapBoxNavigation.instance.startNavigation(wayPoints: wayPoints);

Screenshots

iOS View	Android View

Embedding Navigation View

Declare Controller

      MapBoxNavigationViewController _controller;

Add Navigation View to Widget Tree

            Container(
                color: Colors.grey,
                child: MapBoxNavigationView(
                    options: _options,
                    onRouteEvent: _onRouteEvent,
                    onCreated:
                        (MapBoxNavigationViewController controller) async {
                      _controller = controller;
                    }),
              ),

Build Route

        var wayPoints = List<WayPoint>();
                            wayPoints.add(_origin);
                            wayPoints.add(_stop1);
                            wayPoints.add(_stop2);
                            wayPoints.add(_stop3);
                            wayPoints.add(_stop4);
                            wayPoints.add(_origin);
                            _controller.buildRoute(wayPoints: wayPoints);

Start Navigation

    _controller.startNavigation();

Additional IOS Configuration

Add the following to your info.plist file

    <dict>
        ...
        <key>io.flutter.embedded_views_preview</key>
        <true/>
        ...
    </dict>

Embedding Navigation Screenshots

Embedded iOS View	Embedded Android View

iOS Troubleshooting

Swift Compiler Errors

If you encounter Swift compiler errors like:

Swift Compiler Error (Xcode): 'Expression' is ambiguous for type lookup in this context

This is a known issue with newer Mapbox SDK versions. Here are the solutions:

Solution 1: Use a Compatible Mapbox SDK Version

The plugin uses Mapbox SDK 2.3.2 by default. If you need to use a different version, you can override it in your ios/Podfile:

post_install do |installer|
  installer.pods_project.targets.each do |target|
    if target.name.include?('MapboxNavigation') || target.name.include?('MapboxMaps')
      target.build_configurations.each do |config|
        config.build_settings['SWIFT_TREAT_WARNINGS_AS_ERRORS'] = 'NO'
        config.build_settings['GCC_TREAT_WARNINGS_AS_ERRORS'] = 'NO'
        config.build_settings['SWIFT_SUPPRESS_WARNINGS'] = 'YES'
      end
    end
  end
end

Solution 2: Update iOS Deployment Target

Ensure your iOS deployment target is set to iOS 12.0 or higher:

platform :ios, '12.0'

Solution 3: Clean and Rebuild

cd ios
rm -rf Pods Podfile.lock
pod install
cd ..
flutter clean
flutter pub get
flutter build ios

Common Issues

1. Mapbox Access Token: Ensure you have set up your Mapbox access token correctly
2. CocoaPods Installation: Make sure CocoaPods is properly installed and updated
3. Xcode Version: Use Xcode 12.0 or higher for best compatibility

To Do

• [DONE] Android Implementation
• [DONE] Add more settings like Navigation Mode (driving, walking, etc)
• [DONE] Stream Events like relevant navigation notifications, metrics, current location, etc.
• [DONE] Embeddable Navigation View
• Offline Routing