Zenn
🗺️

[Android] Mapbox Composeのセットアップ

2025/02/24に公開
Android
Kotlin
Jetpack Compose
Mapbox
tech

背景

登山が趣味でYamapというアプリをよく使っているのですが、YamapではGoogleMapではなく、Mapboxという地図が用いられています。Composeにも対応しているようなので、今回はMapbox ComposeのAndroidでのセットアップをまとめたいと思います。
※ Mapboxについての説明は割愛します

トークンの取得

地図機能の利用や、ライブラリをMavenからダウンロードするために、Public TokenとSecret Tokenの2つが必要です。
アカウントがない場合は、まずMapboxにサインアップします
https://www.mapbox.com/

  • Public Token
    AdminタブのTokensを開くと「Default public token」があります。

  • Secret Token
    先ほどのTokenページ上部にあるCreate a tokenをクリックして作成します。
    名前を入力して、ライブラリをダウンロードするためにDOWNROADES:READにチェックを入れます。

作成されるとTokenページに表示されるのでそれをコピーしておきます。
※ 警告が出ている通り、ページを離れると見れなくなります。

Android Studioでのセットアップ

  • libs.versions.toml
    最新バージョンはRelease情報を確認してください。
[versions]
...
mapbox = "11.10.0"

[libraries]
...

mapbox-android = { group = "com.mapbox.maps", name = "android", version.ref = "mapbox" }
mapbox-compose = { group = "com.mapbox.extension", name = "maps-compose", version.ref = "mapbox" }
  • build.gradle.kts
dependencies {
    ...
    implementation(libs.mapbox.android)
    implementation(libs.mapbox.compose)
}
  • settings.gradle.kts
    Mavenからダウンロードするための設定です。usernameはMapboxのユーザー名ではなく、「mapbox」で固定になります。また、パスワードとしてSecret Keyを入力するのですが、Secrets Gradle Pluginなどを利用して安全に使用しましょう。
dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()

        // Add for Mapbox
        maven {
            url = uri("https://api.mapbox.com/downloads/v2/releases/maven")
            authentication {
                create<BasicAuthentication>("basic")
            }
            credentials {
                username = "mapbox" // Mapboxのユーザー名ではなく、「mapbox」で固定
                password = "your_secret_key"
            }
        }
    }
}
  • res/values/mapbox_access_token.xml
    mapbox_access_token.xmlを作成してPublic Keyを設定します。.gitignoreでmapbox_access_token.xmlを公開しないようにするなどして、Public Keyも安全に使用しましょう。
<resources xmlns:tools="http://schemas.android.com/tools">
    <string name="mapbox_access_token" translatable="false" tools:ignore="UnusedResources">your_public_key</string>
</resources>

あとはGradle Syncをすることで、ライブラリが正常にダウンロードできます。

デモ

MapboxMapというComposableがあるので、それを呼び出すだけで簡単に地図を表示できます。
何も設定をしないと地球全体が表示されてしまいますが、Zoomレベルや座標などを設定することで、アプリでよく見るような地図を簡単に表示できます。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            MapboxTheme {
                MapboxMap()
            }
        }
    }
}

まとめ

今回はMapbox Composeのセットアップをしました。セットアップは少し面倒ですが、かなり簡単に地図を表示できるだけではなく、MapboxStudioで独自の地図を作成してそれをアプリで読み込むなど色々カスタマイズできるので、今後も遊んでいこうと思います！

参考

https://docs.mapbox.com/android/ja/maps/guides/
https://docs.mapbox.com/android/ja/maps/examples/compose/

Discussion