vietmap_flutter_navigation 1.2.3

A Flutter plugin for find a route and navigating user using Vietmap api and Vietmap flutter_map gl. Supports Android, 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" }
    }
}

iOS config

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

	<key>VietMapAPIBaseURL</key>
	<string>https://maps.vietmap.vn/api/navigations/route/</string>
	<key>VietMapAccessToken</key>
	<string>YOUR_API_KEY_HERE</string>
	<key>VietMapURL</key>
	<string>https://maps.vietmap.vn/api/maps/light/styles.json?apikey=YOUR_API_KEY_HERE</string>
	<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
	<string>This app requires location permission to working normally</string>
	<key>NSLocationAlwaysUsageDescription</key>
	<string>This app requires location permission to working normally</string>
	<key>NSLocationWhenInUseUsageDescription</key>
	<string>This app requires location permission to working normally</string>

Main characteristics

  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? routeProgressEvent;

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

  Future<void> initialize() async {
    if (!mounted) return;
    _navigationOption = _vietmapNavigationPlugin.getDefaultOptions();
    _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);
  }

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

Add banner instruction to display icon, route name,...

            BannerInstructionView(
              routeProgressEvent: routeProgressEvent,
              instructionIcon: instructionImage,
            )

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

Instruction icon here, copy and paste to your project.

Figma design here

Add the Bottom view, which contains the overview route, recenter and 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 provided 2 ways to add a marker to the map

• Add a marker from assets image
• Add a marker from flutter widget

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

Marker from Flutter widget

Currently, we use screenshot library to convert your widget to an binary image then show it to the map

    List<MarkerWidget>? markers =
        await _controller?.addWidgetMarkers([
      MarkerWidget(
        child: Container(
          width: 50,
          height: 50,
          color: Colors.red,
          child: const Icon(
            Icons.abc,
            color: Colors.white,
          ),
        ),
        latLng: const LatLng(10.759091, 106.675817),
      ),
      MarkerWidget(
        child: Container(
          width: 50,
          height: 50,
          color: Colors.red,
          child: const Icon(
            Icons.abc,
            color: Colors.white,
          ), 
        ),
        latLng: const LatLng(10.762528, 106.653099),
      )
    ]);

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

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.

Tài liệu tiếng Việt