Draw Route Line

This example shows:

  1. Draw Route Line

    1. await navNextBillionMap.drawRoute(routes)
  2. Toggle Alternative Routes Visibility

    1. navNextBillionMap.toggleAlternativeVisibilityWith(value)
  3. Toggle Route Duration Symbol Visibility

    1. navNextBillionMap.toggleDurationSymbolVisibilityWith(value)
Android snapshot iOS snapshot

For all code examples, refer to Flutter Navigation Code Example

DrawRouteLine view source

1import 'dart:math';
2
3import 'package:flutter/material.dart';
4import 'package:nb_maps_flutter/nb_maps_flutter.dart';
5import 'package:nb_navigation_flutter/nb_navigation_flutter.dart';
6
7class DrawRouteLine extends StatefulWidget {
8  static const String title = "Draw Route Line";
9
10  
11  DrawRouteLineState createState() => DrawRouteLineState();
12}
13
14class DrawRouteLineState extends State<DrawRouteLine> {
15  NextbillionMapController? controller;
16  List<DirectionsRoute> routes = [];
17  late NavNextBillionMap navNextBillionMap;
18
19  LatLng origin = LatLng( 17.457302037173775, 78.37463792413473);
20  LatLng dest = LatLng(17.466320809357967, 78.3726774987914);
21
22  bool enableAlternativeRoutes = true;
23  bool enableRouteDurationSymbol = true;
24
25  void _onMapCreated(NextbillionMapController controller) {
26    this.controller = controller;
27  }
28
29  void _onStyleLoaded() {
30    if (controller != null) {
31      navNextBillionMap = NavNextBillionMap(controller!);
32    }
33  }
34
35  _onMapClick(Point<double> point, LatLng coordinates) {
36    navNextBillionMap.addRouteSelectedListener(coordinates, (selectedRouteIndex) {
37      if (routes.isNotEmpty && selectedRouteIndex != 0) {
38        var selectedRoute = routes[selectedRouteIndex];
39        routes.removeAt(selectedRouteIndex);
40        routes.insert(0, selectedRoute);
41        setState(() {
42          routes = routes;
43        });
44        navNextBillionMap.drawRoute(routes);
45      }
46    });
47  }
48
49  
50  void initState() {
51    super.initState();
52  }
53
54  
55  Widget build(BuildContext context) {
56    var screenHeight = MediaQuery.of(context).size.height;
57
58    return Scaffold(
59      appBar: AppBar(
60        title: const Text(DrawRouteLine.title),
61      ),
62      body: SingleChildScrollView(
63        child: Column(
64          children: [
65            Container(
66              constraints: BoxConstraints(maxHeight: screenHeight * 0.6),
67              child: NBMap(
68                onMapCreated: _onMapCreated,
69                initialCameraPosition: CameraPosition(
70                  target: LatLng(origin.latitude, origin.longitude),
71                  zoom: 13.0,
72                ),
73                onStyleLoadedCallback: _onStyleLoaded,
74                onMapClick: _onMapClick,
75              ),
76            ),
77            _buttonWidget(),
78            _switchButton(),
79          ],
80        ),
81      ),
82    );
83  }
84
85  void _fetchRoute() async {
86    RouteRequestParams requestParams = RouteRequestParams(
87      origin: origin,
88      destination: dest,
89      alternatives: true,
90      mode: ValidModes.car,
91      geometryType: SupportedGeometry.polyline,
92    );
93
94    await NBNavigation.fetchRoute(requestParams, (routes, error) async {
95      if (routes.isNotEmpty) {
96        setState(() {
97          this.routes = routes;
98        });
99        drawRoutes(routes);
100      } else if (error != null) {
101        print("====error====${error}");
102      }
103    });
104  }
105
106  void _startNavigation() {
107    if (routes.isEmpty) return;
108    NavigationLauncherConfig config = NavigationLauncherConfig(route: routes.first, routes: routes);
109    config.locationLayerRenderMode = LocationLayerRenderMode.GPS;
110    config.enableDissolvedRouteLine = false;
111    config.themeMode = NavigationThemeMode.system;
112    config.useCustomNavigationStyle = false;
113    NBNavigation.startNavigation(config);
114  }
115
116  Future<void> drawRoutes(List<DirectionsRoute> routes) async {
117    navNextBillionMap.clearRoute();
118    await navNextBillionMap.drawRoute(routes);
119  }
120
121  
122  void dispose() {
123    super.dispose();
124  }
125
126  _buttonWidget() {
127    return Padding(
128      padding: const EdgeInsets.only(left: 8, top: 18.0),
129      child: Row(
130        children: [
131          ElevatedButton(
132            style: ButtonStyle(
133              backgroundColor: MaterialStateProperty.all(Colors.blueAccent),
134            ),
135            onPressed: () {
136              _fetchRoute();
137            },
138            child: const Text("Fetch Route"),
139          ),
140          const Padding(padding: EdgeInsets.only(left: 8)),
141          ElevatedButton(
142            style: ButtonStyle(
143                backgroundColor: MaterialStateProperty.all(routes.isEmpty ? Colors.grey : Colors.blueAccent),
144                enableFeedback: routes.isNotEmpty),
145            onPressed: () {
146              _startNavigation();
147            },
148            child: const Text("Start Navigation"),
149          ),
150        ],
151      ),
152    );
153  }
154
155  _switchButton() {
156    return Padding(
157      padding: const EdgeInsets.all(8.0),
158      child: Column(
159        mainAxisAlignment: MainAxisAlignment.end,
160        crossAxisAlignment: CrossAxisAlignment.start,
161        children: [
162          Row(
163            children: [
164              Text("Display Alternative Route"),
165              Switch(
166                  value: enableAlternativeRoutes,
167                  onChanged: (value) {
168                    setState(() {
169                      enableAlternativeRoutes = value;
170                    });
171                    navNextBillionMap.toggleAlternativeVisibilityWith(value);
172                  })
173            ],
174          ),
175          Row(
176            children: [
177              Text("Display Route Duration Symbol"),
178              Switch(
179                  value: enableRouteDurationSymbol,
180                  onChanged: (value) {
181                    setState(() {
182                      enableRouteDurationSymbol = value;
183                    });
184                    navNextBillionMap.toggleDurationSymbolVisibilityWith(value);
185                  })
186            ],
187          )
188        ],
189      ),
190    );
191  }
192}

