MapLibre GL Native for Android

MapLibre Native for Android is a library for embedding interactive map views with scalable, customizable vector maps onto Android devices.

Using MapLibre Native for Android with MapTiler maps gives you a beautiful and smooth experience from map browsing.

Create a PWA with MapTiler SDK JS

You can also develop your mobile PWA using HTML/CSS/JS/ with MapTiler SDK JS.

How to create a mobile PWA with MapTiler SDK JS

Get Started With MapLibre Native for Android

Create a new project

Open Android Studio and create a new project and choose the Empty Views Activity template.

In the “Language” dropdown, select “Kotlin” and keep the minimum API SDK to 24.

Add MapLibre SDK to the project

Add Maven central repository (optional)

The MapLibre Native package is available from Maven Central. New Android Studio projects have this repository enabled by default. If it is not enabled, you can add mavenCentral() to your project-level Gradle file (usually <project>/build.gradle).

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

Add MapLibre to your dependencies

Add the library as a dependency into your module Gradle file (usually <project>/<app-module>/build.gradle).

dependencies {
    ...
    implementation 'org.maplibre.gl:android-sdk:{{site.versions.maplibre-native-android}}'
    ...
}

Sync your Android project with Gradle files.

Add the layout for the map

Add a MapView to your layout XML file (usually <project>/<app-module>/src/main/res/layout/activity_main.xml).

Add your MapTiler API Key

gradle.properties (Project properties)

Create a variable with your MapTiler API Key in the gradle.properties file (usually <project>/gradle.properties).

MAPTILER_API_KEY="YOUR_MAPTILER_API_KEY_HERE"

Get your FREE API key

Replace YOUR_MAPTILER_API_KEY_HERE with your own API key. Make sure to protect the key before you publish it!

build.gradle (Module: app)

Set variable in the module build.gradle to access it in activity or fragment (usually <project>/<app-module>/build.gradle).

android {
    ...

    defaultConfig {
        ...
        buildConfigField "String", "MAPTILER_API_KEY", "${MAPTILER_API_KEY}"
    }

    ...
}

Explicitly tell grade to generate the BuildConfig file (optional)

Starting with android gradle plugin version 8, you now have to explicitly tell grade that you want to generate the BuildConfig file.

Add the buildConfig option to the module build.gradle file (usually <project>/<app-module>/build.gradle).

android {
    ...

    buildFeatures {
        buildConfig = true
    }

    ...
}

Sync your Android project with Gradle files.

Initialize Map View

Initialize the MapView in your MainActivity file (usually <project>/<app-module>/src/main/res/layout/activity_main.xml) by following the example below:

import android.os.Bundle
import android.view.LayoutInflater
import androidx.appcompat.app.AppCompatActivity
import com.mapbox.mapboxsdk.Mapbox
import com.mapbox.mapboxsdk.camera.CameraPosition
import com.mapbox.mapboxsdk.geometry.LatLng
import com.mapbox.mapboxsdk.maps.MapView

class MainActivity : AppCompatActivity() {
    // Declare a variable for MapView
    private lateinit var mapView: MapView

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

        //Get the API Key by app's BuildConfig
        val key = BuildConfig.MAPTILER_API_KEY

        // Find other maps in https://cloud.maptiler.com/maps/
        val mapId = "{{site.map-styles.streets}}"

        val styleUrl = "https://api.maptiler.com/maps/$mapId/style.json?key=$key"

        // Init MapLibre
        Mapbox.getInstance(this)

        // Init layout view
        val inflater = LayoutInflater.from(this)
        val rootView = inflater.inflate(R.layout.activity_main, null)
        setContentView(rootView)

        // Init the MapView
        mapView = rootView.findViewById(R.id.mapView)
        mapView.getMapAsync { map ->
            map.setStyle(styleUrl)
            map.cameraPosition = CameraPosition.Builder().target(LatLng(0.0,0.0)).zoom(1.0).build()
        }
    }

    override fun onStart() {
        super.onStart()
        mapView.onStart()
    }

    override fun onResume() {
        super.onResume()
        mapView.onResume()
    }

    override fun onPause() {
        super.onPause()
        mapView.onPause()
    }

    override fun onStop() {
        super.onStop()
        mapView.onStop()
    }

    override fun onLowMemory() {
        super.onLowMemory()
        mapView.onLowMemory()
    }

    override fun onDestroy() {
        super.onDestroy()
        mapView.onDestroy()
    }

    override fun onSaveInstanceState(outState: Bundle) {
        super.onSaveInstanceState(outState)
        mapView.onSaveInstanceState(outState)
    }
}

Build and run the app. If you run the app successfully, a map will be displayed, as seen in the screenshot below.

Get Started With MapLibre GL JS for React Native

You can also develop your applications using React Native.

Get Started React Native

Get Started With MapTiler GL JS for Flutter

You can also develop your applications using Flutter.

Get Started Flutter

API Reference

Visit Android API Documentation to view the MapLibre Native API for Android documentation.