Biofarma | Bind UI

Map

The map component provides an interactive interface to display geographical data, supporting features such as zoom, markers and more maps settings. It allows users to navigate and explore locations, and interact with map elements like marker, shape, etc.

Type	Resource
Design	Figma
Mobile	Mobile Storybook
Code	Gitlab

Stepper Preview

val markers = listOf(
    MarkerProperties(
        coordinates = LatLng(-6.174505, 106.826717),
        radius = 1000.0,
        type = MarkerType.PRIMARY,
        draggable = true,
        title = "MarkerType.PRIMARY | dragable | 1000 radius",
        isShowTooltip = true,
        isEnableCustomTooltip = true,
        tooltipContent = @Composable {
            Surface(
                shape = TooltipShape(),
                color = PrimitiveColors.White,
                shadowElevation = 8.dp,
                modifier = Modifier.padding(8.dp)
            ) {
                Column(
                    modifier = Modifier.padding(8.dp),
                    verticalArrangement = Arrangement.spacedBy(4.dp)
                ) {
                    BasicText(
                        text = "-6.174505, 106.826717)",
                        style = Typography.Body.Small
                    )
                    BasicText(
                        text = "displayed with custom tooltip",
                        style = Typography.Body.XSmall
                    )
                }
            }
        }
    ),
    MarkerProperties(
        coordinates = LatLng(-6.182354, 106.808759),
        radius = 1000.0,
        type = MarkerType.SECONDARY,
        title = "MarkerType.SECONDARY | 1000 radius",
        tooltipContent = {},
        isShowTooltip = true,
    ),
    MarkerProperties(
        coordinates = LatLng(-6.184480, 106.863893),
        radius = 2000.0,
        type = MarkerType.INFO,
        title = "MarkerType.INFO | 2000 radius",
        isShowTooltip = true,
    ),
    MarkerProperties(
        coordinates = LatLng(-6.261757, 106.818476),
        radius = 1000.0,
        type = MarkerType.DANGER,
        alpha = 0.4f,
        title = "MarkerType.DANGER | 1000 radius | 40% alpha",
        isShowTooltip = true,
    ),
    MarkerProperties(
        coordinates = LatLng(-6.189871, 106.831910),
        type = MarkerType.DANGER,
        draggable = true,
        title = "MarkerType.DANGER | draggable | no radius",
        isShowTooltip = false,
    ),
)
 
val polylines = listOf(
    PolylineProperties(
        remember {
            listOf(
                LatLng(-6.161023, 106.837548),
                LatLng(-6.169966, 106.840018),
                LatLng(-6.185464, 106.844467),
                LatLng(-6.202447, 106.856837),
            )
        },
        color = ColorModes.Light.BorderPrimary.Strong
    ),
    PolylineProperties(
        remember {
            listOf(
                LatLng(-6.174165, 106.855690),
                LatLng(-6.175168, 106.845318),
                LatLng(-6.180954, 106.838701),
                LatLng(-6.183264, 106.822885),
            )
        },
        color = PrimitiveColors.Discovery_500,
    )
)
 
val polygons = listOf(
    PolygonProperties(
        remember {
            listOf(
                LatLng(-6.166375, 106.791999),
                LatLng(-6.165390, 106.822597),
                LatLng(-6.199346, 106.823186),
                LatLng(-6.200697, 106.790763),
            )
        },
        fillColor = ColorModes.Light.ChartPrimary.Default,
        strokeColor = ColorModes.Light.BorderPrimary.Strong,
    ),
    PolygonProperties(
        remember {
            listOf(
                LatLng(-6.206480, 106.826922),
                LatLng(-6.211329, 106.984011),
                LatLng(-6.325348, 106.965005),
                LatLng(-6.340059, 106.812626),
            )
        },
        fillColor = ColorModes.Light.ChartSecondary.Default,
        strokeColor = ColorModes.Light.BorderSecondary.Strong,
    ),
    PolygonProperties(
        remember {
            listOf(
                LatLng(-6.221804, 106.770931),
                LatLng(-6.222424, 106.851269),
                LatLng(-6.286354, 106.853142),
            )
        },
        fillColor = ColorModes.Light.ChartInformation.Default,
        strokeColor = ColorModes.Light.BorderAccentInfo.Strong,
    )
)
 
    val circles = listOf(
    CircleProperties(
        center = LatLng(-6.279896, 106.862250),
        radius = 1500.0,
        fillColor = ColorModes.Light.ChartPrimary.Default,
        strokeColor = ColorModes.Light.BorderPrimary.Strong,
    ),
    CircleProperties(
        center = LatLng(-6.299168, 106.747440),
        radius = 1500.0,
        fillColor = ColorModes.Light.ChartSecondary.Default,
        strokeColor = ColorModes.Light.BorderSecondary.Strong,
    ),
    CircleProperties(
        center = LatLng(-6.339161, 106.936794),
        radius = 3000.0,
        fillColor = ColorModes.Light.ChartInformation.Default,
        strokeColor = ColorModes.Light.BorderAccentInfo.Strong,
    ),
)
 
