Building & Level Selection

This guide demonstrates how to populate Spinner widgets with Mappedin venue data to create a building and level selector. This will allow listing of all buildings, the levels of each building and the ability to switch between them.

Building & Level Selection - Android v5

A complete class that uses the code snippets in this guide can be found in the Mappedin Android Github repo: LevelSelector.kt

The code below populates the spinners with the names of MPIMapGroups (buildings). This code can be called after the MPIMapViewListener.onDataLoaded method has been called, which indicates the venue data has been loaded and is ready to be used.

val controlLayout = findViewById<LinearLayout>(R.id.controlsLinearLayout)
val buildingSpinner = Spinner(this)
buildingSpinner.setPadding(12,16,12,16)
controlLayout.addView(buildingSpinner)
val mapGroupNames = mapView.venueData?.mapGroups?.map { it.name }

mapGroupNames?.let { 
buildingSpinner.adapter = ArrayAdapter<String>(this, 
    android.R.layout.simple_spinner_item, it) 
}

The contents of the mapNames spinner will change based on which map group is selected. An OnItemSelectedListener is used to listen for that event. The following code implements OnItemSelectedListener and populates the map spinner with the MPIMap names (levels) within the map group (buildings). The onItemSelected method will also fire when the buildingSpinner is first populated, triggering the mapNames spinner to also be populated.

buildingSpinner.onItemSelectedListener = object : AdapterView.OnItemSelectedListener {
    override fun onNothingSelected(parent: AdapterView<*>?) {}

    // When a new map group (building) is selected, update the level 
    // spinner with the list of maps for that building.
    override fun onItemSelected(parent: AdapterView<*>?, view: View?, position: Int, id: Long) {
        val selectedMapGroupName = parent?.getItemAtPosition(position).toString()
        val mapNames = mapView.venueData?.maps?.filter { it.group?.name.contentEquals(selectedMapGroupName) }?.map { it.name }
        mapNames?.let {
            mapSpinner.adapter = parent?.context?.let { it1 ->
                ArrayAdapter<String>(
                    it1,
                    android.R.layout.simple_spinner_item,
                    it,
                )
            }
        }
    }
}

The next event to monitor is the user selecting a new map from the mapNames spinner, which should change the displayed map. An MPIMap with matching name is retrieved from the venueData of the MPIMapView. The MPIMap is then passed to the MPIMapView.setMap method and is displayed to the user.

mapSpinner.onItemSelectedListener = object : AdapterView.OnItemSelectedListener {
    override fun onNothingSelected(parent: AdapterView<*>?) {}

    override fun onItemSelected(
        parent: AdapterView<*>?,
        view: View?,
        position: Int,
        id: Long,
    ) {
        parent?.getItemAtPosition(position)?.let { mapName ->
            mapView.venueData?.maps?.first { it.name == mapName }?.let { map ->
                mapView.setMap(map) { err ->
                    err?.message?.let { message ->
                        Log.e("setMap", message)
                    }
                }
            }
        }
    }
}

A complete class that uses the code snippets in this guide can be found in the Mappedin Android Github repo: LevelSelector.kt

Sign up for developer updates

For more information