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
 |  |
| Android snapshot | iOS snapshot |
For all code examples, refer to Flutter Maps SDK Code Examples
AnimateCameraPage view source
1import 'package:flutter/material.dart';
2import 'package:nb_maps_flutter/nb_maps_flutter.dart';
3
4import 'main.dart';
5import 'page.dart';
6
7class AnimateCameraPage extends ExamplePage {
8 AnimateCameraPage()
9 : super(const Icon(Icons.map), 'Camera control, animated');
10
11
12 Widget build(BuildContext context) {
13 return const AnimateCamera();
14 }
15}
16
17class AnimateCamera extends StatefulWidget {
18 const AnimateCamera();
19
20 State createState() => AnimateCameraState();
21}
22
23class AnimateCameraState extends State<AnimateCamera> {
24 late NextbillionMapController mapController;
25
26 void _onMapCreated(NextbillionMapController controller) {
27 mapController = controller;
28 }
29
30
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.
-
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.
-
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.
