> ## Documentation Index
> Fetch the complete documentation index at: https://docs.baato.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Jetpack Compose

> Render a Baato map inside a Jetpack Compose UI.

MapLibre is an open-source mapping library that can be used in Android applications to display maps and provide location-based services.
To use MapLibre in Jetpack Compose, we first need to add the MapLibre dependency to our project. We can do this by adding the following line to our app's build.gradle file:

```groovy theme={null}
implementation 'org.maplibre.gl:android-sdk:9.2.1'
```

Next, we need to create a Composable function that will display the map. This can be done using the AndroidView function provided by Jetpack Compose. The AndroidView function allows us to embed an Android view into our Composable function.
Here is an example Composable function that displays a MapLibre map:

```kotlin theme={null}
@Composable
fun MapView() {
  AndroidView(
	factory = { context ->
  	Mapbox.getInstance(context, null)
  	val mapView = MapView(context)
    val styleJson = loadStyleJsonFromAssets(context, "breeze.json")
  	val styleUrl = "https://api.baato.io/api/v1/styles/breeze_cdn?key=YOUR_API_KEY_HERE";
  	mapView.onCreate(null)
  	mapView.getMapAsync { map ->
    	// Set the style after mapView was loaded
    	map.setStyle(styleUrl) {
      	map.uiSettings.setAttributionMargins(15, 0, 0, 15)
      	// Set the map view center
      	map.cameraPosition = Builder()
        	.target(LatLng(28.679079, 77.069710))
        	.zoom(10.0)
        	.bearing(2.0)
        	.build()
    	}
  	}
  	mapView
	}
  )
}
```

We can then use this Composable function in our app's UI like any other Composable function:

```kotlin theme={null}
class MainActivity : ComponentActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
	super.onCreate(savedInstanceState)
	setContent {
  	  MapLibreJetpackComposeBlogTheme {
    	    // A surface container using the 'background' color from the theme
    	    Surface(
      	modifier = Modifier.fillMaxSize(),
      	color = MaterialTheme.colors.background
    	    ) {
      	MapView()
    	    }
  	  }
	}
  }
}
```

## Adding and customizing marker

To add a MapLibre marker in Jetpack Compose for Android using Kotlin, you need to first create a MarkerOptions object and setting its position, title and snippet, In the getMapAsync callback.

```kotlin theme={null}
map.addMarker(
MarkerOptions()
  .position(LatLng(latitude, longitude))
  .setTitle(markerTitle)
  .setSnippet(markerSnippet)
)
```

Replace latitude and longitude with the coordinates of your desired location. Also replace markerTitle and markerSnippet with the desired title and snippet.
You can customize the marker's appearance by setting its icon in the MarkerOptions object.

```kotlin theme={null}
map.addMarker(
    MarkerOptions()
        .position(LatLng(latitude, longitude))
        .title(markerTitle)
        .icon(icon)
)
```