MapView Polyline

Introduction

This example shows how to add PolyLines in MapView

Add Polyline to Mapview from a set of LatLng
Set Polyline opacity
Set polyline visibility
Move Polyline position


Android snapshot	iOS snapshot

For all code examples, refer to Flutter Maps SDK Code Examples

LinePage view source

1
import 'dart:async';
2
import 'dart:typed_data';
3

4
import 'package:flutter/material.dart';
5
import 'package:flutter/services.dart';
6
import 'package:nb_maps_flutter/nb_maps_flutter.dart';
7

8
import 'page.dart';
9

10
class LinePage extends ExamplePage {
11
 LinePage() : super(const Icon(Icons.share), 'Line');
12

13
 @override
14
 Widget build(BuildContext context) {
15
   return const LineBody();
16
 }
17
}
18

19
class LineBody extends StatefulWidget {
20
 const LineBody();
21

22
 @override
23
 State<StatefulWidget> createState() => LineBodyState();
24
}
25

26
class LineBodyState extends State<LineBody> {
27
 LineBodyState();
28

29
 static final LatLng center = const LatLng(-33.86711, 151.1947171);
30

31
 NextbillionMapController? controller;
32
 int _lineCount = 0;
33
 Line? _selectedLine;
34
 final String _linePatternImage = "assets/fill/cat_silhouette_pattern.png";
35

36
 void _onMapCreated(NextbillionMapController controller) {
37
   this.controller = controller;
38
   controller.onLineTapped.add(_onLineTapped);
39
 }
40

41
 @override
42
 void dispose() {
43
   controller?.onLineTapped.remove(_onLineTapped);
44
   super.dispose();
45
 }
46

47
 /// Adds an asset image to the currently displayed style
48
 Future<void> addImageFromAsset(String name, String assetName) async {
49
   final ByteData bytes = await rootBundle.load(assetName);
50
   final Uint8List list = bytes.buffer.asUint8List();
51
   return controller!.addImage(name, list);
52
 }
53

54
 _onLineTapped(Line line) async {
55
   await _updateSelectedLine(
56
     LineOptions(lineColor: "#ff0000"),
57
   );
58
   setState(() {
59
     _selectedLine = line;
60
   });
61
   await _updateSelectedLine(
62
     LineOptions(lineColor: "#ffe100"),
63
   );
64
 }
65

66
 _updateSelectedLine(LineOptions changes) async {
67
   if (_selectedLine != null) controller!.updateLine(_selectedLine!, changes);
68
 }
69

70
 void _add() {
71
   controller!.addLine(
72
     LineOptions(
73
         geometry: [
74
           LatLng(-33.86711, 151.1947171),
75
           LatLng(-33.86711, 151.1947171),
76
           LatLng(-32.86711, 151.1947171),
77
           LatLng(-33.86711, 152.1947171),
78
         ],
79
         lineColor: "#ff0000",
80
         lineWidth: 14.0,
81
         lineOpacity: 0.5,
82
         draggable: true),
83
   );
84
   setState(() {
85
     _lineCount += 1;
86
   });
87
 }
88

89
 _move() async {
90
   final currentStart = _selectedLine!.options.geometry![0];
91
   final currentEnd = _selectedLine!.options.geometry![1];
92
   final end =
93
       LatLng(currentEnd.latitude + 0.001, currentEnd.longitude + 0.001);
94
   final start =
95
       LatLng(currentStart.latitude - 0.001, currentStart.longitude - 0.001);
96
   await controller!
97
       .updateLine(_selectedLine!, LineOptions(geometry: [start, end]));
98
 }
99

100
 void _remove() {
101
   controller!.removeLine(_selectedLine!);
102
   setState(() {
103
     _selectedLine = null;
104
     _lineCount -= 1;
105
   });
106
 }
107

108
 Future<void> _changeLinePattern() async {
109
   String? current =
110
       _selectedLine!.options.linePattern == null ? "assetImage" : null;
111
   await _updateSelectedLine(
112
     LineOptions(linePattern: current),
113
   );
114
 }
115

116
 Future<void> _changeAlpha() async {
117
   double? current = _selectedLine!.options.lineOpacity;
118
   if (current == null) {
119
     // default value
120
     current = 1.0;
121
   }
122

123
   await _updateSelectedLine(
124
     LineOptions(lineOpacity: current < 0.1 ? 1.0 : current * 0.75),
125
   );
126
 }
127

128
 Future<void> _toggleVisible() async {
129
   double? current = _selectedLine!.options.lineOpacity;
130
   if (current == null) {
131
     // default value
132
     current = 1.0;
133
   }
134
   await _updateSelectedLine(
135
     LineOptions(lineOpacity: current == 0.0 ? 1.0 : 0.0),
136
   );
137
 }
138

139
 _onStyleLoadedCallback() async {
140
   addImageFromAsset("assetImage", _linePatternImage);
141
   await controller!.addLine(
142
     LineOptions(
143
       geometry: [LatLng(37.4220, -122.0841), LatLng(37.4240, -122.0941)],
144
       lineColor: "#ff0000",
145
       lineWidth: 14.0,
146
       lineOpacity: 0.5,
147
     ),
148
   );
149
 }
150

151
 @override
152
 Widget build(BuildContext context) {
153
   return Column(
154
     mainAxisAlignment: MainAxisAlignment.spaceEvenly,
155
     crossAxisAlignment: CrossAxisAlignment.stretch,
156
     children: <Widget>[
157
       Center(
158
         child: SizedBox(
159
           height: 400.0,
160
           child: NBMap(
161
             onMapCreated: _onMapCreated,
162
             onStyleLoadedCallback: _onStyleLoadedCallback,
163
             initialCameraPosition: const CameraPosition(
164
               target: LatLng(-33.852, 151.211),
165
               zoom: 11.0,
166
             ),
167
           ),
168
         ),
169
       ),
170
       Expanded(
171
         child: SingleChildScrollView(
172
           child: Row(
173
             mainAxisAlignment: MainAxisAlignment.spaceEvenly,
174
             children: <Widget>[
175
               Column(
176
                 children: <Widget>[
177
                   Row(
178
                     children: <Widget>[
179
                       TextButton(
180
                         child: const Text('add'),
181
                         onPressed: (_lineCount == 12) ? null : _add,
182
                       ),
183
                       TextButton(
184
                         child: const Text('remove'),
185
                         onPressed: (_selectedLine == null) ? null : _remove,
186
                       ),
187
                       TextButton(
188
                         child: const Text('move'),
189
                         onPressed: (_selectedLine == null)
190
                             ? null
191
                             : () async {
192
                                 await _move();
193
                               },
194
                       ),
195
                       TextButton(
196
                         child: const Text('change line-pattern'),
197
                         onPressed: (_selectedLine == null)
198
                             ? null
199
                             : _changeLinePattern,
200
                       ),
201
                     ],
202
                   ),
203
                   Row(
204
                     children: <Widget>[
205
                       TextButton(
206
                         child: const Text('change alpha'),
207
                         onPressed:
208
                             (_selectedLine == null) ? null : _changeAlpha,
209
                       ),
210
                       TextButton(
211
                         child: const Text('toggle visible'),
212
                         onPressed:
213
                             (_selectedLine == null) ? null : _toggleVisible,
214
                       ),
215
                       TextButton(
216
                         child: const Text('print current LatLng'),
217
                         onPressed: (_selectedLine == null)
218
                             ? null
219
                             : () async {
220
                                 var latLngs = await controller!
221
                                     .getLineLatLngs(_selectedLine!);
222
                                 for (var latLng in latLngs) {
223
                                   print(latLng.toString());
224
                                 }
225
                               },
226
                       ),
227
                     ],
228
                   ),
229
                 ],
230
               ),
231
             ],
232
           ),
233
         ),
234
       ),
235
     ],
236
   );
237
 }
238
}

