Map

Display a map

  • Add a FragmentContainerView to your layout file

    <androidx.fragment.app.FragmentContainerView
   android:id="@+id/map_container"
   android:layout_width="match_parent"
   android:layout_height="match_parent" />

  • Once the initialisation is successful, you can add the MapFragment.

    val  mapFragment = MapFragment()
val fragmentTransaction = childFragmentManager
  .beginTransaction()
  .replace(R.id.map_container, mapFragment)
fragmentTransaction.commit()
mapFragment.setOnMapReadyListener {
  // your map is ready
}

Running the app will display the map. Note that map items can be added any time. Only code - such as picking map items from the map view - that requires map data should wait for the map ready callback to ensure that you will get the expected results.

Marker

To add a marker to the map, you can use addMarker()by passing the marker and the icon. Please note that currently, only PNG drawable resources are supported.

val coordinate = Coordinates(25.1182076, 55.3903604)
val marker = Marker(coordinate)
mapFragment.addMarker(marker, R.drawable.ic_destination_pin)

To remove a marker from the map, you can use removeMarker()by passing the marker instance.

mapFragment.removeMarker(marker)

Polyline

You can add poly line to the map using addPolyLine() by passing the width of the line in pixels, color of the line and the polyline. Coordinate list should contain atleast two Coordinates.

val coordinateList = listOf(
    Coordinates(25.1182076, 55.3903604),
    Coordinates(25.0641917,55.1358617)
)
val polyLine = PolyLine(coordinateList)
mapFragment.addPolyLine(20.0, Color.GREEN, polyLine)

You can remove poly line from the map using removePolyLine() by passing the polyline.

mapFragment.removePolyLine(polyLine)

Polygon

You can add polygon to the map using addPolygon() by passing the fill color for the polygon and the polygon. Coordinate list should contain atleast three Coordinates. The coordinates are connected based on their clockwise order in the list.

val coordinateList = listOf(
    Coordinates(25.1182076, 55.3903604),
    Coordinates(25.0641917,55.1358617),
    Coordinates(25.1972018,55.2721877)
)
val polygon = Polygon(coordinateList)
mapFragment.addPolygon(Color.YELLOW, polygon)

You can remove polygon from the map using removePolygon() by passing the polygon.

mapFragment.removePolygon(polygon)

Zoom level

You can use zoomLevel property to access and change the zoom level of the map. Zoom level needs to be within the range of [0, 22], where 0 is a view of whole globe and 22 is street level. By default the map’s zoom level is 10.0.

mapFragment.zoomLevel = 10.5

Move camera

A coordinate can be centered on the map with moveCamera(). You can pass a boolean flag which determines whether the movement is with animation or not.

val coordinate = Coordinates(25.1182076, 55.3903604)
mapFragment.moveCamera(coordinate, true)

Live Traffic View

Use trafficVisibility property to access and change the live traffic visibility information view in the map.

mapFragment.trafficVisibility = true

Map scheme

You can use mapScheme property to access or change the scheme of the map. Supported map schemes are NORMAL_DAY, NORMAL_NIGHT, HYBRID_DAY, HYBRID_NIGHT, SATELLITE

mapFragment.mapScheme = MapScheme.SATELLITE

Get center coordinates

You can get the coordinates of the center point on map using getMapCenter() as follows.

val mapCenter = mapFragment.getMapCenter()

Gestures

You can receive callbacks on different gestures as follows.

mapFragment.setOnLongPressListener { gestureState, coordinate ->
}

mapFragment.setOnTapListener { coordinate ->
}

mapFragment.setOnPanListener { gestureState, coordinate ->
}

mapFragment.setOnDoubleTapListener { coordinate ->
}

mapFragment.setOnTwoFingerPanListener { gestureState, coordinate ->
}

mapFragment.setOnTwoFingerTapListener { coordinate ->
}

mapFragment.setPinchRotateListener { gestureState, pinchOriginCoordinates, rotationOriginCoordinates, twoFingerDistance, degrees ->
}

There is also option to enable or disable gestures (TWO_FINGER_TAP, PAN, TWO_FINGER_PAN, DOUBLE_TAP, PINCH_ROTATE)

mapFragment.enableGesture(gesture)
mapFragment.disableGesture(gesture)

Create Route

A route object can be created either using destination coordinates or with a trip id.

When creating a route with coordinates, you have the option to provide the route option, say, car, truck, pedestrian etc.

val coordinateList = listOf(
    Coordinates(25.1182076, 55.3903604),
    Coordinates(25.0641917,55.1358617)
)

mapFragment.createRoute(coordinatesList, RouteOption.CAR) { error, route ->
    if (error != null)
        Toast.makeText(context, error.message, Toast.LENGTH_SHORT).show()
    route?.let {
        mapFragment.addPolyLine(10.0, Color.GREEN, it.polyLine)
        mapFragment.moveCamera(it.polyLine.coordinates[0], true)
}

To create and display a route with trip id, do the following

mapFragment.createRoute(tripId) { error, route ->
    if (error != null)
        Toast.makeText(context, error.message, Toast.LENGTH_SHORT).show()
    route?.let {
        mapFragment.addPolyLine(10.0, Color.GREEN, it.polyLine)
        mapFragment.moveCamera(it.polyLine.coordinates[0], true)
}

Get callback on map errors

To get callbacks whenever there is an error with map, do the following. Read more about error handling here

mapFragment.setOnMapErrorListener {
    Toast.makeText(requireContext(), it.message, Toast.LENGTH_SHORT).show()
}
← Get Started
Turn by Turn Navigation →