Android

マップを表示する

このチュートリアルでは ArcGIS Runtime SDK for Android を使用して、マップとベースマップ レイヤーを表示する方法を紹介します。

マップには、地理データのレイヤーが含まれています。マップには、ベースマップ レイヤーと、オプションで1つ以上のデータレイヤーを追加できます。マップビューを使用し、場所とズームレベルを設定することで、マップの特定の領域を表示できます。

このチュートリアルでは、地形ベースマップレイヤーを使用して、富士山付近を表示する地図を作成します。

前提条件

このチュートリアルを実施するには、以下が必要です。

  1. API キーにアクセスするための ArcGIS 開発者アカウント。アカウントをお持ちでない場合は、サインアップ(無料)してください。アカウントの作成方法は「開発者アカウントの作成」をご覧ください。
  2. 開発環境がシステム要件を満たしていることを確認します。
  3. Kotlin で Android 開発を行うための IDE。このチュートリアルでは Android Studio を使用していますが、記述されたコードは Kotlin をサポートする任意の Android の IDE で動作します。

ステップ

新しい Android Studio プロジェクトを作成します

Android Studio を使用してアプリを作成し、API を参照するように構成します。

  1. Android Studio を開きます。

    • メニューバーで、[File] > [New] > [New Project….] をクリックします。

    • [Create New Project] ウィンドウで、[Phone and Tablet] タブが選択されていることを確認してから、[Empty Activity] を選択します。[Next] をクリックします。

      • Gradle は、Android Studio のデフォルトのビルドツールです。Gradle を使用できない場合は、API を手動で取得する を参照してください。
    • [Configure your project] ウィンドウで、次の構成オプションを設定します。

      • Name: Display a map
      • Package name: com.example.app に変更します。または、組織に合わせて変更してください。
      • Save location: 新しいフォルダに設定します
      • Language: Kotlin
      • Minimum SDK: API 23: Android 6.0 (Marshmallow)
  2. プロジェクトのツールウィンドウで、現在のビューが Android であることを確認してください。チュートリアルの説明では、そのビューを参照しています。

    ビュー名が Android 以外の名前(プロジェクトやパッケージなど)の場合は、プロジェクトツールウィンドウのタイトルバーの左端のコントロールをクリックし、リストから Android を選択します。

  3. プロジェクト ツールウィンドウから、[Gradle Scripts] > [build.gradle (Project: Display_a_map)] を開きます。Esri の Maven リポジトリから API を参照するには、allprojects の repositories ブロックに以下の行を追加します。

    build.gradle (Project: Display_a_map)

    allprojects {
        repositories {
            google()
            jcenter()
               
            // 追加開始
            maven {
                url 'https://esri.jfrog.io/artifactory/arcgis'
            }
            // 追加終了
    
        }
    }
    
  4. プロジェクト ツールウィンドウから、[Gradle Scripts] > [build.gradle (Module: Display_a_map.app)] を開きます。dependencies ブロックに以下の行を追加して、ArcGIS Runtime SDK for Android を含めます。

    build.gradle (Module: Display_a_map.app)

    dependencies {
        implementation fileTree(dir: "libs", include: ["*.jar"])
        implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
        implementation 'androidx.appcompat:appcompat:1.2.0'
        implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
    
        // 追加開始
        implementation 'com.esri.arcgisruntime:arcgis-android:100.12.0'
        // 追加終了
    
    }
    
  5. android ブロックに以下の buildFeatures ブロックを追加して、ビューのバインドを有効にします。

    build.gradle (Module: Display_a_map.app)

    kotlinOptions {
        jvmTarget = JavaVersion.VERSION_1_8.toString()
    }
    
    // 追加開始
    buildFeatures {
        viewBinding true
    }
    // 追加終了
    
  6. Gradle の変更を同期します。[Sync now] プロンプトをクリックするか、ツールバーの更新アイコン(Sync Project with Gradle Files)をクリックします。同期に数分かかるかもしれません。

  7. プロジェクトツールウィンドウから、[app] > [manifests] > [AndroidManifest.xml] を開きます。Android マニフェストを更新して、ネットワークアクセスを許可し、アプリが OpenGL2.0 以降を使用することを示します。

    AndroidManifest.xml

    <?xml version="1.0" encoding="utf-8"?>
    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.app">
    
    // 追加開始
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-feature
        android:glEsVersion="0x00020000"
        android:required="true" />
    // 追加終了
    

