Customize Route Line Style

This example shows:

  • Draw route line on the map using NavNextBillionMap

  • Customize the style of route line using RouteLineProperties when init the NavNextBillionMap in the _onStyleLoaded callback

  • RouteLineProperties

1
/// The color of the shield icon for the route.
2
final Color routeShieldColor;
3
4
/// The color of the shield icon for alternative routes.
5
final Color alternativeRouteShieldColor;
6
7
/// The scale factor for the route line.
8
final double routeScale;
9
10
/// The scale factor for alternative route lines.
11
final double alternativeRouteScale;
12
13
/// The default color of the route line.
14
final Color routeDefaultColor;
15
16
/// The default color of alternative route lines.
17
final Color alternativeRouteDefaultColor;
18
19
/// The asset image name of the route origin marker.
20
final String originMarkerName;
21
22
/// The asset image name of the route destination marker.
23
final String destinationMarkerName;
24
25
/// The background color of the primary route's duration symbol.
26
final Color durationSymbolPrimaryBackgroundColor;
27
28
/// The background color of the alternative route's duration symbol.
29
final Color durationSymbolAlternativeBackgroundColor;
30
31
/// The text style for the primary route's duration symbol.
32
final TextStyle durationSymbolPrimaryTextStyle;
33
34
/// The text style for alternative route's duration symbols.
35
final TextStyle durationSymbolAlternativeTextStyle;
documentation imagedocumentation image
Android snapshotiOS snapshot

For all code examples, refer to Flutter Navigation Code Example

RouteLineStyle view source

1
import 'package:flutter/foundation.dart';
2
import 'package:flutter/material.dart';
3
import 'package:nb_navigation_flutter/nb_navigation_flutter.dart';
4
5
class RouteLineStyle extends StatefulWidget {
6
static const String title = "Customize Route Line Style";
7
8
const RouteLineStyle({super.key});
9
10
@override
11
RouteLineStyleState createState() => RouteLineStyleState();
12
}
13
14
class RouteLineStyleState extends State<RouteLineStyle> {
15
NextbillionMapController? controller;
16
List<DirectionsRoute> routes = [];
17
late NavNextBillionMap navNextBillionMap;
18
19
LatLng origin = const LatLng(1.312533169133601, 103.75986708439264);
20
LatLng dest = const LatLng(1.310473772283314, 103.77982271935586);
21
22
void _onMapCreated(NextbillionMapController controller) {
23
this.controller = controller;
24
}
25
26
void _onStyleLoaded() async {
27
if (controller != null) {
28
var routeLineStyle = const RouteLineProperties(
29
routeDefaultColor: Color(0xFFE97F2F),
30
routeScale: 1.0,
31
alternativeRouteScale: 1.0,
32
routeShieldColor: Color(0xFF54E910),
33
durationSymbolPrimaryBackgroundColor: Color(0xFFE97F2F));
34
navNextBillionMap = await NavNextBillionMap.create(controller!,
35
routeLineProperties: routeLineStyle);
36
}
37
}
38
39
@override
40
void initState() {
41
super.initState();
42
}
43
44
@override
45
Widget build(BuildContext context) {
46
return Scaffold(
47
appBar: AppBar(
48
title: const Text(RouteLineStyle.title),
49
),
50
body: Stack(
51
children: [
52
NBMap(
53
onMapCreated: _onMapCreated,
54
initialCameraPosition: CameraPosition(
55
target: LatLng(origin.latitude, 103.76986708439264),
56
zoom: 13.0,
57
),
58
onStyleLoadedCallback: _onStyleLoaded,
59
),
60
_buttonWidget(),
61
],
62
),
63
);
64
}
65
66
void _fetchRoute() async {
67
RouteRequestParams requestParams = RouteRequestParams(
68
origin: origin,
69
destination: dest,
70
// waypoints: [Coordinate(latitude: wayP2.latitude, longitude: wayP2.longitude)],
71
// overview: ValidOverview.simplified,
72
// avoid: [SupportedAvoid.toll, SupportedAvoid.ferry],
73
// option: SupportedOption.flexible,
74
// truckSize: [200, 200, 600],
75
// truckWeight: 100,
76
// unit: SupportedUnits.imperial,
77
mode: ValidModes.car,
78
);
79
80
DirectionsRouteResponse response =
81
await NBNavigation.fetchRoute(requestParams);
82
List<DirectionsRoute> routeData = response.directionsRoutes;
83
if (routeData.isNotEmpty) {
84
setState(() {
85
routes = routeData;
86
});
87
drawRoutes(routeData);
88
} else if (response.message != null) {
89
if (kDebugMode) {
90
print("====error====${response.message}===${response.errorCode}");
91
}
92
}
93
}
94
95
void _startNavigation() {
96
if (routes.isEmpty) return;
97
NavigationLauncherConfig config =
98
NavigationLauncherConfig(route: routes.first, routes: routes);
99
config.locationLayerRenderMode = LocationLayerRenderMode.gps;
100
config.shouldSimulateRoute = true;
101
config.themeMode = NavigationThemeMode.system;
102
config.useCustomNavigationStyle = false;
103
NBNavigation.startNavigation(config);
104
}
105
106
Future<void> drawRoutes(List<DirectionsRoute> routes) async {
107
navNextBillionMap.clearRoute();
108
navNextBillionMap.drawRoute(routes);
109
}
110
111
@override
112
void dispose() {
113
super.dispose();
114
}
115
116
_buttonWidget() {
117
return Positioned(
118
bottom: 60,
119
child: Padding(
120
padding: const EdgeInsets.only(left: 8, top: 18.0),
121
child: Row(
122
children: [
123
ElevatedButton(
124
style: ButtonStyle(
125
backgroundColor: WidgetStateProperty.all(Colors.blueAccent),
126
),
127
onPressed: () {
128
_fetchRoute();
129
},
130
child: const Text("Fetch Route"),
131
),
132
const Padding(padding: EdgeInsets.only(left: 8)),
133
ElevatedButton(
134
style: ButtonStyle(
135
backgroundColor: WidgetStateProperty.all(
136
routes.isEmpty ? Colors.grey : Colors.blueAccent),
137
enableFeedback: routes.isNotEmpty),
138
onPressed: () {
139
_startNavigation();
140
},
141
child: const Text("Start Navigation"),
142
),
143
],
144
),
145
),
146
);
147
}
148
}
149

