Mapview Annotations Callbacks

Introduction

This example shows how to add Polygons in MapView

Add different types of annotations from a set of Latlng
Add onTap events for the annotations


Android snapshot	iOS snapshot

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

ClickAnnotationsPage view source

1
import 'package:flutter/material.dart';
2
import 'package:nb_maps_flutter/nb_maps_flutter.dart';
3

4
import 'page.dart';
5

6
class ClickAnnotationPage extends ExamplePage {
7
 ClickAnnotationPage()
8
     : super(const Icon(Icons.check_circle), 'Annotation tap');
9

10
 @override
11
 Widget build(BuildContext context) {
12
   return const ClickAnnotationBody();
13
 }
14
}
15

16
class ClickAnnotationBody extends StatefulWidget {
17
 const ClickAnnotationBody();
18

19
 @override
20
 State<StatefulWidget> createState() => ClickAnnotationBodyState();
21
}
22

23
class ClickAnnotationBodyState extends State<ClickAnnotationBody> {
24
 ClickAnnotationBodyState();
25

26
 static const LatLng center = const LatLng(-33.88, 151.16);
27
 bool overlapping = false;
28

29
 NextbillionMapController? controller;
30

31
 void _onMapCreated(NextbillionMapController controller) {
32
   this.controller = controller;
33
   controller.onFillTapped.add(_onFillTapped);
34
   controller.onCircleTapped.add(_onCircleTapped);
35
   controller.onLineTapped.add(_onLineTapped);
36
   controller.onSymbolTapped.add(_onSymbolTapped);
37
 }
38

39
 @override
40
 void dispose() {
41
   controller?.onFillTapped.remove(_onFillTapped);
42
   controller?.onCircleTapped.remove(_onCircleTapped);
43
   controller?.onLineTapped.remove(_onLineTapped);
44
   controller?.onSymbolTapped.remove(_onSymbolTapped);
45
   super.dispose();
46
 }
47

48
 _showSnackBar(String type, String id) {
49
   final snackBar = SnackBar(
50
       content: Text('Tapped $type $id',
51
           style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
52
       backgroundColor: Theme.of(context).primaryColor);
53
   ScaffoldMessenger.of(context).clearSnackBars();
54
   ScaffoldMessenger.of(context).showSnackBar(snackBar);
55
 }
56

57
 void _onFillTapped(Fill fill) {
58
   _showSnackBar('fill', fill.id);
59
 }
60

61
 void _onCircleTapped(Circle circle) {
62
   _showSnackBar('circle', circle.id);
63
 }
64

65
 void _onLineTapped(Line line) {
66
   _showSnackBar('line', line.id);
67
 }
68

69
 void _onSymbolTapped(Symbol symbol) {
70
   _showSnackBar('symbol', symbol.id);
71
 }
72

73
 void _onStyleLoaded() {
74
   controller!.addCircle(
75
     CircleOptions(
76
       geometry: LatLng(-33.881979408447314, 151.171361438502117),
77
       circleStrokeColor: "#00FF00",
78
       circleStrokeWidth: 2,
79
       circleRadius: 16,
80
     ),
81
   );
82
   controller!.addCircle(
83
     CircleOptions(
84
       geometry: LatLng(-33.894372606072309, 151.17576679759523),
85
       circleStrokeColor: "#00FF00",
86
       circleStrokeWidth: 2,
87
       circleRadius: 30,
88
     ),
89
   );
90
   controller!.addSymbol(
91
     SymbolOptions(
92
         geometry: LatLng(-33.894372606072309, 151.17576679759523),
93
         iconImage: "fast-food-15",
94
         iconSize: 2),
95
   );
96
   controller!.addLine(
97
     LineOptions(
98
       geometry: [
99
         LatLng(-33.874867744475786, 151.170627211986584),
100
         LatLng(-33.881979408447314, 151.171361438502117),
101
         LatLng(-33.887058805548882, 151.175032571079726),
102
         LatLng(-33.894372606072309, 151.17576679759523),
103
         LatLng(-33.900060683994681, 151.15765587687909),
104
       ],
105
       lineColor: "#0000FF",
106
       lineWidth: 20,
107
     ),
108
   );
109

110
   controller!.addFill(
111
     FillOptions(
112
       geometry: [
113
         [
114
           LatLng(-33.901517742631846, 151.178099204457737),
115
           LatLng(-33.872845324482071, 151.179025547977773),
116
           LatLng(-33.868230472039514, 151.147000529140399),
117
           LatLng(-33.883172899638311, 151.150838238009328),
118
           LatLng(-33.894158309528244, 151.14223647675135),
119
           LatLng(-33.904812805307806, 151.155999294764086),
120
           LatLng(-33.901517742631846, 151.178099204457737),
121
         ],
122
       ],
123
       fillColor: "#FF0000",
124
       fillOutlineColor: "#000000",
125
     ),
126
   );
127
 }
128

129
 @override
130
 Widget build(BuildContext context) {
131
   return Scaffold(
132
     body: NBMap(
133
       annotationOrder: [
134
         AnnotationType.fill,
135
         AnnotationType.line,
136
         AnnotationType.circle,
137
         AnnotationType.symbol,
138
       ],
139
       onMapCreated: _onMapCreated,
140
       onStyleLoadedCallback: _onStyleLoaded,
141
       initialCameraPosition: const CameraPosition(
142
         target: center,
143
         zoom: 12.0,
144
       ),
145
     ),
146
     floatingActionButton: ElevatedButton(
147
         onPressed: () {
148
           setState(() {
149
             overlapping = !overlapping;
150
           });
151
           controller!.setSymbolIconAllowOverlap(overlapping);
152
           controller!.setSymbolIconIgnorePlacement(overlapping);
153

154
           controller!.setSymbolTextAllowOverlap(overlapping);
155
           controller!.setSymbolTextIgnorePlacement(overlapping);
156
         },
157
         child: Padding(
158
           padding: const EdgeInsets.all(8.0),
159
           child: Text("Toggle overlapping"),
160
         )),
161
   );
162
 }
163
}

Code summary

The above code snippet displays a nbMap with various annotations (fills, circles, lines, symbols) and allows interactions with these annotations through tapping. The nb_maps_flutter package is used for map-related functionalities, and the map annotations are organized in a specific order (fills, lines, circles, symbols) specified in the annotationOrder parameter.

ClickAnnotationPage Class: extends the ExamplePage class and represents a page in the app that demonstrates annotation tapping. The page is associated with an icon (check_circle icon) and a title (Annotation tap). The build method returns a ClickAnnotationBody widget.

ClickAnnotationBody Class: is a StatefulWidget class representing the main body of the ClickAnnotationPage. It manages the state of the ClickAnnotationPage and contains the map and a toggle button to control overlapping of symbols and texts.

ClickAnnotationBodyState Class: This is the state class for the ClickAnnotationBody widget. It handles the interactions with the map, such as setting up the map controller, adding listeners for various annotation types (fill, circle, line, symbol), and displaying SnackBars when annotations are tapped. The onStyleLoaded method is used to add circles, lines, symbols, and fills to the map.

_showSnackBar Method: A private method to show a SnackBar with information about the type and id of the tapped annotation.

build Method: returns a Scaffold widget containing an NBMap widget, which displays the map with various annotations. The annotation order is specified to determine the z-order of annotations (fills, lines, circles, symbols). A floating action button (ElevatedButton) is used to toggle the overlapping behavior of symbols and texts. When the button is pressed, overlapping is toggled, and relevant map controller methods are called accordingly to handle overlapping behavior.