Skip to content

Map Snapshot

Capture a static image of the current map view as a Uint8List (PNG bytes). Use it to share, save, or display the map without requiring a live MapLibreMap widget.

Capture a snapshot

final Uint8List bytes = await controller.takeSnapshot();

// Display it in an Image widget
final image = Image.memory(bytes);

// Or save it to a file
final file = File('${directory.path}/map_snapshot.png');
await file.writeAsBytes(bytes);

The snapshot captures the current viewport exactly as rendered, including any added layers, annotations, and the camera position.

Pass width and height in logical pixels to render at a size other than the current map view, keeping the camera position and style.

Show snapshot in a dialog

Future<void> _shareSnapshot() async {
  final bytes = await controller.takeSnapshot();
  if (!mounted) return;

  showDialog(
    context: context,
    builder: (_) => AlertDialog(
      content: Image.memory(bytes),
      actions: [
        TextButton(
          onPressed: () => Navigator.pop(context),
          child: const Text('Close'),
        ),
      ],
    ),
  );
}

Platform support

AndroidiOSWeb
✔ Yes ✔ Yes ✔ Yes

Timing

Call takeSnapshot() after the map has fully loaded and all tiles have rendered. Taking a snapshot too early may result in a partially loaded map. Use onStyleLoadedCallback and wait for tiles to settle.

Key APIs