Code summary

The above code snippet demonstrates how to draw a route line on nbMap, customize the route line style, and navigate along the route. The app uses the nb_maps_flutter and nb_navigation_flutter packages for map rendering, route drawing, and navigation-related functionality.

Draw Route Line:

  • The NBMap widget from the nb_maps_flutter package is used to display the map.

  • 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.

  • The drawRoutes function is used to draw the fetched routes on the map using the NavNextBillionMap controller.

Customize Route Line Style:

  • The _onStyleLoaded function is called when the map style is loaded. It initializes a RouteLineProperties object to customize the appearance of the route line.

  • The NavNextBillionMap controller is created with the specified routeLineStyle object, which customizes attributes like the route color, route scale, alternative route scale, route shield color, and duration symbol background color.

Supported Route Line Style Attributes:

The RouteLineProperties class provides the following supported route line style attributes:

  • routeDefaultColor: The default color of the main route line.

  • routeScale: The scaling factor applied to the width of the main route line.

  • alternativeRouteScale: The scaling factor applied to the width of alternative route lines.

  • routeShieldColor: The color of the route shield, which is displayed on the map for certain types of routes.

  • durationSymbolPrimaryBackgroundColor: The background color of the duration symbol displayed along the route line.

  • alternativeRouteDefaultColor: The default color of alternative route lines.

  • originMarkerName: The asset image name of the route origin marker.

  • destinationMarkerName: The asset image name of the route destination marker.

  • durationSymbolPrimaryBackgroundColor: The background color of the primary route's duration symbol.

  • durationSymbolAlternativeBackgroundColor: The background color of the alternative route's duration symbol.

  • durationSymbolPrimaryTextStyle: The text style for the primary route's duration symbol.

  • durationSymbolAlternativeTextStyle: The text style for alternative route's duration symbols.

Start Navigation:

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

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

Please note that some parts of the code (e.g., fetchRoute and startNavigation) rely on external services or APIs provided by the nb_navigation_flutter package. These services handle the actual route fetching and navigation functionality. Also, ensure that you have the required permissions and API keys set up to use the mapping and navigation services properly.

© 2024 NextBillion.ai all rights reserved.