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

TomTom セットアップ

TomTom Orbis Maps Display SDK を MapConductor から使う手順です。専用の Maven リポジトリを追加し、API キーをマニフェストで渡します。

MODULE

com.mapconductor:for-tomtom

API KEY

必要

VIEW

TomTomMapView

TIME

15 分

ほかのプラットフォームiOS React

デモを見る店舗マップ · React ↗

前提

Android 開発環境（Android Studio）

TomTom Developer Portal のアカウントと Orbis Maps の API キー

STEP 01

API キーを取得する

TomTom Developer Portal で Orbis Maps 用の API キーを発行します。

STEP 02

TomTom のリポジトリを足す

settings.gradle.ktsKotlin

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()

        // TomTom Orbis Maps SDK repository
        maven {
            url = uri("https://repositories.tomtom.com/artifactory/maven")
        }
    }
}

STEP 03

依存関係を追加する

app/build.gradle.ktsKotlin

dependencies {
    // TomTom Orbis Maps Display SDK
    implementation("com.tomtom.sdk.maps:map-display-standard:2.4.1")

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

    implementation("com.mapconductor:core")
    implementation("com.mapconductor:for-tomtom")
}

STEP 04

マニフェストにキーを書く

AndroidManifest.xmlXML

<manifest>
    <uses-permission android:name="android.permission.INTERNET" />

    <application>
        <meta-data
            android:name="TOMTOM_API_KEY"
            android:value="${TOMTOM_API_KEY}" />
    </application>
</manifest>

注意

secrets.properties はバージョン管理にコミットしないでください。.gitignore に追加しておくと事故を防げます。CI では環境変数など別の安全な経路で渡します。

STEP 05

テーマを確認する

TomTom の UI オーバーレイ（ロゴ・コンパスなど）は AppCompat 系のテーマを前提にしています。別のテーマでも描画自体は動きますが、警告ログが出ます。Theme.AppCompat または Theme.MaterialComponents 系を推奨します。

動作確認

ここまで動けば完了

地図とマーカーが出れば完了です。

TestTomTom.ktJetpack Compose

@Composable
fun TestTomTom(modifier: Modifier = Modifier) {
    val mapState = rememberTomTomMapViewState(
        mapDesign = TomTomMapDesign.Standard,
        cameraPosition = MapCameraPosition(
            position = GeoPoint(52.3676, 4.9041),
            zoom = 11.0,
        ),
    )

    TomTomMapView(state = mapState, modifier = modifier) {
        Marker(
            MarkerState(
                position = GeoPoint(52.3676, 4.9041),
                icon = DefaultMarkerIcon().copy(label = "Amsterdam"),
            ),
        )
    }
}

地図デザイン

TomTomMapDesign は Orbis Maps の標準スタイルに対応します。

TomTomMapDesign

Notes

Standard

標準の閲覧向けスタイル

Driving

運転向け

Satellite

衛星画像

うまくいかないとき

地図の描画位置がずれる

MapConductor 側で MapOptions(renderToTexture = true) を指定しています。既定の SurfaceView 描画は Compose の SubcomposeLayout と競合するためです。独自に MapOptions を組み立てている場合は同じ指定が必要です。

ビルドが通らない

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

次に

マーカー・ポリライン・ポリゴン・円・グラウンドイメージ・ラスターレイヤー・InfoBubble はすべて共通 API で使えます。TomTom はマーカーのネイティブドラッグを持たないため、MapConductor が MotionEvent を直接処理してドラッグを実装しています。draggable なマーカーはそのまま動きます。