Show Mapbox using Jetpack Compose

Issue

Versions

  • Mapbox 10.6.0-rc.1
  • Gradle 7.2.1

When I run an app mapbox tiles are black.
My code:

@Composable
fun MapboxScreen() {

    Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier
            .background(MaterialTheme.colorScheme.background)
            .fillMaxSize()
    ) {
        AndroidView(
            modifier = Modifier,
            factory = { context ->
                ResourceOptionsManager.getDefault(
                    context,
                    context.getString(R.string.mapbox_access_token)
                )

                MapView(context).apply {
                    getMapboxMap().loadStyleUri(Style.MAPBOX_STREETS) {
                         cameraOptions {
                              zoom(19.0)
                         }
                    }
                }
            )
         }
     }

Also I tried tokens in another app (non-compose) and there map tiles are shown correctly.

Was trying code as it is shown in this post: Mapbox map is black using jetpack compose but it wasn’t working…

Also tried older Mapbox v9.

Phone Screen

Solution

I had to remove in themes.xml item with background

<style name="Theme.AppCompat.MyTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
    <item name="android:background">@color/neutral_10</item> // remove this line
</style> 

and it worked like a charm.

Mapbox probably take these parameter as foreground color for mapbox.

Also posted more in details here https://github.com/mapbox/mapbox-maps-android/issues/1422

Answered By – tilen pintarić

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published