Added 3d extrusions zoom-based opacity example (#1341)

MapboxAndroidDemo/src/global/java/com/mapbox/mapboxandroiddemo/MainActivity.java

@@ -42,6 +42,7 @@
 import com.mapbox.mapboxandroiddemo.examples.dds.PropertyIconDeterminationActivity;
 import com.mapbox.mapboxandroiddemo.examples.camera.ZoomToShowClusterLeavesActivity;
 import com.mapbox.mapboxandroiddemo.examples.dds.WithinExpressionActivity;
+import com.mapbox.mapboxandroiddemo.examples.extrusions.OpacityZoomChangeExtrusionKotlinActivity;
 import com.mapbox.mapboxandroiddemo.examples.javaservices.DirectionsProfileToggleActivity;
 import com.mapbox.mapboxandroiddemo.examples.javaservices.KotlinBorderedCircleActivity;
 import com.mapbox.mapboxandroiddemo.examples.dds.CreateHotspotsActivity;
@@ -771,6 +772,14 @@ private void initializeModels() {
       null,
       R.string.activity_extrusions_rotate_extrusions_url, false, BuildConfig.MIN_SDK_VERSION));
 
+    exampleItemModels.add(new ExampleItemModel(
+        R.id.nav_extrusions,
+        R.string.activity_extrusions_zoom_opacity_change_title,
+        R.string.activity_extrusions_zoom_opacity_change_description,
+        null,
+        new Intent(MainActivity.this, OpacityZoomChangeExtrusionKotlinActivity.class),
+        R.string.activity_extrusions_zoom_opacity_change_url, false, BuildConfig.MIN_SDK_VERSION));
+
     exampleItemModels.add(new ExampleItemModel(
       R.id.nav_plugins,
       R.string.activity_plugins_traffic_plugin_title,

MapboxAndroidDemo/src/main/AndroidManifest.xml

@@ -924,6 +924,13 @@
                 android:name="android.support.PARENT_ACTIVITY"
                 android:value="com.mapbox.mapboxandroiddemo.MainActivity" />
         </activity>
+        <activity
+            android:name=".examples.extrusions.OpacityZoomChangeExtrusionKotlinActivity"
+            android:label="@string/activity_extrusions_zoom_opacity_change_title">
+            <meta-data
+                android:name="android.support.PARENT_ACTIVITY"
+                android:value="com.mapbox.mapboxandroiddemo.MainActivity" />
+        </activity>
         <activity
             android:name=".examples.dds.PolygonHolesActivity"
             android:label="@string/activity_dds_polygon_holes_title">

MapboxAndroidDemo/src/main/java/com/mapbox/mapboxandroiddemo/examples/extrusions/OpacityZoomChangeExtrusionKotlinActivity.kt

@@ -0,0 +1,119 @@
+package com.mapbox.mapboxandroiddemo.examples.extrusions
+
+import android.graphics.Color
+import android.os.Bundle
+import androidx.appcompat.app.AppCompatActivity
+import com.mapbox.mapboxandroiddemo.R
+import com.mapbox.mapboxsdk.Mapbox
+import com.mapbox.mapboxsdk.camera.CameraUpdateFactory.zoomTo
+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.exponential
+import com.mapbox.mapboxsdk.style.expressions.Expression.get
+import com.mapbox.mapboxsdk.style.expressions.Expression.interpolate
+import com.mapbox.mapboxsdk.style.expressions.Expression.linear
+import com.mapbox.mapboxsdk.style.expressions.Expression.literal
+import com.mapbox.mapboxsdk.style.expressions.Expression.stop
+import com.mapbox.mapboxsdk.style.expressions.Expression.zoom
+import com.mapbox.mapboxsdk.style.layers.FillExtrusionLayer
+import com.mapbox.mapboxsdk.style.layers.PropertyFactory
+import kotlinx.android.synthetic.main.activity_zoom_opacity_extrusion.*
+
+/**
+ * Use runtime styling to make a [FillExtrusionLayer]'s opacity based on the
+ * map's zoom level. The 3D building extrusions will be come less opaque as the
+ * camera moves closer to the buildings.
+ */
+class OpacityZoomChangeExtrusionKotlinActivity : AppCompatActivity(), OnMapReadyCallback {
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        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_zoom_opacity_extrusion)
+        mapView?.onCreate(savedInstanceState)
+        mapView?.getMapAsync(this)
+    }
+
+    override fun onMapReady(mapboxMap: MapboxMap) {
+        mapboxMap.setStyle(Style.LIGHT) { style ->
+
+            // Add the 3D buildings' FillExtrusionLayer to the map style
+            style.addLayer(FillExtrusionLayer("building-layer-id",
+                    "composite").apply {
+                sourceLayer = "building"
+                minZoom = 15.0f
+                setProperties(
+                        PropertyFactory.fillExtrusionColor(Color.LTGRAY),
+                        PropertyFactory.fillExtrusionHeight(
+                                interpolate(
+                                        exponential(1),
+                                        zoom(),
+                                        stop(15, literal(0)),
+                                        stop(16, get("height"))
+                                )
+                        ),
+                        // Use a runtime styling property to make the opacity
+                        // dependent on the camera zoom value
+                        PropertyFactory.fillExtrusionOpacity(interpolate(linear(),
+                                zoom(),
+                                stop(15.3, .1),
+                                stop(17.5, 1)))
+                )
+            })
+
+            // Zoom the camera in and then back out to show the opacity change
+            // as the zoom value changes.
+            mapboxMap.easeCamera(zoomTo(18.0), 5000,
+                    object : MapboxMap.CancelableCallback {
+                        override fun onFinish() {
+                            mapboxMap.easeCamera(zoomTo(15.4), 5000)
+                        }
+
+                        override fun onCancel() {
+                            // Empty because not needed in this example
+                        }
+                    })
+        }
+    }
+
+    // Add the mapView lifecycle to the activity's lifecycle methods
+    public override fun onResume() {
+        super.onResume()
+        mapView?.onResume()
+    }
+
+    override fun onStart() {
+        super.onStart()
+        mapView?.onStart()
+    }
+
+    override fun onStop() {
+        super.onStop()
+        mapView?.onStop()
+    }
+
+    public override fun onPause() {
+        super.onPause()
+        mapView?.onPause()
+    }
+
+    override fun onLowMemory() {
+        super.onLowMemory()
+        mapView?.onLowMemory()
+    }
+
+    override fun onDestroy() {
+        super.onDestroy()
+        mapView?.onDestroy()
+    }
+
+    override fun onSaveInstanceState(outState: Bundle) {
+        super.onSaveInstanceState(outState)
+        mapView?.onSaveInstanceState(outState)
+    }
+}

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