fun mapEffects(map: GoogleMap) {
    map.setOnMapClickListener {}
    map.setOnMapLongClickListener() {}
}
 
Column(
    modifier = Modifier
        .fillMaxWidth()
        .fillMaxHeight()
        .background(backgroundColor),
    horizontalAlignment = Alignment.Start,
    verticalArrangement = Arrangement.Top
) {
    Maps(
        config = mapConfig,
        modifier = Modifier
            .fillMaxSize(),
        markers = markers,
        polylines = polylines,
        polygons = polygons,
        circles = circles,
        mapEffect = { googleMap -> mapEffects(googleMap) }
    )
}

Pre-Usage

Ensure your project meets the following requirements:

Open your module-level build.gradle.kts file and add the following code to the plugins element.

plugins {
    // ...
    id("com.google.android.libraries.mapsplatform.secrets-gradle-plugin")
}

Open the .properties file in your top-level directory, and then add the following code. Replace YOUR_API_KEY with your API key

MAPS_API_KEY=YOUR_API_KEY

In your AndroidManifest.xml file, go to com.google.android.geo.API_KEY and update the android:value attribute. If the <meta-data> tag doesn’t exist, create it as a child of the <application> tag.

Usage

To implement Map, you can use this tag Maps in the Kotlin file. This component is build using android-map-compose package.

    import id.co.biofarma.binduiandroid.components.maps.Maps
    import id.co.biofarma.binduiandroid.model.CircleProperties
    import id.co.biofarma.binduiandroid.model.MapConfig
    import id.co.biofarma.binduiandroid.model.MarkerProperties
    import id.co.biofarma.binduiandroid.model.PolygonProperties
    import id.co.biofarma.binduiandroid.model.PolylineProperties
    import id.co.biofarma.binduiandroid.model.enums.MarkerType
    import com.google.android.gms.maps.GoogleMap

        mapConfig = MapConfig()
        markers = listOf( MarkerProperties() )
        polylines = listOf( PolylineProperties() )
        polygons = listOf( PolygonProperties() )
        circles = listOf( CircleProperties() )
 
        
        fun mapEffects(map: GoogleMap) {
            // example listener
            map.setOnMapClickListener {}
            map.setOnMapLongClickListener() {}
        }
 
        Maps(
            config = mapConfig,
            modifier = Modifier
                .fillMaxSize(),
            markers = markers,
            polylines = polylines,
            polygons = polygons,
            circles = circles,
            mapEffect = { googleMap -> mapEffects(googleMap) }
        )

Map with markers

Adding the list of MarkerProperties() into the Maps markers parameter

Markers

      val markers = listOf(
          MarkerProperties(
              coordinates = LatLng(-6.174505, 106.826717),
              radius = 1000.0,
              type = MarkerType.PRIMARY,
              draggable = true,
              title = "MarkerType.PRIMARY | dragable | 1000 radius",
              isShowTooltip = true,
              isEnableCustomTooltip = true,
              tooltipContent = @Composable {
                  Surface(
                      shape = TooltipShape(),
                      color = PrimitiveColors.White,
                      shadowElevation = 8.dp,
                      modifier = Modifier.padding(8.dp)
                  ) {
                      Column(
                          modifier = Modifier.padding(8.dp),
                          verticalArrangement = Arrangement.spacedBy(4.dp)
                      ) {
                          BasicText(
                              text = "-6.174505, 106.826717)",
                              style = Typography.Body.Small
                          )
                          BasicText(
                              text = "displayed with custom tooltip",
                              style = Typography.Body.XSmall
                          )
                      }
                  }
              }
          ),
          MarkerProperties(
              coordinates = LatLng(-6.182354, 106.808759),
              radius = 1000.0,
              type = MarkerType.SECONDARY,
              title = "MarkerType.SECONDARY | 1000 radius",
              tooltipContent = {},
              isShowTooltip = true,
          ),
          MarkerProperties(
              coordinates = LatLng(-6.184480, 106.863893),
              radius = 2000.0,
              type = MarkerType.INFO,
              title = "MarkerType.INFO | 2000 radius",
              isShowTooltip = true,
          ),
          MarkerProperties(
              coordinates = LatLng(-6.261757, 106.818476),
              radius = 1000.0,
              type = MarkerType.DANGER,
              alpha = 0.4f,
              title = "MarkerType.DANGER | 1000 radius | 40% alpha",
              isShowTooltip = true,
          ),
          MarkerProperties(
              coordinates = LatLng(-6.189871, 106.831910),
              type = MarkerType.DANGER,
              draggable = true,
              title = "MarkerType.DANGER | draggable | no radius",
              isShowTooltip = false,
          ),
      )
 
      Maps(
              config = MapConfig(),
              modifier = Modifier.fillMaxSize(),
              markers = markers,
              polylines = listOf(),
              polygons = listOf(),
              circles = listOf(),
              mapEffect = { googleMap -> mapEffects(googleMap) }
          )

