Fly-to camera animation
This example demonstrates the usage of [MapboxMap.flyTo(https://docs.mapbox.com/android/maps/api/11.11.0/mapbox-maps-android/com.mapbox.maps.plugin.animation/fly-to.html) on a map with globe projection, atmosphere, and terrain to smoothly zoom to a specified location with the Maps SDK for Android. The GlobeFlyToActivity class and implements OnMapClickListener. Within the onCreate method, the app sets up the MapView, loads the style with a globe projection, configures atmosphere settings including color and horizon blend, adds a raster DEM source, and enables terrain rendering. Upon completion of the map setup, a Toast message guides users to tap on the map to trigger the fly-to animation.
When the user taps on the map, the onMapClick function is triggered to determine the target camera location based on the current state, and the flyTo method is called on the mapboxMap with animation options specifying a duration of 12 seconds. The camera options for the start and end locations are stored as constants within a private companion object. This example provides a seamless zooming experience to showcase the globe view of the map with atmospheric effects.
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.globe
import android.graphics.Color.rgb
import android.os.Bundle
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import com.mapbox.geojson.Point
import com.mapbox.maps.MapView
import com.mapbox.maps.MapboxMap
import com.mapbox.maps.Style
import com.mapbox.maps.dsl.cameraOptions
import com.mapbox.maps.extension.style.atmosphere.generated.atmosphere
import com.mapbox.maps.extension.style.layers.properties.generated.ProjectionName
import com.mapbox.maps.extension.style.projection.generated.projection
import com.mapbox.maps.extension.style.sources.generated.rasterDemSource
import com.mapbox.maps.extension.style.style
import com.mapbox.maps.extension.style.terrain.generated.terrain
import com.mapbox.maps.plugin.animation.MapAnimationOptions.Companion.mapAnimationOptions
import com.mapbox.maps.plugin.animation.flyTo
import com.mapbox.maps.plugin.gestures.OnMapClickListener
import com.mapbox.maps.plugin.gestures.addOnMapClickListener
import com.mapbox.maps.testapp.R
/**
* Use [MapboxMap.flyTo] on a map with globe projection, atmosphere and terrain to slowly zoom to a location.
*/
class GlobeFlyToActivity : AppCompatActivity(), OnMapClickListener {
private lateinit var mapboxMap: MapboxMap
private var isAtStart = true
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val mapView = MapView(this)
setContentView(mapView)
mapboxMap = mapView.mapboxMap
mapboxMap.loadStyle(
style(Style.SATELLITE_STREETS) {
+projection(ProjectionName.GLOBE)
+atmosphere {
color(rgb(220, 159, 159)) // Pink fog / lower atmosphere
highColor(rgb(220, 159, 159)) // Blue sky / upper atmosphere
horizonBlend(0.4) // Exaggerate atmosphere (default is .1)
}
+rasterDemSource("raster-dem") {
url("mapbox://mapbox.terrain-rgb")
}
+terrain("raster-dem")
}
) {
// Toast instructing user to tap on the map
Toast.makeText(
this@GlobeFlyToActivity,
getString(R.string.tap_on_map_instruction),
Toast.LENGTH_LONG
).show()
mapboxMap.addOnMapClickListener(this@GlobeFlyToActivity)
}
}
override fun onMapClick(point: Point): Boolean {
val target = if (isAtStart) CAMERA_END else CAMERA_START
isAtStart = !isAtStart
mapboxMap.flyTo(
target,
mapAnimationOptions {
duration(12_000)
}
)
return true
}
private companion object {
private val CAMERA_START = cameraOptions {
center(Point.fromLngLat(80.0, 36.0))
zoom(1.0)
pitch(0.0)
bearing(0.0)
}
private val CAMERA_END = cameraOptions {
center(Point.fromLngLat(8.11862, 46.58842))
zoom(12.5)
pitch(75.0)
bearing(130.0)
}
}
}