Adding Interactivity

The MPIMapClickListener interface enables an app to receive an MPIMapClickEvent, which include the objects that were clicked. The MPIMapClickEvent includes the following properties, which describe the click event.

Floating Label
Map
Blue Dot
Path
Polygon
Position

In order to use MPIMapClickListener, it must be added to an MPIMapView.

mapView.mapClickListener = this

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

Floating Labels

To allow floating labels to be clicked, they must be set to be interactive.

mapView.floatingLabelsManager.labelAllLocations(
    MPIOptions.FloatingLabelAllLocations(interactive = true))

When clicked, the MPIMapClickEvent provides a List of Pairs of all floating labels that were clicked. The Pair contains the floating label's location as an MPINavigatable.MPINode and it's text as a String.

The code sample below checks if the floating label list is empty and if not, appends the text of the first floating label clicked to a StringBuilder.

override fun onClick(mapClickEvent: MPIMapClickEvent) {
    val message = StringBuilder()
    if (mapClickEvent.floatingLabels.isNotEmpty()) {
        message.append("Floating Label Clicked: ")
        message.append(mapClickEvent.floatingLabels.first().second)
        message.append("\n")
    }
}

Maps

MPIMapClickEvent includes a list of MPIMaps corresponding to every map that a user's click passed through. These are in order of first to last intersected. For example, if the user clicked on a map showing the second floor of a building, the second floor map would be first in the list followed by the first floor.

The code sample below checks if the maps list is empty and if not, stores the first map's name in a String variable called title.

override fun onClick(mapClickEvent: MPIMapClickEvent) {
    var title = String()
    if (mapClickEvent.maps.isNotEmpty()) {
        title = mapClickEvent.maps.first().name
    }
}

Blue Dot

MPIMapClickEvent contains a boolean value that is set to true if the user clicked on or near the Blue Dot representing their current location.

The code sample below demonstrates detecting if the user clicked near the Blue Dot.

override fun onClick(mapClickEvent: MPIMapClickEvent) {
    if (mapClickEvent.nearBlueDot) {
        // The user clicked near the Blue Dot.
    }
}

Paths

MPIMapClickEvent includes a list of paths the user clicked on. Multiple paths are included if the user clicked on a junction where paths cross. These are in order of first to last intersected by the click point and will be empty if no paths were clicked.

When drawing a path, MPIOptions.Path must be used to enable a path to be clickable by setting interactive to true. This applies when using both MPIJourneyManager and MPIPathManager.

// Creating a clickable path using MPIJourneyManager
val journeyOpts = MPIOptions.Journey(pathOptions = MPIOptions.Path(interactive = true))
mapView.journeyManager.draw(directions = it, options = journeyOpts)

// Creating a clickable path using MPIPathManager
mapView.pathManager.add(directions.path, MPIOptions.Path(interactive = true))

The code sample below detects if the user clicked on an interactive path.

override fun onClick(mapClickEvent: MPIMapClickEvent) {
    val message = StringBuilder()
    if (mapClickEvent.paths.isNotEmpty()) {
        message.append("You clicked a path.\n")
    }
}

Polygons

MPIMapClickEvent provides a list of MPINavigatable.MPIPolygons that the user's click event passes through. These are in order of first to last intersected and will be empty if no polygons were clicked.

The code sample below detects if a polygon was clicked and if it was, appends the location name of the polygon to a StringBuilder.

override fun onClick(mapClickEvent: MPIMapClickEvent) {
    val message = StringBuilder()

    if (mapClickEvent.polygons.isNotEmpty()) {
        message.append("Polygon clicked: ")
        message.append(mapClickEvent.polygons.first().locations.first().name)
        message.append("\n")
    }
}

Position / Coordinates

MPIMapClickEvent can be used to determine the exact point on the map where the user clicked by observing the MPIMap.MPICoordinate it contains. The MPICoordinate's properties provide the x and y coordinates and latitude and longitude of the user's click.

The code sample below illustrates how to extract the MPICoordinate values from MPIMapClickEvent and append them to a StringBuilder.

override fun onClick(mapClickEvent: MPIMapClickEvent) {
    val message = StringBuilder()
    message.append("Coordinate Clicked: \nLatitude: ")
    message.append(mapClickEvent.position?.latitude)
    message.append("\nLongitude: ")
    message.append(mapClickEvent.position?.longitude)
}