Skip to content

Commit 816ca5f

Browse files
natiginfojushpengdev
authored
Update color theme example to use *UseTheme (#2949)
* Update color theme example to use `UseTheme` * Remove fill-layer usage * Simplify code * Update mapbox-maps-android/app/src/main/res/values/strings.xml Co-authored-by: Ramon <[email protected]> * Update mapbox-maps-android/compose-app/src/main/java/com/mapbox/maps/compose/testapp/examples/style/ColorThemeActivity.kt Co-authored-by: Peng Liu <[email protected]> --------- Co-authored-by: Ramon <[email protected]> Co-authored-by: Peng Liu <[email protected]>
1 parent 44a9681 commit 816ca5f

File tree

4 files changed

+81
-9
lines changed

4 files changed

+81
-9
lines changed

‎app/src/main/java/com/mapbox/maps/testapp/examples/style/ColorThemeActivity.kt‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,12 @@ import com.mapbox.maps.MapboxExperimental
1111
import com.mapbox.maps.MapboxMap
1212
import com.mapbox.maps.Style
1313
import com.mapbox.maps.dsl.cameraOptions
14+
import com.mapbox.maps.extension.style.atmosphere.generated.atmosphere
15+
import com.mapbox.maps.extension.style.atmosphere.generated.getAtmosphere
1416
import com.mapbox.maps.extension.style.color.colorTheme
1517
import com.mapbox.maps.extension.style.style
1618
import com.mapbox.maps.testapp.R
19+
import com.mapbox.maps.testapp.examples.annotation.AnnotationUtils.showShortToast
1720
import com.mapbox.maps.testapp.utils.BitmapUtils.bitmapFromDrawableRes
1821

1922
/**
@@ -24,6 +27,7 @@ import com.mapbox.maps.testapp.utils.BitmapUtils.bitmapFromDrawableRes
2427
class ColorThemeActivity : AppCompatActivity() {
2528

2629
private lateinit var mapboxMap: MapboxMap
30+
private var atmosphereUseTheme = true
2731

2832
override fun onCreate(savedInstanceState: Bundle?) {
2933
super.onCreate(savedInstanceState)
@@ -38,6 +42,9 @@ class ColorThemeActivity : AppCompatActivity() {
3842
mapboxMap.loadStyle(
3943
style(Style.MAPBOX_STREETS) {
4044
+colorTheme(base64 = BASE64_ENCODED_RED_THEME)
45+
+atmosphere {
46+
color(COLOR_GREEN)
47+
}
4148
}
4249
)
4350
}
@@ -58,8 +65,22 @@ class ColorThemeActivity : AppCompatActivity() {
5865
mapboxMap.setStyleColorTheme(base64 = BASE64_ENCODED_RED_THEME)
5966
}
6067

68+
R.id.menu_action_color_theme_toggle_atmosphere -> {
69+
atmosphereUseTheme = !atmosphereUseTheme
70+
showShortToast("Color theme will ${"not ".takeUnless { atmosphereUseTheme } ?: ""}affect atmosphere.")
71+
mapboxMap.getStyle {
72+
it.getAtmosphere().colorUseTheme(
73+
if (atmosphereUseTheme) COLOR_USE_THEME_DEFAULT else COLOR_USE_THEME_NONE
74+
)
75+
}
76+
}
77+
6178
R.id.menu_action_color_theme_reset -> {
6279
mapboxMap.setStyleColorTheme(colorTheme = null)
80+
atmosphereUseTheme = true
81+
mapboxMap.getStyle {
82+
it.getAtmosphere().colorUseTheme(COLOR_USE_THEME_DEFAULT)
83+
}
6384
}
6485

6586
else -> return super.onOptionsItemSelected(item)
@@ -81,12 +102,15 @@ class ColorThemeActivity : AppCompatActivity() {
81102
*/
82103
private const val BASE64_ENCODED_RED_THEME =
83104
"iVBORw0KGgoAAAANSUhEUgAABAAAAAAgCAYAAACM/gqmAAAAAXNSR0IArs4c6QAABSFJREFUeF7t3cFO40AQAFHnBv//wSAEEgmJPeUDsid5h9VqtcMiZsfdPdXVzmVZlo+3ZVm+fr3//L7257Lm778x+prL1ff0/b//H+z/4/M4OkuP/n70Nc7f+nnb+yzb//sY6vxt5xXPn+dP/aH+GsXJekb25izxR/ypZ6ucUefv9g4z2jPP3/HPHwAAgABAABgACIACkAAsAL1SD4yKWQAUAHUBdAG8buKNYoYL8PEX4FcHQAAAAAAAAAAAAAAAAAAAAAAA8LAeGF1mABAABAABQACQbZP7+hk5AwACAAAAAAAAAAAAAAAAAAAAAAAA4EE9AICMx4QBAAAAAAAANgvJsxGQV1dA/PxmMEtxU9YoABQACoC5CgDxX/wvsb2sEf/Ff/Ff/N96l5n73+/5YAB4CeBqx2VvMqXgUfD2npkzBCAXEBeQcrkoa5x/FxAXEBcQF5A2Wy3/t32qNYr8I//Mln+MABgBMAJgBMAIgBEAIwBGAIwAGAEwAmAE4K4eAGCNQIw+qQ0AmQ+AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB/6gEABAB5RgACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAN/UAAPKcAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgEFNODICRtDkDO/gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOhvlPUWem+h9xKQ+V4CUt9wO6KZnn/Pv+ff8z/bW5DFP59CUnJbWSP+iX/iX78znqED/urxnwHAAGAAMAAYAAwABgADgAHAAGAAMAAYAAwABgADoNMcHUAdQAQcAUfAe8xEwH0O86t3IPz8OvClu17WqD/UH+oP9cf1Gdia01d/LQsDgAHAAGAAMAAYAAwABgADgAHAAGAAMAAYAAwABkCnSQwABgACj8Aj8D1mItAMAB1wHfDS3S5r5F/5V/6Vf3XAW12h/mIArHY89iZTAAQA2XtmBKAWqOslyf4rgBXACmAFcIur8k/bJ/mnQTr5V/6Vf+fKv0YAjAAYATACYATACIARACMARgCMABgBMAJgBMAIgBEAIwCdZuiA64AjwAgwAtxjpg6cDlztLlLA7/Pr1gueyr56/jx/5ZzUNeof9Y/6R/0zk4HGAGAAMAAYAAwABgADgAHAAGAAMAAYAAwABgADgAHQaQ4DgAGAgCPgCHiPmTqQOpC1u8gAYACMjAf5V/6Vf+XfmTrQ8l97v8Z/5X8GAAOAAcAAYAAwABgADAAGAAOAAcAAYAAwABgADIBO0xgADAAdCB0IHYgeMxkADAAdkGM7IPbf/pfuWlmj/lH/qH/UPzMZGAwABgADgAHAAGAAMAAYAAwABgADgAHAAGAAMAAYAJ3mMAAYAAg4Ao6A95jJAGAA6EDrQJfuclkj/8q/8q/8O1MHWv47Nv8xABgADAAGAAOAAcAAYAAwABgADAAGAAOAAcAAYAB0msYAYADoQOhA6ED0mMkAYADogBzbAbH/9r/YFWWN+kf9o/5R/8xkYDAAGAAMAAYAA4ABwABgADAAGAAMAAYAA4ABwABgAHSawwBgACDgCDgC3mMmA4ABoAOtA126y2WN/Cv/yr/y70wdaPnv2PzHAGAAMAAYAAwABgADgAHAAGAAMAAYAAwABgADgAHQaRoDgAGgA6EDoQPRYyYDgAGgA3JsB8T+2/9iV5Q16h/1j/pH/TOTgcEAYAAwABgADAAGAAOAAcAAYAAwABgADAAGAAPgyQ2AT4NBIB3ew5dkAAAAAElFTkSuQmCC"
105+
private const val COLOR_USE_THEME_DEFAULT = "default"
106+
private const val COLOR_USE_THEME_NONE = "none"
107+
private const val COLOR_GREEN = "#00ff00"
84108
private const val LATITUDE = 40.72
85109
private const val LONGITUDE = -73.99
86110
private val CENTER = Point.fromLngLat(LONGITUDE, LATITUDE)
87111
private val START_CAMERA_POSITION = cameraOptions {
88112
center(CENTER)
89-
zoom(11.0)
113+
zoom(2.0)
90114
pitch(45.0)
91115
}
92116
}

