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

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.

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.