Code summary

The above code snippet demonstrates how to draw a route line on a map, toggle the visibility of alternative routes, and toggle the visibility of route duration symbols. The app uses the nb_maps_flutter and nb_navigation_flutter packages for map rendering and navigation-related functionality.

Draw Route Line:

  1. The NBMap widget from the nb_maps_flutter package is used to display the map.
  2. When the "Fetch Route" button is pressed, the _fetchRoute function is called. It sends a route request to the navigation service (NBNavigation.fetchRoute) with the specified origin and destination coordinates. The response contains a list of DirectionsRoute objects representing different possible routes from the origin to the destination.
  3. The drawRoutes function is used to draw the fetched routes on the map using the NavNextBillionMap controller.

Toggle Alternative Routes Visibility:

  1. The "Display Alternative Route" switch allows the user to toggle the visibility of alternative routes on the map.
  2. The enableAlternativeRoutes variable keeps track of the switch state.
  3. When the switch is toggled, the _switchButton function calls the toggleAlternativeVisibilityWith method of NavNextBillionMap to change the visibility of alternative routes accordingly.

Toggle Route Duration Symbol Visibility:

  1. The "Display Route Duration Symbol" switch allows the user to toggle the visibility of route duration symbols on the map.

  2. The enableRouteDurationSymbol variable keeps track of the switch state.

  3. When the switch is toggled, the _switchButton function calls the toggleDurationSymbolVisibilityWith method of NavNextBillionMap to change the visibility of route duration symbols accordingly.

Start Navigation:

  1. The "Start Navigation" button is used to initiate turn-by-turn navigation using the selected route.

  2. When the button is pressed, the _startNavigation function is called. It launches the navigation using NBNavigation.startNavigation with the first route from the list.

Map Interaction:

  1. The _onMapCreated callback function is used to get the map controller when the map is created.

  2. The _onMapClick function is used to handle map click events. When a route is selected on the map, it is moved to the top of the routes list and redrawn.

  3. Overall, the app provides an interface for fetching routes between two specified coordinates, drawing those routes on the map, and toggling the visibility of alternative routes and route duration symbols.

DIDN'T FIND WHAT YOU LOOKING FOR?