Data Class

Since the Maps component is built using the android-map-compose package, it fully supports the use of the Map class, including MapProperties, MapUiSettings, and the functionality provided by the MapEffect class. It also fully supports the Marker, Polyline, Polygon, and Circle composables with their complete set of properties.

MapConfig

data class MapConfig(
    val mapId: String = "",
    val defaultLocation: LatLng = LatLng(-6.174505, 106.826717),
    val defaultZoom: Float = 10f,
    val mapProperties: MapProperties = MapProperties(),
    val mapUiSettings: MapUiSettings = MapUiSettings(),
)

Properties	Required	Default	Type	description
mapId	false	`""`	`String`	The map id identifier
defaultLocation	false	`LatLng(-6.174505, 106.826717)` jakarta	`LatLng`	`LatLng` class from `com.google.android.gms.maps.model` package
defaultZoom	false	`10f`	`Float`	the Map default zoom
mapProperties	false	`MapProperties`	`MapProperties`	`MapProperties` class from `com.google.android.gms.maps.model`
mapUiSettings	false	`MapUiSettings`	`MapUiSettings`	`MapUiSettings` class from `com.google.android.gms.maps.model`

Marker

MarkerType

The enum class of the MarkerType

Type
PRIMARY
SECONDARY
INFO
SUCCESS
DANGER
WARNING

Determine the style of the marker to be displayed: Marker Type Preview

MarkerProperties

A properties of a composable marker on the map.

data class MarkerProperties(
    val coordinates: LatLng,
    val radius: Double? = null,
    val type: MarkerType = MarkerType.PRIMARY,
    val alpha: Float = 1.0f,
    val anchor: Offset = Offset(0.5f, 1.0f),
    val draggable: Boolean = false,
    val flat: Boolean = false,
    val icon: BitmapDescriptor? = null,
    val infoWindowAnchor: Offset = Offset(0.5f, 0.0f),
    val rotation: Float = 0.0f,
    val snippet: String? = null,
    val tag: Any? = null,
    val title: String? = null,
    val visible: Boolean = true,
    val zIndex: Float = 0.0f,
    val onClick: (Marker) -> Boolean = { false },
    val onInfoWindowClick: (Marker) -> Unit = {},
    val onInfoWindowClose: (Marker) -> Unit = {},
    val onInfoWindowLongClick: (Marker) -> Unit = {},
    val isShowTooltip: Boolean = false,
    val isEnableCustomTooltip:  Boolean = false,
    val tooltipContent: @Composable () -> Unit = {},
)

Props	description
coordinates	the LatLng for the marker locaation
radius	the marker radius
type	`MarkerType` enum class
alpha	the alpha (opacity) of the marker
anchor	the anchor for the marker image
draggable	sets the draggability for the marker
flat	sets if the marker should be flat against the map
icon	sets the icon for the marker
infoWindowAnchor	the anchor point of the info window on the marker image
rotation	the rotation of the marker in degrees clockwise about the marker’s anchor point
snippet	the snippet for the marker
tag	optional tag to associate with the marker
title	the title for the marker
visible	the visibility of the marker
onClick	a lambda invoked when the marker is clicked
onInfoWindowClick	a lambda invoked when the marker’s info window is clicked
onInfoWindowClose	a lambda invoked when the marker’s info window is closed
onInfoWindowLongClick	a lambda invoked when the marker’s info window is long clicked

