vietmap_flutter_navigation 1.4.1

A Flutter plugin for find a route and navigating user using Vietmap api and vietmap_flutter_gl. Supports Android and iOS.

Vietmap Flutter Navigation

Contact vietmap.vn to register a valid key.

Getting started

Add library to pubspec.yaml file

  vietmap_flutter_navigation: latest_version

Check the latest version at https://pub.dev/packages/vietmap_flutter_navigation

or run this command in the terminal to add the library to the project:

  flutter pub add vietmap_flutter_navigation

Android config

Add the below code to the build.gradle (project) file at path android/build.gradle

 maven { url "https://jitpack.io" }

at the repositories block

  allprojects {
      repositories {
          google()
          mavenCentral()
          maven { url "https://jitpack.io" }
      }
  }

Upgrade the minSdkVersion to a minimum is 24 in the build.gradle (app) file, at path android/app/build.gradle

  minSdkVersion 24

iOS config

Add the below codes to the Info.plist file. Replace your API key to YOUR_API_KEY_HERE

  <key>VietMapURL</key>
  <string>https://maps.vietmap.vn/api/maps/light/styles.json?apikey=YOUR_API_KEY_HERE</string>
  <key>VietMapAPIBaseURL</key>
  <string>https://maps.vietmap.vn/api/navigations/route/</string>
  <key>VietMapAccessToken</key>
  <string>YOUR_API_KEY</string>  
  <key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
  <string>Your request location description</string>
  <key>NSLocationAlwaysUsageDescription</key>
  <string>Your request location description</string>
  <key>NSLocationWhenInUseUsageDescription</key>
  <string>Your request location description</string>

Upgrade min ios version to 12.0 in the Podfile (iOS) file, at path ios/Podfile (uncomment the line below)

  platform :ios, '12.0' 

• If the project shows an issue when upgrading to the new version when running the pod install command, please remove the ios/.symlinks, ios/Pods folder, and Podfile.lock files, then run the pod install --repo-update command to update the pod file.

Main characteristics

Define necessary variables

  // Define the map options
  late MapOptions _navigationOption;

  final _vietmapNavigationPlugin = VietmapNavigationPlugin();

  List<WayPoint> wayPoints = [
    WayPoint(name: "origin point", latitude: 10.759091, longitude: 106.675817),
    WayPoint(
        name: "destination point", latitude: 10.762528, longitude: 106.653099)
  ];
  /// Display the guide instruction image to the next turn
  Widget instructionImage = const SizedBox.shrink();

  Widget recenterButton = const SizedBox.shrink();
  
  /// RouteProgressEvent contains the route information, current location, next turn, distance, duration,...
  /// This variable is update real time when the navigation is started
  RouteProgressEvent? routeProgressEvent;
  
  /// The controller to control the navigation, such as start, stop, recenter, overview,... 
  MapNavigationViewController? controller;

Add the initialize function to initState function to initialize the map options

  @override
  void initState() {
    super.initState();
    initialize();
  }

  Future<void> initialize() async {
    if (!mounted) return;
    _navigationOption = _vietmapNavigationPlugin.getDefaultOptions();
    /// set the simulate route to true to test the navigation without the real location
    _navigationOption.simulateRoute = false;

    _navigationOption.apiKey =
        'YOUR_API_KEY_HERE';
    _navigationOption.mapStyle =
        "https://maps.vietmap.vn/api/maps/light/styles.json?apikey=YOUR_API_KEY_HERE";

    _vietmapNavigationPlugin.setDefaultOptions(_navigationOption);
  }

• Replace your apikey which is provided by VietMap to YOUR_API_KEY_HERE tag to the application work normally

Display the Navigation view, include map view, route and navigation

  NavigationView(
    mapOptions: _navigationOption,
    onMapCreated: (controller) {
      _controller = controller;
    },
    onRouteProgressChange: (RouteProgressEvent routeProgressEvent) {
      setState(() {
        this.routeProgressEvent = routeProgressEvent;
      });
      _setInstructionImage(routeProgressEvent.currentModifier,
          routeProgressEvent.currentModifierType);
    },
  ),

Set instruction icon from routeProgress data.

  _setInstructionImage(String? modifier, String? type) {
    if (modifier != null && type != null) {
      List<String> data = [
        type.replaceAll(' ', '_'),
        modifier.replaceAll(' ', '_')
      ];
      String path = 'assets/navigation_symbol/${data.join('_')}.svg';
      setState(() {
        instructionImage = SvgPicture.asset(path, color: Colors.white);
      });
    }
  }

We use flutter_svg to display the svg image.

Instruction icon here, copy and paste to your project.

Figma design for the instruction here

Add banner instructions to display icon, route name, next turn guide,...

  BannerInstructionView(
    routeProgressEvent: routeProgressEvent,
    instructionIcon: instructionImage,
  )

Add the Bottom view, which contains the overview route, recenter, and the stop navigation button.

  BottomActionView(
    recenterButton: recenterButton,
    controller: _controller,
    onOverviewCallback: _showRecenterButton,
    onStopNavigationCallback: _onStopNavigation,
    routeProgressEvent: routeProgressEvent
  )

Add the dispose function for the navigation controller

  @override
  void dispose() {
    _controller?.dispose();
    super.dispose();
  }

Useful function

  /// Find a new route between two locations, 
  /// waypoint1 is origin, waypoint2 is destination.
  _controller?.buildRoute(wayPoints: <Waypoint>[waypoint1,waypoint2]);

  /// Start navigation, call after the buildRoute have a response.
  _controller?.startNavigation();


  /// Find route and start when the api response at least 1 route
  _controller?.buildAndStartNavigation(
      wayPoints: wayPoints: <Waypoint>[waypoint1,waypoint2],
      profile: DrivingProfile.drivingTraffic);
  
  /// recenter to the navigation
  _controller?.recenter();

  /// Overview the route
  _controller?.overview();

  /// Turn on/off the navigation voice guide
  _controller?.mute();

  /// Stop the navigation
  _controller?.finishNavigation();

Add a marker to the map

We addImageMarkers function to add multiple marker to the map

• Add a marker from assets image

Marker from assets image

  /// Add a marker to the map
  List<Marker>? markers = await _controller?.addImageMarkers([
    Marker(
        imagePath: 'assets/50.png',
      latLng: const LatLng(10.762528, 106.653099)),
    Marker(
        imagePath: 'assets/40.png',
        latLng: const LatLng(10.762528, 106.753099)),
  ]);

Troubleshooting

• We strongly recommend you call the _controller?.buildRouteAndStartNavigation() in a button or onMapRendered callback, which is called when the map is rendered successfully.

  onMapRendered: () {
    _controller?.buildAndStartNavigation(
    wayPoints: wayPoints: <Waypoint>[waypoint1,waypoint2],
    profile: DrivingProfile.drivingTraffic);  
  }

Demo code here

We have a demo app with flutter_bloc and clean architecture pattern here. Please clone and run the app to see how it works.

You can also download the example app to see how it works.

Note: Replace apikey which is provided by VietMap to all YOUR_API_KEY_HERE tag to the application work normally

Email us: [e-mail]

Vietmap API and price here

Contact for support

Vietmap API document here

Have a bug to report? Open an issue. If possible, include a full log and information which shows the issue.

Have a feature request? Open an issue. Tell us what the feature should do and why you want the feature.