ドキュメント / セットアップ / Android / MapLibre

MapLibre セットアップ

MapLibre Native Android を MapConductor から使う手順です。MapLibre 自体に API キーはなく、地図の見た目はスタイル JSON の配信元で決まります。いちばん短い手順で動かせるプロバイダです。

MODULE
com.mapconductor:for-maplibre
API KEY
不要
VIEW
MapLibreMapView
TIME
5 分
ほかのプラットフォームiOSReact

前提

Android 開発環境(Android Studio)
スタイル JSON の URL(デモタイル、商用サービス、または自前ホスト)
STEP 01

タイルの出どころを決める

MapLibre はレンダラーであってタイルの提供元ではありません。動作確認だけなら MapLibreDesign のデモ用スタイルで足りますが、本番では配信元を明示的に選ぶ必要があります。

  1. 無料・コミュニティ: OpenStreetMap 系のタイル、Protomaps(セルフホスト可)
  2. 商用: MapTiler Cloud、Stadia Maps(いずれも無料枠あり)
  3. セルフホスト: tileserver-gl などで自前配信
注意
デモタイルは動作確認用です。本番トラフィックを流してはいけません。またほとんどのタイル提供元は帰属表示(例: © OpenStreetMap contributors)を要求します。利用規約を確認して UI に出してください。
STEP 02

依存関係を追加する

MapLibre SDK は Maven Central から取得できるので、追加のリポジトリ設定は要りません。

settings.gradle.ktsKotlin
dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
    }
}
app/build.gradle.ktsKotlin
dependencies {
    // MapLibre Native Android SDK
    implementation("org.maplibre.gl:android-sdk:13.3.0")

    // MapConductor BOM pins every module below
    implementation(platform("com.mapconductor:mapconductor-bom:1.2.0"))

    implementation("com.mapconductor:core")
    implementation("com.mapconductor:for-maplibre")
}
STEP 03

マニフェストにパーミッションを足す

キーの注入がないので、必要なのはパーミッションだけです。

AndroidManifest.xmlXML
<manifest>
    <!-- Add internet permission for tile loading -->
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

    <application>
        <!-- no key to inject for MapLibre -->
    </application>
</manifest>
位置情報を使わないアプリでは ACCESS_*_LOCATION は不要です。タイルの取得には INTERNET だけが必要です。

動作確認

ここまで動けば完了

スタイルを指定して地図を出します。タイルが読み込まれ、ズーム・パン・回転が効けば完了です。

TestMapLibre.ktJetpack Compose
@Composable
fun TestMapLibre(modifier: Modifier = Modifier) {
    val mapState = rememberMapLibreMapViewState(
        cameraPosition = MapCameraPosition(
            position = GeoPoint(35.6762, 139.6503),
            zoom = 12.0,
        ),
        mapDesign = MapLibreDesign.OpenMapTiles,
    )

    // If the map appears, the setup is correct.
    MapLibreMapView(modifier = modifier, state = mapState)
}

地図デザイン

MapLibreDesign はスタイル JSON の URL を包んだ定数です。自前のスタイルを使う場合も同じ型を作って渡します。

MapLibreDesign
Notes
DemoTiles
MapLibre 公式のデモタイル。キー不要で最短で動く
OsmBright / OsmBrightEn / OsmBrightJa
OSM Bright。ラベルの言語違い
MapTilerTonerEn / MapTilerTonerJa
高コントラストの Toner スタイル
MapTilerBasicEn / MapTilerBasicJa
情報量を落とした Basic スタイル
OpenMapTiles
汎用の OpenMapTiles スタイル

うまくいかないとき

地図が真っ白のまま

  • スタイル URL に到達できるか、JSON が妥当か確認します。
  • INTERNET パーミッションが付いているか確認します。
  • Logcat にネットワークまたはパースのエラーが出ていないか見ます。

タイルだけ読み込まれない

  • タイルサーバーの URL を確認します。
  • 無料サービスのレート制限に当たっていないか確認します。
  • 商用プロバイダを使っている場合は、スタイル URL に埋め込んだキーが有効か確認します。

ビルドが通らない

  • 地図 SDK の座標とバージョンがバージョンカタログの指定と一致しているか確認します。
  • リポジトリ定義が settings.gradle.kts にあるか確認します(repositoriesMode が FAIL_ON_PROJECT_REPOS だと、モジュール側の repositories は無視されます)。
  • 複数の地図 SDK を同時に入れている場合は、依存の衝突がないか ./gradlew :app:dependencies で確認します。

次に

ベクタータイルはラスターより軽く、描画も速くなります。オフライン利用が要るならタイルのキャッシュを検討してください。