Mapbox Maps SDKを使って地図を表示してみよう Android編

この記事は Mapbox Japan Advent Calendar 2022 の 12日目の記事です。

はじめに

本記事は、AndroidアプリでMapboxのSDKを使って地図を表示してみよう！という基礎的な内容となります。

Maps SDKのリンクは以下になります。
Maps SDK for Android

記事中で使用している各種ツールのバージョンは以下となります。
Android Studio: 2021.3.1 Patch 1
Mapbox Map SDK: v10.9.1

地図を表示してみよう

ここからは地図を表示するまでの過程を順番に説明していきたいと思います。

トークンの取得

MapboxのSDKを利用するためには、Mapboxアカウントを作成してアクセストークンを取得する必要があります。もしまだMapboxアカウントを持ってない場合はこちらから作成をお願いします。

すでにアカウントのお持ちの場合はアカウントページを開いて以下の２つのトークンを取得します。

• Publicトークン: アクセストークンページの「Default public token」からトークンをコピーして取得します。

• Secretトークン: 上記と同様のアクセストークンページから、「Create Token」ボタンより新規のトークンを作成します。このときDownloads:Readにチェックを入れることを忘れないようにしましょう。次のライブラリのダウンロードの際に必要になります。

Publicトークン	Secretトークン

Secretトークンはコピーするタイミングが作成後の一度しかありません。忘れずにコピーして保管しておきましょう。もし忘れたり無くした場合は再度作成することになります。

また、上記２つのトークンは、決してGithubのパブリックレポジトリーなどの誰でもアクセスできるところにアップロードしないようにしましょう。

Secretトークンの設定

作成したSecretトークンはMapboxSDKをダウンロードするために必要になります。そのために以下の設定を行います。

1. gradle.propertiesファイルをGradleユーザホームディレクトリから探すか、なければ作成します。このディレクトリは通常«USER_HOME»/.gradleにあるはずです。ファイル作成後は«USER_HOME»/.gradle/gradle.propertiesのようになります。
2. gradle.properties に以下の設定を追加します。

gradle.properties

MAPBOX_DOWNLOADS_TOKEN=YOUR_SECRET_MAPBOX_ACCESS_TOKEN <- 前述で取得したSecretトークン

Publicトークンの設定

続いてPublicトークンです。こちらは、R.strings.xmlに直接設定します。以下の設定を追加しましょう。

R.strings.xml

<string name="mapbox_access_token">YOUR_MAPBOX_ACCESS_TOKEN</string>

こちらは前述したように、くれぐれも公開しないように注意しましょう。
トークンを安全に管理する方法はこちら（英語）を参考にしてください。

Mapbox Maps SDK Android のインストール

Gradleを利用してライブラリの導入を行います。

アクセストークンの設定を確認する

Mapboxのライブラリをダウンロードするには、前章にて設定したアクセストークンにDownloads:Readスコープを設定し、gradle.propertiesに追加する必要があります。

プロジェクトレベルのgradleファイルに設定を追加する

Mapboxのライブラリをダウンロードするためには、ユーザ名とパスワードの設定が必要になります。プロジェクトレベルのgradleファイルにその設定を追加していきましょう。

このときの注意点としては、ユーザ名はMapboxアカウント名ではなく、mapbox とする必要があります。
また以下のようにAndroid Studioのバージョンによって設定方法が異なる点も注意が必要です。

それでは、Android Studioのバージョン別に設定方法を見ていきましょう。

Android　Studio のバージョンがArctic Fox (2020.3.1) 未満で、Gradleバージョンがv6.0未満の場合
プロジェクトルートにあるbuild.gradleに以下の設定を追加します。

project/build.gradle

allprojects {
    repositories {
        google()
        mavenCentral()
+        maven {
+              url 'https://api.mapbox.com/downloads/v2/releases/maven'
+              authentication {
+                  basic(BasicAuthentication)
+              }
+              credentials {
+                // Do not change the username below.
+                // This should always be `mapbox` (not your username).
+                  username = "mapbox"
+                  // Use the secret token you stored in gradle.properties as the password
+                  password = project.properties['MAPBOX_DOWNLOADS_TOKEN'] ?: ""
+              }
+          }
    }
}

Android　Studio のバージョンがArctic Fox (2020.3.1) 以上で、Gradleバージョンがv6.0以上の場合

プロジェクトルートにあるsettings.gradleに以下の設定を追加します

project/settings.gradle

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
+        maven {
+          url 'https://api.mapbox.com/downloads/v2/releases/maven'
+          authentication {
+            basic(BasicAuthentication)
+          }
+          credentials {
+            // Do not change the username below.
+            // This should always be `mapbox` (not your username).
+            username = "mapbox"
+            // Use the secret token you stored in gradle.properties as the password
+            password = MAPBOX_DOWNLOADS_TOKEN
+          }
+        }
    }
}

プロジェクトレベルのgradleファイルに設定を追加する

まずminSdkVersionが 21以上になっているか確認します

app/build.gradle

android {
  ...
  defaultConfig {
      minSdkVersion 21
  }
}

続いて、Mapbox Maps SDK for Androidの依存性を以下のように追加します

app/build.gradle

dependencies {
  implementation 'com.mapbox.maps:android:10.9.1'
}

Gradle を Sync する

Gradleファイルを編集したので忘れずにSyncするようにしましょう。以下のボタンからも手動でSyncさせることもできます。

地図の表示

さてここまでくればあとは、ソースコードを記述するだけです。今回はFragmentを利用した場合のサンプルを示したいと思います。

まずはlayoutファイルを以下のように設定します。

fragment_first.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".FirstFragment"
    >

  <com.mapbox.maps.MapView
      android:id="@+id/mapView"
      android:layout_width="0dp"
      android:layout_height="0dp"
      app:layout_constraintTop_toTopOf="parent"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      app:mapbox_cameraTargetLat="35.6812"
      app:mapbox_cameraTargetLng="139.7671"
      app:mapbox_cameraZoom="14.5"
      />

</androidx.constraintlayout.widget.ConstraintLayout>

以下の記述によって、初回表示時のカメラ位置とズームレベルを指定しています。

app:mapbox_cameraTargetLat="35.6812"
app:mapbox_cameraTargetLng="139.7671"
app:mapbox_cameraZoom="14.5"

続いて以下のようにFragmentを設定します。

FirstFragment.kt

package com.example.mapboxdemo

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import com.example.mapboxdemo.databinding.FragmentFirstBinding
import com.mapbox.maps.Style

/**
 * A simple [Fragment] subclass as the default destination in the navigation.
 */
class FirstFragment : Fragment() {

    private var _binding: FragmentFirstBinding? = null

    // This property is only valid between onCreateView and
    // onDestroyView.
    private val binding get() = _binding!!

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        _binding = FragmentFirstBinding.inflate(inflater, container, false)
        return binding.root

    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        _binding?.mapView?.getMapboxMap()?.loadStyleUri(Style.MAPBOX_STREETS)

    }

    override fun onDestroyView() {
        super.onDestroyView()
        _binding = null
    }
}

実行結果

ソースコード

本日使用したソースコードはこちらです。トークンはご自身のトークンに差し替えて使用していただければと思います。

おわりに

いかがでしたでしょうか？
最初のクレデンシャル設定が少し複雑だったかもしれませんが、思いの外簡単に地図の表示までできたのかなと思います。

iOS編

iOS編もありますのでぜひ見てみてください！
https://zenn.dev/capotasto/articles/7cbbac3f8edd92