kotlinandroid-jetpack-composemapmyindia-api

How can I use MapMyIndia in Kotlin with Jetpack compose?


I've been trying to integrate MapMyIndia with jetpack compose but so far I have found nothing on how to use it for Turn-By-Turn navigation.

I have searched over the internet for references to MapMyIndia and Jetpack Compose but I have not found any article that has been able to help me.


Solution

  • For anyone who is looking for the specific code:

    @Composable
    fun MapComponent(modifier: Modifier = Modifier) {
        val context = LocalContext.current
        val lifecycleOwner = LocalLifecycleOwner.current
    
        MapplsAccountManager.getInstance().restAPIKey = "key"
        MapplsAccountManager.getInstance().mapSDKKey = "key"
        MapplsAccountManager.getInstance().atlasClientId = "client id"
        MapplsAccountManager.getInstance().atlasClientSecret = "secret"
        Mappls.getInstance(LocalContext.current)
    
        val mapView = remember { MapView(context).apply { onCreate(null) } }
    
        // Manage the lifecycle of the MapView
        DisposableEffect(lifecycleOwner) {
            val observer = LifecycleEventObserver { _, event ->
                when (event) {
                    Lifecycle.Event.ON_START -> mapView.onStart()
                    Lifecycle.Event.ON_RESUME -> mapView.onResume()
                    Lifecycle.Event.ON_PAUSE -> mapView.onPause()
                    Lifecycle.Event.ON_STOP -> mapView.onStop()
                    Lifecycle.Event.ON_DESTROY -> mapView.onDestroy()
                    else -> {}
                }
            }
    
            // Add observer to the lifecycle
            lifecycleOwner.lifecycle.addObserver(observer)
    
            // Cleanup when the effect leaves the composition
            onDispose {
                lifecycleOwner.lifecycle.removeObserver(observer)
                mapView.onDestroy()  // Proper cleanup of the MapView
            }
        }
    
        // AndroidView to display the MapView
        AndroidView(
            factory = { mapView },
            modifier = modifier
        )
    }