Skip to main content

MapView Snapshot

Additional Developer Resources

This example demonstrates how to capture a snapshot or screenshot of a map using the snapShot method of the Mapbox Maps SDK for Android.

Clicking the floating action button (fab) triggers the snapshot method of the map view to take a snapshot of the map. The resulting bitmap image is then set as the image source of the ImageView using a post method, allowing the captured map snapshot to be displayed in the user interface.

Note

This example uses the snapShot method. This functionality can also be accomplished using the snapShotter class which provides more robust options for creating and handling snapshots. See the DDS Snapshotter and Local Style MapSnapshotter examples for more information on using SnapShotter.

Android Examples App Available

This example code is part of the Maps SDK for Android Examples App, a working Android project available on GitHub. Android developers are encouraged to run the examples app locally to interact with this example in an emulator and explore other features of the Maps SDK.

See our Run the Maps SDK for Android Examples App tutorial for step-by-step instructions.

MapViewSnapshotActivity.kt
github View on GitHub
package com.mapbox.maps.testapp.examples.snapshotter

import android.os.Bundle
import android.widget.ImageView
import androidx.appcompat.app.AppCompatActivity
import com.mapbox.maps.MapboxMap
import com.mapbox.maps.Snapshotter
import com.mapbox.maps.Style
import com.mapbox.maps.testapp.databinding.ActivityViewSnapshotBinding

/**
 * Example demonstrating taking simple snapshot or screenshot not using [Snapshotter] appearing
 * in bottom-left corner as [ImageView].
 */
class MapViewSnapshotActivity : AppCompatActivity() {

  private lateinit var mapboxMap: MapboxMap

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    val binding = ActivityViewSnapshotBinding.inflate(layoutInflater)
    setContentView(binding.root)

    mapboxMap = binding.mapView.mapboxMap
    mapboxMap.loadStyle(Style.STANDARD)

    binding.fab.setOnClickListener {
      binding.mapView.snapshot { bitmap ->
        binding.imageView.post {
          binding.imageView.setImageBitmap(bitmap)
        }
      }
    }
  }
}
activity_view_snapshot.xml
github View on GitHub
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.mapbox.maps.MapView
        android:id="@id/mapView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/ic_layers"
        android:tint="@color/primary"
        app:backgroundTint="@android:color/white"/>

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="128dp"
        android:layout_height="128dp"
        android:contentDescription="@string/content_description_snaphot"
        android:layout_gravity="start|bottom"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>
Additional Developer Resources
Was this example helpful?