Display an Indoor Map using Jetpack Compose and Mappedin

Jetpack Compose has become Android's recommended modern toolkit for building native UI. Google has migrated many XML based widgets to Jetpack Compose. However, at the time of writing this blog post, not all widgets have been migrated, notably Android WebView. This is significant to an app using the Mappedin SDK for Android because the MPIMapView used to display a map is based on Android WebView. Fortunately, this doesn’t prevent you from using MPIMapView in your Jetpack Compose app.

A Composable with an MPIMapView can be created for use with Jetpack Compose by making use of an AndroidView. This allows an app with a Compose based UI to make use of MPIMapView to display a map.

To allow attaching of an MPIMapViewListener and to call methods of the MPIMapView, the MPIMapView is instantiated outside of the AndroidView and its state is saved by remember. The MPIMapViewListener interface is implemented in the mapViewListener object below and later attached to the mapView variable.

Copy
@Composable
fun MappedinComposable() {
    val ctx = LocalContext.current
    val mapView by remember { mutableStateOf(MPIMapView(ctx)) }

    val mapViewListener = object : MPIMapViewListener {
        val tag = "MapViewScreen"

        override fun onDataLoaded(data: MPIData) {
            Log.i(tag, "Venue Data Loaded")
        }

        override fun onFirstMapLoaded() {
            Log.i(tag, "First Map Loaded")
        }
	//Implement the rest of the MPIMapViewListener methods…
     }

The AndroidView used to hold the MPIMapView is shown below. mapView layout parameters are set to allow it to take up the screen space it is provided. Next, loadVenue is called. loadVenue is an MPIMapView function that renders the venue in an app by passing in an options object and an optional ShowVenue options object.

Copy
AndroidView(
    factory = {
        mapView.layoutParams = ViewGroup.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT,
            ViewGroup.LayoutParams.MATCH_PARENT,
        )
        mapView.loadVenue(
            MPIOptions.Init(
                "5eab30aa91b055001a68e996",
                "RJyRXKcryCMy4erZqqCbuB1NbR66QTGNXVE0x3Pg6oCIlUR1",
                "mappedin-demo-mall",
            ),
        ) { Log.e("MappedinComposable", "Error loading map view") }
        mapView.listener = mapViewListener
        mapView
    },
)

The MPIOptions object contains a venue, clientId, clientSecret, and optional headers. To get started use the Mappedin Id and Secret that has access to demo venues. To start using your own venues with the SDK you will need to contact a Mappedin representative to get your own unique Id and Secret.

The MPIMapViewListener named mapViewListener, which is defined in the code snippet at the beginning of the article is set as the mapView listener, which is then returned to the factory.

The MappedinComposable is now ready to be used in an app. Complete sample code for the MappedinComposable can be found in our Android Developer Guide: Using Jetpack Compose