Opacity fade
activity_satellite_opacity_on_zoom
<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:mapbox="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".examples.styles.SatelliteOpacityOnZoomActivity"> <com.google.android.material.floatingactionbutton.FloatingActionButtonandroid:id="@+id/swap_streets_and_satellite_order_toggle_fab"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="end|bottom"android:layout_margin="16dp"app:srcCompat="@drawable/ic_swap_horiz_white_24dp"tools:backgroundTint="@color/colorAccent" /> <com.mapbox.mapboxsdk.maps.MapViewandroid:id="@+id/mapView"android:layout_width="match_parent"android:layout_height="match_parent"mapbox:mapbox_cameraTargetLat="30.044"mapbox:mapbox_cameraTargetLng="31.235"mapbox:mapbox_cameraZoom="10"mapbox:mapbox_cameraZoomMin="6"/> </FrameLayout>
SatelliteOpacityOnZoomActivity.java
package com.mapbox.mapboxandroiddemo.examples.styles; import android.os.Bundle;import android.view.View;import android.widget.Toast; import androidx.annotation.NonNull;import androidx.appcompat.app.AppCompatActivity; import com.mapbox.mapboxandroiddemo.R;import com.mapbox.mapboxsdk.Mapbox;import com.mapbox.mapboxsdk.camera.CameraPosition;import com.mapbox.mapboxsdk.camera.CameraUpdateFactory;import com.mapbox.mapboxsdk.maps.MapView;import com.mapbox.mapboxsdk.maps.MapboxMap;import com.mapbox.mapboxsdk.maps.OnMapReadyCallback;import com.mapbox.mapboxsdk.maps.Style;import com.mapbox.mapboxsdk.style.expressions.Expression;import com.mapbox.mapboxsdk.style.layers.Layer;import com.mapbox.mapboxsdk.style.layers.PropertyValue;import com.mapbox.mapboxsdk.style.layers.RasterLayer;import com.mapbox.mapboxsdk.style.sources.RasterSource; import static com.mapbox.mapboxsdk.style.expressions.Expression.interpolate;import static com.mapbox.mapboxsdk.style.expressions.Expression.linear;import static com.mapbox.mapboxsdk.style.expressions.Expression.stop;import static com.mapbox.mapboxsdk.style.expressions.Expression.zoom;import static com.mapbox.mapboxsdk.style.layers.PropertyFactory.rasterOpacity; /*** Create an effect of seamlessly fading from one map style to another with runtime styling opacity.* Go from the Mapbox Streets style to a satellite photo raster layer as the map camera zooms in.* This is similar to how Snap uses Mapbox for Snap Maps.*/public class SatelliteOpacityOnZoomActivity extends AppCompatActivity implementsOnMapReadyCallback { private static final String SATELLITE_RASTER_SOURCE_ID = "SATELLITE_RASTER_SOURCE_ID";private static final String SATELLITE_RASTER_LAYER_ID = "SATELLITE_RASTER_LAYER_ID";private MapView mapView;private MapboxMap mapboxMap;private boolean satelliteSetToReveal = false; private PropertyValue<Expression> expressionRevealingSatellite = rasterOpacity(interpolate(linear(), zoom(),stop(15, 0),stop(18, 1))); private PropertyValue<Expression> expressionRevealingMapboxStreets = rasterOpacity(interpolate(linear(), zoom(),stop(12, 1),stop(16, 0))); @Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState); // Mapbox access token is configured here. This needs to be called either in your application// object or in the same activity which contains the mapview.Mapbox.getInstance(this, getString(R.string.access_token)); // This contains the MapView in XML and needs to be called after the access token is configured.setContentView(R.layout.activity_satellite_opacity_on_zoom); mapView = findViewById(R.id.mapView);mapView.onCreate(savedInstanceState);mapView.getMapAsync(this);} @Overridepublic void onMapReady(@NonNull final MapboxMap mapboxMap) {mapboxMap.setStyle(Style.MAPBOX_STREETS, new Style.OnStyleLoaded() {@Overridepublic void onStyleLoaded(@NonNull Style style) { SatelliteOpacityOnZoomActivity.this.mapboxMap = mapboxMap; // Create a data source for the satellite raster image and add the source to the mapstyle.addSource(new RasterSource(SATELLITE_RASTER_SOURCE_ID,"mapbox://mapbox.satellite", 512)); // Create a new map layer for the satellite raster images and add the satellite layer to the map.// Use runtime styling to adjust the satellite layer's opacity based on the map camera's zoom levelstyle.addLayer(new RasterLayer(SATELLITE_RASTER_LAYER_ID, SATELLITE_RASTER_SOURCE_ID).withProperties(expressionRevealingSatellite)); // Create a new camera position and animate the map camera to show the fade in/out UI of the satellite layermapboxMap.animateCamera(CameraUpdateFactory.newCameraPosition(new CameraPosition.Builder().zoom(19).build()), 9000); findViewById(R.id.swap_streets_and_satellite_order_toggle_fab).setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {swapStreetsAndSatelliteOrder();Toast.makeText(SatelliteOpacityOnZoomActivity.this,R.string.zoom_in_and_out_instruction, Toast.LENGTH_SHORT).show();}});}});} private void swapStreetsAndSatelliteOrder() {mapboxMap.getStyle(new Style.OnStyleLoaded() {@Overridepublic void onStyleLoaded(@NonNull Style style) {Layer satelliteLayer = style.getLayer(SATELLITE_RASTER_LAYER_ID);if (satelliteLayer != null) {satelliteLayer.setProperties(satelliteSetToReveal ? expressionRevealingSatellite : expressionRevealingMapboxStreets);}satelliteSetToReveal = !satelliteSetToReveal;}});} // Add the mapView lifecycle to the activity's lifecycle methods@Overridepublic void onResume() {super.onResume();mapView.onResume();} @Overrideprotected void onStart() {super.onStart();mapView.onStart();} @Overrideprotected void onStop() {super.onStop();mapView.onStop();} @Overridepublic void onPause() {super.onPause();mapView.onPause();} @Overridepublic void onLowMemory() {super.onLowMemory();mapView.onLowMemory();} @Overrideprotected void onDestroy() {super.onDestroy();mapView.onDestroy();} @Overrideprotected void onSaveInstanceState(Bundle outState) {super.onSaveInstanceState(outState);mapView.onSaveInstanceState(outState);}}