Jetpack Compose

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:

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:

@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:

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.

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.

map.addMarker(
    MarkerOptions()
        .position(LatLng(latitude, longitude))
        .title(markerTitle)
        .icon(icon)
)

Get started

Guides by platform

Server SDKs

Resources

Adding and customizing marker

​Adding and customizing marker

Adding and customizing marker