MapboxMapViewHolder

Overview

To access Mapbox SDK-specific features, use the MapboxMapViewHolder. The definition of MapboxMapViewHolder is as follows:

typealias MapboxMapViewHolder = MapViewHolderInterface<MapView, MapboxMap>

class MapboxMapViewHolder(
    override val mapView: MapView,
    override val map: MapboxMap,
) : MapViewHolderInterface<MapView, MapboxMap>,
    MapboxLifecycleObserver {
    fun toScreenOffset(position: GeoPointInterface): Offset?
    fun fromScreenOffsetSync(offset: Offset): GeoPoint?
    fun fromScreenOffset(coordinate: ScreenCoordinate): GeoPoint?
    suspend fun fromScreenOffset(offset: Offset): GeoPoint?
}

Properties

• mapView: MapView: MapView generated inside the MapboxView component
• map: Mapbox: Mapbox class for manipulating the MapView

Methods

• toScreenOffset(position: GeoPointInterface): Offset?: Returns the position on the map indicated by GeoPointInterface as a Dp value with the top-left of the MapView as (0,0)
• fromScreenOffsetSync(offset: Offset): GeoPoint?: Returns the GeoPointInterface position on the map for the position specified by Dp value with the top-left of the MapView as (0,0)
• fromScreenOffset(coordinate: ScreenCoordinate): GeoPoint?: Returns the GeoPointInterface position on the map for the position specified by ScreenCoordinate value with the top-left of the MapView as (0,0)
• fromScreenOffset(offset: Offset): GeoPoint?: Returns the GeoPointInterface position on the map for the position specified by Dp value with the top-left of the MapView as (0,0)

Getting MapboxMapViewHolder

MapboxMapViewHolder can be obtained through getMapViewHolder() after the map is initialized.

// Mapbox
val mapboxState = rememberMapboxMapViewState()
val mapboxHolder: MapboxMapViewHolder? = mapboxState.getMapViewHolder()

Sample

class MainActivity : ComponentActivity() {
    lateinit var permissionsManager: PermissionsManager

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()

        if (PermissionsManager.areLocationPermissionsGranted(this)) {
            // Process after location access permission (e.g., enable Maps SDK LocationComponent to display device location)
        } else {
            permissionsManager = PermissionsManager(this.permissionsListener)
            permissionsManager.requestLocationPermissions(this)
        }

        setContent {
            MapConductorSDKTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    BasicMapExample(
                        modifier =
                            Modifier
                                .padding(innerPadding)
                                .fillMaxSize(),
                    )
                }
            }
        }
    }

    var permissionsListener: PermissionsListener = object : PermissionsListener {
        override fun onExplanationNeeded(permissionsToExplain: List<String>) {
            // Display explanation for obtaining location access permission
        }

        override fun onPermissionResult(granted: Boolean) {
            if (granted) {
                // Process after location access permission (e.g., enable Maps SDK LocationComponent to display device location)
            } else {
                // User denied permission
            }
        }
    }
}

@Composable
fun BasicMapExample(modifier: Modifier = Modifier) {
    val mapViewState = rememberMapboxMapViewState(
        cameraPosition = MapCameraPosition(
            position = GeoPoint.fromLatLong(35.706400, 139.763635),
            zoom = 13.0
        ),
    )

    // Get ViewHolder
    var mapboxMapViewHolder by remember { mutableStateOf<MapboxMapViewHolder?>(null) }
    LaunchedEffect(mapboxMapViewHolder) {
        mapboxMapViewHolder?.let { holder ->
            with(holder.mapView) {
                location.locationPuck = createDefault2DPuck(withBearing = true)
                location.enabled = true
                location.pulsingEnabled = true
                location.puckBearing = PuckBearing.COURSE
                location.puckBearingEnabled = true
                viewport.transitionTo(
                    targetState = viewport.makeFollowPuckViewportState(),
                    transition = viewport.makeImmediateViewportTransition()
                )
            }
        }
    }

    MapboxMapView(
        state = mapViewState,
        modifier = modifier,
        onMapLoaded = {
            mapboxMapViewHolder = mapViewState.getMapViewHolder()
        }
    ) {}
}