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.

MapView Polyline

Introduction

Code summary

PRODUCTS

SOLUTIONS

COMPARE

DEVELOPERS

GUIDES

RESOURCES

COMPANY

UNITED STATES

SINGAPORE