Camera Controls

The camera defines what the user sees: the center position, zoom level, bearing (rotation), and tilt. MapLibreMapController provides methods to move the camera programmatically with smooth animations or instant jumps.

Press the button to fly between cities around the world.

`animateCamera`: smooth animation

// Fly to a location with zoom
await controller.animateCamera(
  CameraUpdate.newCameraPosition(
    const CameraPosition(
      target: LatLng(48.8566, 2.3522),
      zoom: 12.0,
      bearing: 45.0,  // rotate 45 degrees
      tilt: 30.0,     // pitch/tilt the view
    ),
  ),
  duration: const Duration(milliseconds: 2000),
);

`moveCamera`: instant jump

// No animation: instant
await controller.moveCamera(
  CameraUpdate.newLatLngZoom(
    const LatLng(51.5074, -0.1278),
    12.0,
  ),
);

`CameraUpdate` factory methods

Method	Description
`CameraUpdate.newLatLng(LatLng)`	Move to position, keep zoom
`CameraUpdate.newLatLngZoom(LatLng, double)`	Move to position with zoom
`CameraUpdate.newCameraPosition(CameraPosition)`	Full control: position + zoom + bearing + tilt
`CameraUpdate.newLatLngBounds(LatLngBounds, {left, top, right, bottom})`	Fit a bounding box into view, with per-edge padding
`CameraUpdate.zoomIn()`	Zoom in one level
`CameraUpdate.zoomOut()`	Zoom out one level
`CameraUpdate.zoomTo(double)`	Zoom to a specific level
`CameraUpdate.zoomBy(double)`	Relative zoom change
`CameraUpdate.bearingTo(double)`	Rotate to a bearing
`CameraUpdate.tiltTo(double)`	Set tilt angle
`CameraUpdate.scrollBy(double, double)`	Pan by pixel offset

Fit a bounding box

await controller.animateCamera(
  CameraUpdate.newLatLngBounds(
    LatLngBounds(
      southwest: const LatLng(41.0, -5.0),  // SW Spain
      northeast: const LatLng(51.5, 9.5),   // NE Germany
    ),
    left: 40, top: 40, right: 40, bottom: 40,  // padding in pixels
  ),
);

Query current camera

final position = await controller.queryCameraPosition();
if (position != null) {
  print('Center: ${position.target}');
  print('Zoom: ${position.zoom}');
  print('Bearing: ${position.bearing}');
  print('Tilt: ${position.tilt}');
}

`easeCamera`: interpolated animation

easeCamera moves the camera along a single eased path, where animateCamera uses the platform's fly-to animation. Pass interpolation to pick the curve; linear is the one to use for continuous tracking, since it has no acceleration between successive calls:

await controller.easeCamera(
  CameraUpdate.newLatLng(const LatLng(35.6762, 139.6503)),
  duration: const Duration(seconds: 3),
  interpolation: CameraAnimationInterpolation.linear,
);

The default is easeInOut. Android only distinguishes linear from eased, so the other curves render as its native ease-in/ease-out; see the Feature Matrix.

Padding: keep content centered behind an overlay

A bottom sheet or a side panel covers part of the map, so the geometric center of the widget is no longer the center the user sees. setPadding shifts the map's center by insetting the viewport, and every later camera call respects it, so you do not have to pass padding to each one:

// A 240 dp bottom sheet just opened.
await controller.setPadding(bottom: 240, animated: true);

// Centers in the visible part of the map, not behind the sheet.
await controller.animateCamera(CameraUpdate.newLatLng(marker));

// Sheet dismissed.
await controller.setPadding(animated: true);

Values are in logical pixels and default to zero, so a call with no arguments clears the padding. setPadding is a convenience wrapper around updateContentInsets, which takes an EdgeInsets; use whichever reads better. Both work on Android, iOS and web.

React to camera movement

MapLibreMap(
  onCameraIdle: () {
    // Called when camera stops moving
  },
  trackCameraPosition: true,  // enables onCameraMove
  onCameraMove: (CameraPosition pos) {
    // Called while camera is moving
  },
)

trackCameraPosition: true

Camera move callbacks are disabled by default for performance. Set trackCameraPosition: true on MapLibreMap to enable them.

Camera Controls

animateCamera: smooth animation

moveCamera: instant jump

CameraUpdate factory methods