‎app/src/main/res/menu/menu_color_theme.xml‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,14 @@
22
<menu xmlns:android="http://schemas.android.com/apk/res/android">
33
<item
44
android:id="@+id/menu_action_color_theme_image"
5-
android:title="@string/color_theme_monochrome"/>
5+
android:title="@string/color_theme_monochrome" />
66
<item
77
android:id="@+id/menu_action_color_theme_base64"
8-
android:title="@string/color_theme_red"/>
8+
android:title="@string/color_theme_red" />
9+
<item
10+
android:id="@+id/menu_action_color_theme_toggle_atmosphere"
11+
android:title="@string/color_theme_toggle_atmosphere" />
912
<item
1013
android:id="@+id/menu_action_color_theme_reset"
11-
android:title="@string/color_theme_reset"/>
14+
android:title="@string/color_theme_reset" />
1215
</menu>

‎app/src/main/res/values/strings.xml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -187,4 +187,5 @@
187187
<string name="color_theme_red">Red</string>
188188
<string name="color_theme_reset">Reset</string>
189189
<string name="color_theme_monochrome">Monochrome</string>
190+
<string name="color_theme_toggle_atmosphere">Use theme color for Atmosphere</string>
190191
</resources>

‎compose-app/src/main/java/com/mapbox/maps/compose/testapp/examples/style/ColorThemeActivity.kt‎