Code summary

The above code snippet demonstrates the implementation of a Flutter application that utilizes the nb_maps_flutter package to display a map with various functionalities related to lines and markers.

LinePage Class: extends the ExamplePage class and represents a page in the app that demonstrates line-related functionalities. The page is associated with an icon (share icon) and a title ('Line'). The build method returns a LineBody widget.

LineBody Class: is a StatefulWidget class representing the main body of the LinePage. It manages the state of the LinePage and contains the map and various buttons for interacting with the map.

LineBodyState Class: is the state class for the LineBody widget. It handles the interactions with the map, such as adding lines, updating line properties, and removing lines. Some key methods include:

_onMapCreated: A callback method called when the map is created. It sets the map controller and adds a listener for when a line is tapped.
dispose: A method called when the widget is disposed. It removes the listener for line taps.
addImageFromAsset: A method for adding an image from an asset to the currently displayed style of the map.
_onLineTapped: A callback method called when a line on the map is tapped. It updates the line color to red when tapped and to yellow when tapped again.
_add: A method for adding a new line to the map with specific properties such as color, width, opacity, and whether it is draggable.
_move: A method for moving the currently selected line on the map.
_remove: A method for removing the currently selected line from the map.
_changeLinePattern: A method for changing the pattern of the currently selected line.
_changeAlpha: A method for changing the opacity of the currently selected line.
_toggleVisible: A method for toggling the visibility of the currently selected line.
_onStyleLoadedCallback: A callback method called when the map style is loaded. It adds an image from an asset to the style and initializes a line on the map with specific properties.

build Method: The build method returns a Column widget containing a map (NBMap) and a set of buttons for interacting with the map. The buttons include 'add', 'remove', 'move', 'change line-pattern', 'change alpha', 'toggle visible', and 'print current LatLng'. The map displays lines, and when a line is tapped, its color changes, and the selected line's properties can be modified using the buttons.