インポートステートメントを追加する

[app] > [java] > [com.example.app] > [MainActivity.kt] を開き、ArcGIS Runtime SDK を参照するようにインポートステートメントを追加します。

MainActivity.kt

package com.example.app

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

// 追加開始
import com.esri.arcgisruntime.ArcGISRuntimeEnvironment
import com.esri.arcgisruntime.mapping.ArcGISMap
import com.esri.arcgisruntime.mapping.BasemapStyle
import com.esri.arcgisruntime.mapping.Viewpoint
import com.esri.arcgisruntime.mapping.view.MapView
import com.example.app.databinding.ActivityMainBinding
// 追加終了

マップビューの UI を追加する

マップビューは、マップを表示する UI コンポーネントです。また、タッチジェスチャによるナビゲートなど、ユーザーによるマップの操作も処理します。XML を使用してマップビューを UI に追加し、メインアクティビティのソースコードで使用できるようにします。

  1. [app] > [res] > [layout] > [activity_main.xml] で、TextView 要素全体を MapView 要素に置き換えます。

    XMLコードが表示されない場合は、[Code] タブを選択してデザインモードを切り替え、エディターに XML コードを表示します。 MapView 要素は、ArcGIS Runtime SDK for Android から MapView クラスのインスタンスを作成します。

    メインアクティビティ ソースコードでは、android:id 属性の値で宣言されている暗黙的なプロパティを使用してその MapView インスタンスにアクセスできます。この場合、プロパティの名前は mapView になります。

    activity_main.xml

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    
        // 追加開始
        <com.esri.arcgisruntime.mapping.view.MapView
            android:id="@+id/mapView"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
        // 追加終了
    
    </androidx.constraintlayout.widget.ConstraintLayout>
    
  2. MainActivity.kt で、生成された Android クラス ActivityMainBinding を参照する activityMainBinding という名前の読み取り専用ローカル変数を作成します。

    MainActivity.kt

    class MainActivity : AppCompatActivity() {
    
        // 追加開始
        private val activityMainBinding by lazy {
            ActivityMainBinding.inflate(layoutInflater)
        }
        // 追加終了
    
  3. mapView という名前の読み取り専用変数を作成し、それを activity_main.xml で作成された mapView にバインドします。

    MainActivity.kt

    class MainActivity : AppCompatActivity() {
    
        private val activityMainBinding by lazy {
            ActivityMainBinding.inflate(layoutInflater)
        }
    
        // 追加開始
        private val mapView: MapView by lazy {
            activityMainBinding.mapView
        }
        // 追加終了
    
  4. setContentView の引数を “R.layout.activity_main” から “activityMainBinding.root” に変更します。

    MainActivity.kt

    
    private val activityMainBinding by lazy {
        ActivityMainBinding.inflate(layoutInflater)
    }
       
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // 変更前
        // setContentView(R.layout.activity_main)
        // 変更後
        setContentView(activityMainBinding.root)
    }
    

マップを追加する

マップビューを使用して、富士山を中心としたマップを表示します。マップには、地形ベースマップレイヤーが含まれます。

  1. MainActivity.kt で、MainActivity クラスに新しい setupMap メソッドを追加し、ArcGISMap を作成します。ARCGIS_TOPOGRAPHIC という名前の特定のベースマップスタイルを使用して ArcGISMap を構成します。

    MainActivity.kt

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(activityMainBinding.root)
    }
    
    // 追加開始
    // ここでマップを設定します。このメソッドは onCreate() から呼び出します
    private fun setupMap() {
    
        // BasemapStyle で地図を作成する
        val map = ArcGISMap(BasemapStyle.ARCGIS_TOPOGRAPHIC)
    
    }
    // 追加終了
    

    地形図(ARCGIS_TOPOGRAPHIC)以外にも、道路地図(ARCGIS_STREETS)衛星画像(ARCGIS_IMAGERY)オープンストリートマップ(OSM_STANDARD)など、様々なスタイルが用意されています。

  2. mapView の map プロパティを新しい ArcGISMap に設定します。次に、ViewPoint を作成し、それを mapView に追加します。

    MainActivity.kt

    // ここでマップを設定します。このメソッドは onCreate() から呼び出します
    private fun setupMap() {
    
        // BasemapStyle で地図を作成する
        val map = ArcGISMap(BasemapStyle.ARCGIS_TOPOGRAPHIC)
           
        // 追加開始
        // レイアウトの MapView に表示されるマップを設定します
        mapView.map = map
        // 視点の Viewpoint(緯度、経度、スケール) を設定します
        mapView.setViewpoint(Viewpoint(35.360626, 138.727363, 200000.0))
        // 追加終了
    }
    
  3. onCreate メソッドで、setupMap を呼び出します。

    MainActivity.kt

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(activityMainBinding.root)
    
        // 追加開始
        setupMap()
        // 追加終了
    }
    
  4. MainActivity クラスの onPauseonResumeonDestroy メソッドをオーバーライドします。

    MainActivity.kt

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(activityMainBinding.root)
    
        setupMap()
    
    }
    
    // 追加開始
    override fun onPause() {
        mapView.pause()
        super.onPause()
    }
    
    override fun onResume() {
        super.onResume()
        mapView.resume()
    }
    
    override fun onDestroy() {
        mapView.dispose()
        super.onDestroy()
    }
    // 追加終了
    