Lines changed: 49 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,19 @@ import androidx.compose.foundation.layout.Column
77
import androidx.compose.foundation.layout.fillMaxSize
88
import androidx.compose.foundation.layout.padding
99
import androidx.compose.foundation.shape.RoundedCornerShape
10+
import androidx.compose.material.ExperimentalMaterialApi
11+
import androidx.compose.material.FilterChip
1012
import androidx.compose.material.FloatingActionButton
13+
import androidx.compose.material.Icon
1114
import androidx.compose.material.Text
15+
import androidx.compose.material.icons.Icons
16+
import androidx.compose.material.icons.filled.Done
1217
import androidx.compose.runtime.getValue
1318
import androidx.compose.runtime.mutableStateOf
1419
import androidx.compose.runtime.remember
1520
import androidx.compose.runtime.setValue
1621
import androidx.compose.ui.Modifier
22+
import androidx.compose.ui.graphics.Color
1723
import androidx.compose.ui.unit.dp
1824
import com.mapbox.geojson.Point
1925
import com.mapbox.maps.MapboxExperimental
@@ -24,7 +30,10 @@ import com.mapbox.maps.compose.testapp.ui.theme.MapboxMapComposeTheme
2430
import com.mapbox.maps.dsl.cameraOptions
2531
import com.mapbox.maps.extension.compose.MapboxMap
2632
import com.mapbox.maps.extension.compose.animation.viewport.rememberMapViewportState
33+
import com.mapbox.maps.extension.compose.style.ColorValue
2734
import com.mapbox.maps.extension.compose.style.GenericStyle
35+
import com.mapbox.maps.extension.compose.style.StringValue
36+
import com.mapbox.maps.extension.compose.style.atmosphere.generated.rememberAtmosphereState
2837
import com.mapbox.maps.extension.compose.style.rememberColorTheme
2938
import com.mapbox.maps.extension.compose.style.rememberStyleColorTheme
3039
import com.mapbox.maps.extension.compose.style.rememberStyleState
@@ -36,7 +45,7 @@ import com.mapbox.maps.extension.style.color.colorTheme
3645
*/
3746
public class ColorThemeActivity : ComponentActivity() {
3847

39-
@OptIn(MapboxExperimental::class)
48+
@OptIn(MapboxExperimental::class, ExperimentalMaterialApi::class)
4049
override fun onCreate(savedInstanceState: Bundle?) {
4150
super.onCreate(savedInstanceState)
4251
setContent {
@@ -48,7 +57,22 @@ public class ColorThemeActivity : ComponentActivity() {
4857
var currentColorTheme by remember {
4958
mutableStateOf(base64ColorTheme)
5059
}
51-
var currentStyleColorTheme = rememberStyleColorTheme(currentColorTheme)
60+
val currentStyleColorTheme = rememberStyleColorTheme(currentColorTheme)
61+
var atmosphereUseTheme by remember {
62+
mutableStateOf(true)
63+
}
64+
val initialAtmosphereState = rememberAtmosphereState {
65+
color = ColorValue(Color.Green)
66+
}
67+
val currentAtmosphereState by remember {
68+
mutableStateOf(initialAtmosphereState)
69+
}
70+
71+
// When state is toggled, update atmosphere state with correct string value.
72+
// Setting it to "none" means that color theme will not affect atmosphere.
73+
currentAtmosphereState.colorUseTheme = StringValue(
74+
if (atmosphereUseTheme) "default" else "none"
75+
)
5276

5377
MapboxMapComposeTheme {
5478
ExampleScaffold(
@@ -82,6 +106,26 @@ public class ColorThemeActivity : ComponentActivity() {
82106
) {
83107
Text(modifier = Modifier.padding(10.dp), text = "Reset")
84108
}
109+
110+
FilterChip(
111+
onClick = {
112+
atmosphereUseTheme = !atmosphereUseTheme
113+
},
114+
content = {
115+
Text("Use theme color for Atmosphere")
116+
},
117+
selected = atmosphereUseTheme,
118+
leadingIcon = if (atmosphereUseTheme) {
119+
{
120+
Icon(
121+
imageVector = Icons.Filled.Done,
122+
contentDescription = null,
123+
)
124+
}
125+
} else {
126+
null
127+
},
128+
)
85129
}
86130
}
87131
) {
@@ -95,11 +139,11 @@ public class ColorThemeActivity : ComponentActivity() {
95139
style = Style.MAPBOX_STREETS,
96140
styleState = rememberStyleState {
97141
styleColorTheme = currentStyleColorTheme
142+
atmosphereState = currentAtmosphereState
98143
},
99144
)
100145
}
101-
) {
102-
}
146+
)
103147
}
104148
}
105149
}
@@ -124,7 +168,7 @@ public class ColorThemeActivity : ComponentActivity() {
124168
private val CENTER = Point.fromLngLat(LONGITUDE, LATITUDE)
125169
private val START_CAMERA_POSITION = cameraOptions {
126170
center(CENTER)
127-
zoom(11.0)
171+
zoom(2.0)
128172
pitch(45.0)
129173
}
130174
}

0 commit comments

Comments
 (0)