How to pass Mapbox Access Token in Jetpack Compose - kotlin

Question

I'm trying to add Mapbox to a Jetpack Compose project. The Documentation has no information about Jetpack Compose so I'm struggling with adding my Access Token to the Map instance.
I have added my Access Token as a string resource named mapbox_access_token as described in the Docs. But the Token doesn't get send to the request to fetch the styles I just get a 401 Error returned:
OnMapLoadError: STYLE, message: Failed to load style: HTTP status code 401, sourceID: null, tileID: null
This is my Composable to display a Map:
#Composable
fun MapboxMap() {
val mapView = rememberMap(0.0, 0.0)
val accessToken = stringResource(R.string.mapbox_access_token)
AndroidView(
factory = { mapView },
modifier = Modifier.fillMaxSize(),
update = {}
)
}
#Composable
private fun rememberMap(latitude: Double, longitude: Double): MapView {
val accessToken = stringResource(R.string.mapbox_access_token)
val context = LocalContext.current
val isDarkTheme = LocalDarkMode.current
val mapView = remember {
MapView(context).apply {
val mapBoxMap = this.getMapboxMap()
mapBoxMap.loadStyleUri(if (isDarkTheme) Style.DARK else Style.LIGHT)
mapBoxMap.setCamera(
cameraOptions = cameraOptions {
center(Point.fromLngLat(longitude, latitude))
zoom(6.0)
}
)
}
}
return mapView
}
I store the mapbox_access_token in a file at this location: res/values/mapbox_access_token.xml. The Docs say to store it inside a files called R.strings.xml might this cause MapBox to not find the my access token?
This is how my screen looks when I add my MapboxMap Composable. The map is not getting loaded because my access token is not sent with the request to get the style.

Answer 1

I think that you did not initialize the map properly.
Here is almost minimal example that is at least working for me.
#Composable
fun MapExample(latitude: Double = 0.0, longitude: Double = 0.0) {
val mapView = rememberMap(latitude, longitude)
ConstraintLayout(
modifier = Modifier.fillMaxSize()
) {
val mapRef = createRef()
AndroidView(
factory = { mapView },
modifier = Modifier
.constrainAs(mapRef) {
height = Dimension.fillToConstraints
width = Dimension.fillToConstraints
top.linkTo(parent.top)
bottom.linkTo(parent.bottom)
start.linkTo(parent.start)
end.linkTo(parent.end)
},
update = { }
)
}
}
#Composable
fun rememberMap(latitude: Double, longitude: Double): MapView {
val context = LocalContext.current
val mapView = remember {
MapView(context).apply {
val mapboxMap = this.getMapboxMap()
mapboxMap.loadStyleUri(Style.MAPBOX_STREETS)
mapboxMap.setCamera(
cameraOptions = cameraOptions {
center(Point.fromLngLat(longitude, latitude))
zoom(6.0)
}
)
}
}
return mapView
}
The second thing which might be the case is that you did not create and import your secret token, as can be seen here. Hope this helps. But main reason is that you probably just did not call
MapView(context).apply{
val mapboxMap = this.getMapboxMap()
mapboxMap.loadStyleUri(Style.MAPBOX_STREETS)}

Answer 2

I think you forgot to add this code in your rememberMap function
Mapbox.getInstance(context, stringResource(R.string.mapbox_access_token))
this is your full code look like
#Composable
private fun rememberMap(latitude: Double, longitude: Double): MapView {
// val accessToken = stringResource(R.string.mapbox_access_token)
val context = LocalContext.current
val isDarkTheme = LocalDarkMode.current
val mapView = remember {
Mapbox.getInstance(context, stringResource(R.string.mapbox_access_token))
MapView(context).apply {
val mapBoxMap = this.getMapboxMap()
mapBoxMap.loadStyleUri(if (isDarkTheme) Style.DARK else Style.LIGHT)
mapBoxMap.setCamera(
cameraOptions = cameraOptions {
center(Point.fromLngLat(longitude, latitude))
zoom(6.0)
}
)
}
}
return mapView
}