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
documentation imagedocumentation image
Android snapshotiOS 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.

© 2024 NextBillion.ai all rights reserved.