API キーを設定する

ArcGIS Online でホストされているサービス、Web マップ、Web シーンにアクセスできるようにするには、API キーが必要です。 まだ作成していない場合は、ArcGIS Developers ダッシュボード に移動して、API キーを取得します。作成方法は「API キーの取得」をご覧ください。

  1. アプリを実行する前に、API キーを使用して ArcGISRuntimeEnvironmentapiKey プロパティを設定します。

    MainActivity.kt

    private fun setupMap() {
           
        // 追加開始
        // API キーを設定します
        // 注:API キーをソースコードに保存することはベストプラクティスではありません。API キーが参照されます。
        //チュートリアルでは便宜上ソースコードに記載しています
        ArcGISRuntimeEnvironment.setApiKey("<API キー>")
        // 追加終了
    
        val map = ArcGISMap(BasemapStyle.ARCGIS_TOPOGRAPHIC)
    
  2. [Run] > [Run] > [app] をクリックして、アプリを実行します。アプリを実行するエミュレーターが表示されます。アプリがビルドされてもエミュレーターが表示されない場合は、エミュレーターを追加する必要があります。[Tools] > [AVD Manager] > [Create Virtual Device…] をクリックします。

富士山を中心とした地形ベースマップレイヤーのマップが表示されます。マップビューをピンチ、ドラッグ、およびダブルタップして、マップを操作します。

完成版のプロジェクトはこちらからダウンロードできます(マップの表示場所は本チュートリアルで設定した場所とは異なります)。

ビルドした際に「More than one file was found with OS independent path ‘META-INF/DEPENDENCIES’.」のエラーが発生した場合は、app の build.gradle の android ブロックに下記を追加します。

android {
    ...   
    packagingOptions {
        exclude 'META-INF/DEPENDENCIES'
    }          
}

Web マップを表示する

Web マップの作成」のガイドで Web マップを作成している場合は、作成した Web マップも基本的に同じステップで表示できます。

  1. マップを表示するのステップで作成したプロジェクトの [app] > [java] > [com.example.app] > [MainActivity.kt] を開き、必要なインポートステートメントを追加します。

    MainActivity.kt

    import com.esri.arcgisruntime.portal.Portal
    import com.esri.arcgisruntime.portal.PortalItem
    
  2. setupMap メソッドを下記のように書き換えます。

    MainActivity.kt

        ArcGISRuntimeEnvironment.setApiKey("<API キー>")
        val portal = Portal("https://www.arcgis.com", false)
        val itemId = "<Web マップの ID>"
        val portalItem = PortalItem(portal, itemId)
        val map = ArcGISMap(portalItem)
        mapView.map = map
    
    

アプリの動作が確認できたら ArcGIS の セキュリティと認証について学びましょう!