How To Implement Barikoi Map in Android with Maplibre

This tutorial describes how to create a simple Android application using Kotlin and Maplibre Android SDK.

You will learn the following:

• Create Barikoi API key.
• Add MapLibre to the android project.
• Create layout with map view control.
• Initialize map and load the style.

Create Barikoi API key

You will need a API key to use Barikoi map along with other services Barikoi provides. to obtain one, you need to create a Barikoi developer account and generate an API key.

Add MapLibre SDK to the project

First open up project-level (/build.gradle) file. Then add maven central repository to your build.gradle at project level.

allprojects {
    repositories {
        ...
        mavenCentral()
        ...
    }
}

Now open up module-level (/app/build.gradle) file. Under dependencies, add a new build rule for the latest maplibre android-sdk.

dependencies {
    ...
    implementation 'org.maplibre.gl:android-sdk:10.2.0'
    ...
}

Add the map layout

To Add the map layout to an activity in you project, add the following code in the activity layout file

<com.mapbox.mapboxsdk.maps.MapView
        android:id="@+id/mapView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

then open the activity kotlin file and add the following code to the onCreate method to create the map

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    val BarikoiKey= "BARIKOI_KEY_HERE"

    //use any of the style urls for different style of Barikoi maps
    val barikoiLiberty = "https://map.barikoi.com/styles/osm-liberty/style.json?key=${BarikoiKey}" 
    val barikoiBangla = "https://map.barikoi.com/styles/barikoi-bangla/style.json?key=${BarikoiKey}"
    val barikoiDark = "https://map.barikoi.com/styles/barikoi-dark/style.json?key=${BarikoiKey}"

    val styleUrl = barikoiLiberty
    // Get the map instance
    Mapbox.getInstance(this)

    // Set the map view layout
    setContentView(R.layout.activity_main)

    // Create map view
    mapView = findViewById(R.id.mapView)
    mapView?.onCreate(savedInstanceState)
    mapView?.getMapAsync { map ->
        // Set the style after mapView was loaded
        map.setStyle(styleUrl) 
            // Set the map view center
            map.cameraPosition = CameraPosition.Builder()
                .target(LatLng(23.827757, 90.3879139))
                .zoom(10.0)
                .build()
        }
    }
}

Now run the project in your device or emulator, the activity should show the map like this

If you are able to view a map like this in the app, kudos to you! now naturally you might be interested to try out more stuff in the map, to explore more you can checkout our documentation . If you faced any issues and the map is not showing somehow, please reach our to us via email : support@barikoi.com

Thank you!