Sky Snapshotter
This example demonstrates using Snapshotter to generate a static map image based on the main MapView and display it to the user. Additional configuration is applied to the snapshot image, setting a custom skyLayer gradient. In this case, the use case for the snapshot is to display a future maneuver to a user that is navigating a route.
The implementation sets up a MapView with a specific camera configuration, enabling a pitched and tilted view of the map for a 3D perspective. A SkyLayer is added to the map style to render a gradient sky effect, transitioning from yellow to pink. The Snapshotter generates a snapshot of the map with a different sky effect using the SkyType.ATMOSPHERE. Once the snapshot is ready, it is displayed in an ImageView.
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.
package com.mapbox.maps.testapp.examples.sky
import android.os.Bundle
import android.view.View
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import com.mapbox.geojson.Point
import com.mapbox.maps.*
import com.mapbox.maps.extension.style.expressions.dsl.generated.interpolate
import com.mapbox.maps.extension.style.layers.addLayer
import com.mapbox.maps.extension.style.layers.generated.skyLayer
import com.mapbox.maps.extension.style.layers.properties.generated.SkyType
import com.mapbox.maps.extension.style.style
import com.mapbox.maps.plugin.compass.compass
import com.mapbox.maps.plugin.scalebar.scalebar
import com.mapbox.maps.testapp.databinding.ActivitySkySnapshotterBinding
/**
* Prototype for Junction view showing upcoming maneuver.
*/
class SkyLayerSnapshotterActivity : AppCompatActivity() {
private var snapshotter: Snapshotter? = null
private lateinit var binding: ActivitySkySnapshotterBinding
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = ActivitySkySnapshotterBinding.inflate(layoutInflater)
setContentView(binding.root)
binding.mapView.scalebar.enabled = false
binding.mapView.compass.enabled = false
binding.mapView.mapboxMap.setCamera(
CameraOptions.Builder()
.center(Point.fromLngLat(24.827187523937795, 60.55932732152849))
.zoom(16.0)
.pitch(85.0)
.bearing(330.1)
.build()
)
binding.mapView.mapboxMap.loadStyle(
styleExtension = style(Style.OUTDOORS) {
+skyLayer("sky") {
skyType(SkyType.GRADIENT)
skyGradient(
interpolate {
linear()
skyRadialProgress()
literal(0.0)
literal("yellow")
literal(1.0)
literal("pink")
}
)
skyGradientCenter(listOf(-34.0, 90.0))
skyGradientRadius(8.0)
}
}
) { prepareSnapshotter() }
}
private fun prepareSnapshotter() {
val snapshotMapOptions = MapSnapshotOptions.Builder()
.size(Size(512.0f, 512.0f))
.build()
snapshotter = Snapshotter(this, snapshotMapOptions).apply {
setStyleListener(object : SnapshotStyleListener {
override fun onDidFinishLoadingStyle(style: Style) {
style.addLayer(
skyLayer("sky_snapshotter") {
skyType(SkyType.ATMOSPHERE)
skyAtmosphereSun(listOf(0.0, 90.0))
}
)
}
})
setCamera(
CameraOptions.Builder()
.center(Point.fromLngLat(24.81958807097479, 60.56524768721757))
.zoom(16.0)
.pitch(85.0)
.bearing(330.1)
.build()
)
setStyleUri(Style.STANDARD)
start { bitmap, error ->
if (bitmap != null) {
binding.maneuverView.setImageBitmap(bitmap)
binding.maneuverCaption.visibility = View.VISIBLE
} else {
Toast.makeText(
this@SkyLayerSnapshotterActivity,
"Snapshotter error: $error",
Toast.LENGTH_SHORT
).show()
}
}
}
}
override fun onDestroy() {
super.onDestroy()
snapshotter?.cancel()
}
}