Camera Controller

Introduction

This example shows how to show mapview and perform camera update actions:

  • Display MapView Widget

  • Various Camera Update operations:

    • new Camera position

    • new LatLng

    • new LatLng Bounds

    • new LatLng Zoom

    • scrollBy

    • zoomBy with focus

    • zoomBy

    • zoomIn

documentation imagedocumentation image
Android snapshotiOS snapshot

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

AnimateCameraPage view source

1
import 'package:flutter/material.dart';
2
import 'package:nb_maps_flutter/nb_maps_flutter.dart';
3
4
import 'main.dart';
5
import 'page.dart';
6
7
class AnimateCameraPage extends ExamplePage {
8
AnimateCameraPage()
9
: super(const Icon(Icons.map), 'Camera control, animated');
10
11
@override
12
Widget build(BuildContext context) {
13
return const AnimateCamera();
14
}
15
}
16
17
class AnimateCamera extends StatefulWidget {
18
const AnimateCamera();
19
@override
20
State createState() => AnimateCameraState();
21
}
22
23
class AnimateCameraState extends State<AnimateCamera> {
24
late NextbillionMapController mapController;
25
26
void _onMapCreated(NextbillionMapController controller) {
27
mapController = controller;
28
}
29
30
@override
31
Widget build(BuildContext context) {
32
return Column(
33
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
34
crossAxisAlignment: CrossAxisAlignment.stretch,
35
children: <Widget>[
36
Center(
37
child: SizedBox(
38
width: 300.0,
39
height: 200.0,
40
child: NBMap(
41
onMapCreated: _onMapCreated,
42
initialCameraPosition:
43
const CameraPosition(target: LatLng(0.0, 0.0)),
44
),
45
),
46
),
47
Row(
48
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
49
children: <Widget>[
50
Column(
51
children: <Widget>[
52
TextButton(
53
onPressed: () {
54
mapController
55
.animateCamera(
56
CameraUpdate.newCameraPosition(
57
const CameraPosition(
58
bearing: 270.0,
59
target: LatLng(51.5160895, -0.1294527),
60
tilt: 30.0,
61
zoom: 17.0,
62
),
63
),
64
)
65
.then((result) => print(
66
"mapController.animateCamera() returned $result"));
67
},
68
child: const Text('newCameraPosition'),
69
),
70
TextButton(
71
onPressed: () {
72
mapController
73
.animateCamera(
74
CameraUpdate.newLatLng(
75
const LatLng(56.1725505, 10.1850512),
76
),
77
duration: Duration(seconds: 5),
78
)
79
.then((result) => print(
80
"mapController.animateCamera() returned $result"));
81
},
82
child: const Text('newLatLng'),
83
),
84
TextButton(
85
onPressed: () {
86
mapController.animateCamera(
87
CameraUpdate.newLatLngBounds(
88
LatLngBounds(
89
southwest: const LatLng(-38.483935, 113.248673),
90
northeast: const LatLng(-8.982446, 153.823821),
91
),
92
left: 10,
93
top: 5,
94
bottom: 25,
95
),
96
);
97
},
98
child: const Text('newLatLngBounds'),
99
),
100
TextButton(
101
onPressed: () {
102
mapController.animateCamera(
103
CameraUpdate.newLatLngZoom(
104
const LatLng(37.4231613, -122.087159),
105
11.0,
106
),
107
);
108
},
109
child: const Text('newLatLngZoom'),
110
),
111
TextButton(
112
onPressed: () {
113
mapController.animateCamera(
114
CameraUpdate.scrollBy(150.0, -225.0),
115
);
116
},
117
child: const Text('scrollBy'),
118
),
119
],
120
),
121
Column(
122
children: <Widget>[
123
TextButton(
124
onPressed: () {
125
mapController.animateCamera(
126
CameraUpdate.zoomBy(
127
-0.5,
128
const Offset(30.0, 20.0),
129
),
130
);
131
},
132
child: const Text('zoomBy with focus'),
133
),
134
TextButton(
135
onPressed: () {
136
mapController.animateCamera(
137
CameraUpdate.zoomBy(-0.5),
138
);
139
},
140
child: const Text('zoomBy'),
141
),
142
TextButton(
143
onPressed: () {
144
mapController.animateCamera(
145
CameraUpdate.zoomIn(),
146
);
147
},
148
child: const Text('zoomIn'),
149
),
150
TextButton(
151
onPressed: () {
152
mapController.animateCamera(
153
CameraUpdate.zoomOut(),
154
);
155
},
156
child: const Text('zoomOut'),
157
),
158
TextButton(
159
onPressed: () {
160
mapController.animateCamera(
161
CameraUpdate.zoomTo(16.0),
162
);
163
},
164
child: const Text('zoomTo'),
165
),
166
TextButton(
167
onPressed: () {
168
mapController.animateCamera(
169
CameraUpdate.bearingTo(45.0),
170
);
171
},
172
child: const Text('bearingTo'),
173
),
174
TextButton(
175
onPressed: () {
176
mapController.animateCamera(
177
CameraUpdate.tiltTo(30.0),
178
);
179
},
180
child: const Text('tiltTo'),
181
),
182
],
183
),
184
],
185
)
186
],
187
);
188
}
189
}

Code summary

The above code snippet defines an AnimateCamera page, which displays a map using the NBMap widget from the nb_maps_flutter package. The widget allows the user to control the camera position of the map and animate various camera movements, like zooming, panning, and tilting.

  1. Display MapView Widget:

    • The NBMap widget is used to display the map on the screen. It requires an onMapCreated callback to get access to the NextbillionMapController, which allows interaction with the map.

    • The initialCameraPosition property sets the initial position of the camera when the map is first displayed.

  2. Camera Options:

The AnimateCamera widget has several buttons that trigger different camera animations:

  • newCameraPosition: Animates the camera to a new position with specified parameters like bearing, target, tilt, and zoom.

  • newLatLng: Animates the camera to a new latitude and longitude position.

  • newLatLngBounds: Animates the camera to fit a specific bounding box defined by southwest and northeast coordinates.

  • newLatLngZoom: Animates the camera to a specific latitude and longitude position with a given zoom level.

  • scrollBy: Animates the camera by scrolling the map by a given distance in pixels.

  • zoomBy with focus: Zooms the camera by a given amount relative to the current zoom level, with a specified focus point (offset from the center of the map).

  • zoomBy: Zooms the camera by a given amount relative to the current zoom level without any focus point.

  • zoomIn: Animates the camera to zoom in by one zoom level.

  • zoomOut: Animates the camera to zoom out by one zoom level.

  • zoomTo: Animates the camera to a specific zoom level.

  • bearingTo: Animates the camera to a specific bearing (rotation angle) in degrees.

  • tiltTo: Animates the camera to a specific tilt angle in degrees.

The camera animations are triggered when the corresponding buttons are pressed, and the NextbillionMapController is used to perform the camera movements using the animateCamera method. The results of the camera animations are printed to the console.

To use this widget in your Flutter app, make sure you have installed the nb_maps_flutter package and added the necessary dependencies to your pubspec.yaml file.

© 2024 NextBillion.ai all rights reserved.