@@ -0,0 +1,19 @@
+<?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"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    tools:context="com.mapbox.mapboxandroiddemo.examples.extrusions.OpacityZoomChangeExtrusionKotlinActivity">
+
+    <com.mapbox.mapboxsdk.maps.MapView
+        android:id="@+id/mapView"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        mapbox:mapbox_cameraTargetLat="40.76611"
+        mapbox:mapbox_cameraTargetLng="-73.978462"
+        mapbox:mapbox_cameraTilt="47.7"
+        mapbox:mapbox_cameraBearing="200.45"
+        mapbox:mapbox_cameraZoom="13" />
+
+</FrameLayout>

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

@@ -43,6 +43,7 @@
     <string name="activity_extrusions_population_density_extrusions_description">Use extrusions to display 3D building height based on imported vector data.</string>
     <string name="activity_extrusions_adjust_extrusions_description">Change the location and color of the light shined on extrusions.</string>
     <string name="activity_extrusions_rotate_extrusions_description">Rotate and tilt device to change camera and see all around 3D buildings.</string>
+    <string name="activity_extrusions_zoom_opacity_change_description">Use runtime styling to make the 3D buildings\' opacity dependent on the map\'s zoom level.</string>
     <string name="activity_extrusions_indoor_3d_description">Create a 3D indoor map with the fill-extrude-height paint property.</string>
     <string name="activity_dds_style_circle_categorically_description">Using a categorical circle-color property function for a visualization.</string>
     <string name="activity_dds_kotlin_style_circle_categorically_description">Kotlin example for using a categorical circle-color property function for a visualization.</string>

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

@@ -43,6 +43,7 @@
     <string name="activity_extrusions_adjust_extrusions_title">Adjust light location and color</string>
     <string name="activity_extrusions_rotate_extrusions_title">Rotate and tilt with 3D buildings</string>
     <string name="activity_extrusions_indoor_3d_title">Extrude polygons for 3D indoor mapping</string>
+    <string name="activity_extrusions_zoom_opacity_change_title">Zoom-based opacity</string>
     <string name="activity_dds_style_circle_categorically_title">Style circles categorically</string>
     <string name="activity_dds_style_kotlin_circle_categorically_title">Kotlin: Styled circles</string>
     <string name="activity_dds_choropleth_zoom_change_title">Update a choropleth layer by zoom level</string>

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

@@ -42,6 +42,7 @@
     <string name="activity_extrusions_adjust_extrusions_url" translatable="false">http://i.imgur.com/XNTyIO5.png</string>
     <string name="activity_extrusions_indoor_3d_url" translatable="false">http://i.imgur.com/1at7cMf.png</string>
     <string name="activity_extrusions_rotate_extrusions_url" translatable="false">http://i.imgur.com/OzcCsB2.png</string>
+    <string name="activity_extrusions_zoom_opacity_change_url" translatable="false">https://i.imgur.com/7FomeoZ.png</string>
     <string name="activity_dds_style_circle_categorically_url" translatable="false">http://i.imgur.com/C3mtfgF.png</string>
     <string name="activity_dds_heatmap_url" translatable="false">https://i.imgur.com/VektJUJ.png</string>
     <string name="activity_dds_multiple_heatmap_styling_url" translatable="false">https://i.imgur.com/Uw2DHWB.png</string>