Refactoring satellite streets opacity zoom fade example (#1274)

Author: Langston Smith

MapboxAndroidDemo/src/main/java/com/mapbox/mapboxandroiddemo/examples/styles/SatelliteOpacityOnZoomActivity.java

@@ -1,6 +1,9 @@
 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;
 
@@ -12,6 +15,9 @@
 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;
 
@@ -29,7 +35,21 @@
 public class SatelliteOpacityOnZoomActivity extends AppCompatActivity implements
   OnMapReadyCallback {
 
+  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)
+  ));
 
   @Override
   protected void onCreate(Bundle savedInstanceState) {
@@ -49,28 +69,51 @@ protected void onCreate(Bundle savedInstanceState) {
 
   @Override
   public void onMapReady(@NonNull final MapboxMap mapboxMap) {
-
     mapboxMap.setStyle(Style.MAPBOX_STREETS, new Style.OnStyleLoaded() {
       @Override
       public void onStyleLoaded(@NonNull Style style) {
+
+        SatelliteOpacityOnZoomActivity.this.mapboxMap = mapboxMap;
+
         // Create a data source for the satellite raster image and add the source to the map
-        style.addSource(new RasterSource("SATELLITE_RASTER_SOURCE_ID",
+        style.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 level
         style.addLayer(
-          new RasterLayer("SATELLITE_RASTER_LAYER_ID", "SATELLITE_RASTER_SOURCE_ID").withProperties(
-          rasterOpacity(interpolate(linear(), zoom(),
-            stop(15, 0),
-            stop(18, 1)
-          ))));
+          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 layer
         mapboxMap.animateCamera(
           CameraUpdateFactory.newCameraPosition(new CameraPosition.Builder()
             .zoom(19)
             .build()), 9000);
+
+        findViewById(R.id.swap_streets_and_satellite_order_toggle_fab).setOnClickListener(new View.OnClickListener() {
+          @Override
+          public 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() {
+      @Override
+      public void onStyleLoaded(@NonNull Style style) {
+        Layer satelliteLayer = style.getLayer(SATELLITE_RASTER_LAYER_ID);
+        if (satelliteLayer != null) {
+          satelliteLayer.setProperties(
+            satelliteSetToReveal ? expressionRevealingSatellite : expressionRevealingMapboxStreets
+          );
+        }
+        satelliteSetToReveal = !satelliteSetToReveal;
       }
     });
   }

MapboxAndroidDemo/src/main/java/com/mapbox/mapboxandroiddemo/examples/styles/ShowHideLayersActivity.java

@@ -28,7 +28,7 @@
 public class ShowHideLayersActivity extends AppCompatActivity {
 
   private MapView mapView;
-  private MapboxMap map;
+  private MapboxMap mapboxMap;
 
   @Override
   protected void onCreate(Bundle savedInstanceState) {
@@ -45,7 +45,7 @@ protected void onCreate(Bundle savedInstanceState) {
     mapView.getMapAsync(new OnMapReadyCallback() {
       @Override
       public void onMapReady(@NonNull MapboxMap mapboxMap) {
-        map = mapboxMap;
+        ShowHideLayersActivity.this.mapboxMap = mapboxMap;
         mapboxMap.setStyle(Style.LIGHT, new Style.OnStyleLoaded() {
           @Override
           public void onStyleLoaded(@NonNull Style style) {
@@ -74,6 +74,23 @@ public void onClick(View view) {
     });
   }
 
+
+  private void toggleLayer() {
+    mapboxMap.getStyle(new Style.OnStyleLoaded() {
+      @Override
+      public void onStyleLoaded(@NonNull Style style) {
+        Layer layer = style.getLayer("museums");
+        if (layer != null) {
+          if (VISIBLE.equals(layer.getVisibility().getValue())) {
+            layer.setProperties(visibility(NONE));
+          } else {
+            layer.setProperties(visibility(VISIBLE));
+          }
+        }
+      }
+    });
+  }
+
   @Override
   public void onResume() {
     super.onResume();
@@ -115,20 +132,4 @@ protected void onSaveInstanceState(Bundle outState) {
     super.onSaveInstanceState(outState);
     mapView.onSaveInstanceState(outState);
   }
-
-  private void toggleLayer() {
-    map.getStyle(new Style.OnStyleLoaded() {
-      @Override
-      public void onStyleLoaded(@NonNull Style style) {
-        Layer layer = style.getLayer("museums");
-        if (layer != null) {
-          if (VISIBLE.equals(layer.getVisibility().getValue())) {
-            layer.setProperties(visibility(NONE));
-          } else {
-            layer.setProperties(visibility(VISIBLE));
-          }
-        }
-      }
-    });
-  }
 }

MapboxAndroidDemo/src/main/res/layout/activity_satellite_opacity_on_zoom.xml

@@ -2,9 +2,19 @@
 <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.basics.SimpleMapViewActivity">
+    tools:context=".examples.styles.SatelliteOpacityOnZoomActivity">
+
+    <com.google.android.material.floatingactionbutton.FloatingActionButton
+        android: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.MapView
         android:id="@+id/mapView"
@@ -16,4 +26,4 @@
         mapbox:mapbox_cameraZoomMin="6"
          />
 
-</FrameLayout>
+</FrameLayout>

MapboxAndroidDemo/src/main/res/values/activity_strings.xml

@@ -424,6 +424,9 @@
     <!-- Variable label placement-->
     <string name="zoom_map_in_and_out_circle_to_icon_transition">Zoom in and out to see the circles transition to icons</string>
 
+    <!-- Zoom opacity swap-->
+    <string name="zoom_in_and_out_instruction">Zoom in and out to see the new order of the satellite and Streets styles</string>
+
     <!-- China bounds checker-->
     <string name="device_location">Device %1$s in China</string>
     <string name="china_style_with_english_labels_warning_toast">This style file isn\'t actually included in the app because of privacy reasons. Add the file to an assets folder. Please email Mapbox at apac-bd@mapbox.com if you need this file and/or have questions.</string>