Using Jetpack Compose

Using Mappedin SDK for Android with your own map requires a Pro license. Try a demo map for free or refer to the Pricing page for more information.

A Composable with a MapView 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 MapView to display an interactive indoor map.

tip

A complete example demonstrating Jetpack Compose can be found in the Mappedin Android GitHub repo: Jetpack Compose With Mappedin Project implemented in the MappedinComposable.kt file.

To call methods of the MapView, it is instantiated outside of the AndroidView and its state is saved by remember. Note that MapView in v6 is not itself an Android View — it exposes a view property that returns the Android View to be embedded in layouts.

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

The AndroidView used to hold the map is shown below. The mapView.view layout parameters are set to allow it to take up the screen space it is provided. Next, getMapData is called with GetMapDataWithCredentialsOptions to fetch the map data. Once the data loads successfully, show3dMap is called with Show3DMapOptions to render the 3D map.

AndroidView(
    factory = {
        mapView.view.layoutParams = ViewGroup.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT,
            ViewGroup.LayoutParams.MATCH_PARENT,
        )

        val options = GetMapDataWithCredentialsOptions(
            key = "5eab30aa91b055001a68e996",
            secret = "RJyRXKcryCMy4erZqqCbuB1NbR66QTGNXVE0x3Pg6oCIlUR1",
            mapId = "mappedin-demo-mall",
        )

        mapView.getMapData(options) { result ->
            result
                .onSuccess {
                    mapView.show3dMap(Show3DMapOptions()) { r ->
                        r.onSuccess {
                            // Map is loaded and ready to use!
                        }
                        r.onFailure {
                            Log.e("MappedinComposable", "show3dMap error: $it")
                        }
                    }
                }.onFailure {
                    Log.e("MappedinComposable", "getMapData error: $it")
                }
        }

        mapView.view
    },
)

The GetMapDataWithCredentialsOptions object contains a key, secret, and mapId. To get started use the Mappedin Id and Secret that has access to demo venues.

Mappedin SDK for Android uses a two-step pattern: getMapData fetches the venue data, and show3dMap renders the 3D map. Both methods use callbacks with Kotlin's Result type for success and failure handling.

The factory function returns mapView.view (the Android View), which is what AndroidView embeds in the Compose layout.

Adding Interactivity

Once the map is loaded, add interactive features such as labels, paths, navigation, and click event handling. The following sections demonstrate how to set up these features after the map is ready.

Making Spaces Interactive

To allow spaces to respond to click events, use updateState with GeometryUpdateState to set interactive = true on each Space. Use mapData.getByType with MapDataType to retrieve all spaces.

mapView.mapData.getByType<Space>(MapDataType.SPACE) { result ->
    result.onSuccess { spaces ->
        spaces.forEach { space ->
            mapView.updateState(space, GeometryUpdateState(interactive = true)) { }
        }
    }
}

Handling Click Events

Use mapView.on with Events.Click to listen for click events on the map. The callback receives a ClickPayload containing information about what was clicked, including spaces, labels, paths, floors, and coordinates.

mapView.on(Events.Click) { clickPayload ->
    clickPayload ?: return@on

    val labels = clickPayload.labels
    if (!labels.isNullOrEmpty()) {
        Log.i("Click", "Label Clicked: ${labels.first().text}")
    }

    val spaces = clickPayload.spaces
    if (!spaces.isNullOrEmpty()) {
        Log.i("Click", "Space Clicked: ${spaces.first().name}")
    }

    if (!clickPayload.paths.isNullOrEmpty()) {
        Log.i("Click", "Path Clicked")
    }

    Log.i("Click", "Coordinate: ${clickPayload.coordinate.latitude}, ${clickPayload.coordinate.longitude}")
}

Adding Interactive Labels

Use mapView.labels.add to display text labels on spaces. Set interactive = true in AddLabelOptions so the labels respond to click events.

mapView.mapData.getByType<Space>(MapDataType.SPACE) { spacesResult ->
    spacesResult.onSuccess { spaces ->
        spaces.forEach { space ->
            if (space.name.isNotEmpty()) {
                mapView.labels.add(
                    target = space,
                    text = space.name,
                    options = AddLabelOptions(interactive = true),
                )
            }
        }
    }
}

Drawing Navigation Paths

Use mapView.navigation.draw to display wayfinding between two EnterpriseLocation targets with animated directional arrows, a start marker, and a destination pin. Wrap each location in a NavigationTarget and pass NavigationOptions with AddPathOptions to configure the path appearance.

mapView.mapData.getByType<EnterpriseLocation>(MapDataType.ENTERPRISE_LOCATION) { result ->
    result.onSuccess { locations ->
        val origin = locations.find { it.name == "Microsoft" }
        val destination = locations.find { it.name == "Apple" }

        if (origin != null && destination != null) {
            mapView.mapData.getDirections(
                NavigationTarget.EnterpriseLocationTarget(origin),
                NavigationTarget.EnterpriseLocationTarget(destination),
            ) { dirResult ->
                dirResult.onSuccess { directions ->
                    if (directions != null) {
                        val pathOptions = AddPathOptions(interactive = true)
                        val navOptions = NavigationOptions(pathOptions = pathOptions)
                        mapView.navigation.draw(directions, navOptions) { }
                    }
                }
            }
        }
    }
}

Drawing Paths

Use mapView.paths.add with AddPathOptions to draw a simple path along a set of coordinates without the navigation markers and animation. The coordinates can come from mapData.getDirections.

mapView.mapData.getByType<EnterpriseLocation>(MapDataType.ENTERPRISE_LOCATION) { result ->
    result.onSuccess { locations ->
        val origin = locations.find { it.name == "Uniqlo" }
        val destination = locations.find { it.name == "Nespresso" }

        if (origin != null && destination != null) {
            mapView.mapData.getDirections(
                NavigationTarget.EnterpriseLocationTarget(origin),
                NavigationTarget.EnterpriseLocationTarget(destination),
            ) { dirResult ->
                dirResult.onSuccess { directions ->
                    if (directions != null) {
                        val pathOptions = AddPathOptions(interactive = true)
                        mapView.paths.add(directions.coordinates, pathOptions) { }
                    }
                }
            }
        }
    }
}

tip

A complete example demonstrating Jetpack Compose can be found in the Mappedin Android GitHub repo: Jetpack Compose With Mappedin Project implemented in the MappedinComposable.kt file.