PolylineProperties

A properties of a composable polyline on the map.

data class PolylineProperties(
    val points: List<LatLng>,
    val clickable: Boolean = false,
    val color: Color = Color.Black,
    val endCap: Cap = ButtCap(),
    val geodesic: Boolean = false,
    val jointType: Int = JointType.DEFAULT,
    val pattern: List<PatternItem>? = null,
    val startCap: Cap = ButtCap(),
    val tag: Any? = null,
    val visible: Boolean = true,
    val width: Float = 10f,
    val zIndex: Float = 0f,
    val onClick: (Polyline) -> Unit = {}
)

Props	description
points	the points comprising the polyline
clickable	boolean indicating if the polyline is clickable or not
color	the color of the polyline
endCap	a cap at the end vertex of the polyline
geodesic	specifies whether to draw the polyline as a geodesic
jointType	the joint type for all vertices of the polyline except the start and end vertices
pattern	the pattern for the polyline
startCap	the cap at the start vertex of the polyline
visible	the visibility of the polyline
visible	the visibility of the polyline
width	the width of the polyline in screen pixels
zIndex	the z-index of the polyline
onClick	a lambda invoked when the polyline is clicked

PolygonProperties

A properties of a composable polygon on the map.

data class PolygonProperties(
    val points: List<LatLng>,
    val clickable: Boolean = false,
    val fillColor: Color = Color.Black,
    val geodesic: Boolean = false,
    val holes: List<List<LatLng>> = emptyList(),
    val strokeColor: Color = Color.Black,
    val strokeJointType: Int = JointType.DEFAULT,
    val strokePattern: List<PatternItem>? = null,
    val strokeWidth: Float = 10f,
    val tag: Any? = null,
    val visible: Boolean = true,
    val zIndex: Float = 0f,
    val onClick: (Polygon) -> Unit = {}
)

Props	description
points	the points comprising the vertices of the polygon
clickable	boolean indicating if the polygon is clickable or not
fillColor	the fill color of the polygon
geodesic	specifies whether to draw each segment as a geodesic
holes	the holes for the polygon
strokeColor	the stroke color of the polygon
strokeJointType	the joint type for all vertices of the polygon’s outline
strokePattern	the stroke pattern for the polygon’s outline
strokeWidth	specifies the polygon’s stroke width, in display pixels
tag	optional tag to associate wiht the polygon
visible	the visibility of the polygon
zIndex	the z-index of the polygon
onClick	a lambda invoked when the polygon is clicked

CircleProperties

A properties of a composable circle on the map.

data class CircleProperties(
    val center: LatLng,
    val clickable: Boolean = false,
    val fillColor: Color = Color.Black,
    val radius: Double = 10.0,
    val strokeColor: Color = Color.Black,
    val strokePattern: List<PatternItem>? = null,
    val strokeWidth: Float = 10f,
    val tag: Any? = null,
    val visible: Boolean = true,
    val zIndex: Float = 0f,
    val onClick: (Circle) -> Unit = {},
)

Props	description
center	the LatLng to use for the center of this circle
clickable	boolean indicating if the circle is clickable or not
fillColor	the fill color of the circle
radius	the radius of the circle in meters.
strokeColor	the stroke color of the circle
strokePattern	a sequence of PatternItem to be repeated along the circle’s outline (null represents a solid line)
tag	optional tag to be associated with the circle
strokeWidth	the width of the circle’s outline in screen pixels
visible	the visibility of the circle
zIndex	the z-index of the circle
onClick	a lambda invoked when the circle is clicked

Maps Props

Props	Required	Default	Type	description
config	true		`MapConfig`	The configuration object of the Maps e.g `defaultLocation`, `mapProperties`, and `mapUiSettings`
modifier	false	`Modifier`	`Modifier`	`Modifer` for the maps container
markers	false	`List<>`	`List<MarkerProperties>`	The markers to be displayed inside the map
polylines	false	`List<>`	`List<PolylineProperties>`	The polyline shapes to be displayed on the map.
polygons	false	`List<>`	`List<PolygonProperties>`	The polygon shapes to be displayed on the map.
circles	false	`List<>`	`List<CircleProperties>`	The circle shapes to be displayed on the map.
mapEffect	false	`GoogleMap`	`GoogleMap`	A callback function to apply custom map effects. The function receives `GoogleMap` object from `com.google.android.gms.maps.GoogleMap` as a parameter

Layout Push Notification