This repository has been archived by the owner on Oct 7, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 493
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added 3d extrusions zoom-based opacity example (#1341)
- Loading branch information
Langston Smith
authored
May 6, 2020
1 parent
2aa6f88
commit cd67c64
Showing
7 changed files
with
157 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
119 changes: 119 additions & 0 deletions
119
.../mapbox/mapboxandroiddemo/examples/extrusions/OpacityZoomChangeExtrusionKotlinActivity.kt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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) | ||
} | ||
} |
19 changes: 19 additions & 0 deletions
19
MapboxAndroidDemo/src/main/res/layout/activity_zoom_opacity_extrusion.xml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters