Need to configure your backend?See Build a Backend →

マップを操作する

Amplify-MapLibre アダプターをインストールする

以下の依存関係を build.gradle (Module :app) ファイルに追加し、プロンプトが表示されたら「Sync Now」をクリックします：

dependencies {
    implementation 'com.amplifyframework:aws-auth-cognito:ANDROID_VERSION'
    implementation 'com.amplifyframework:aws-geo-location:ANDROID_VERSION'
    // MapLibre をアプリに統合するにはこの依存関係を追加します
    implementation 'com.amplifyframework:maplibre-adapter:ANDROID_VERSION'

注： UI コンポーネントに必要な最小 API レベルは 21 です。

マップを表示する

まず、Amazon Location Service マップリソースをプロビジョニングし、マップを構成または既存のリソースを使用ガイドの手順に従ってアプリを構成していることを確認します。

Android アプリでマップをレンダリングするために利用可能な 2 つの UI コンポーネントがあります。MapLibreViewとAmplifyMapViewです。MapLibreViewは標準のAndroid MapLibre MapViewの拡張で、Amplify.Geo API と統合されていますが、AmplifyMapViewは組み込みの場所検索、マップコントロール、マーカー、いくつかの標準 UX インタラクションを備えたラッパーです。

`MapLibreView`対`AmplifyMapView`

目標が UI をカスタマイズすることである場合、MapLibreViewは独自のコントロールとフローを構築および統合できるプレーンなマップを提供します。目標が標準 UI を使用してマップで場所を検索および選択することである場合、AmplifyMapViewは良い選択です。

AmplifyMapViewの拡張性は制限されていますが、mapViewプロパティ（Java の場合getMapView()）を通じてラップされたMapLibreViewにアクセスできます。したがって、MapLibreViewで利用可能なすべての API もAmplifyMapViewで利用可能です。

MapLibreView

MapLibreViewは MapLibre ライブラリによって提供される標準MapViewの拡張です。実装はAmplify.Geo統合をバックグラウンドに追加して、開発者がライブラリ統合ではなく UI に集中できるようにします。つまり、すべての MapLibre API が利用可能で、期待通りに動作します。API リファレンスとガイドについては、公式 MapLibre SDK for Android ドキュメントを確認してください。

アプリにマップを追加する

Android Studio でアプリのsrc/main/res/layoutディレクトリに移動します
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"
    xmlns:mapbox="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <com.amplifyframework.geo.maplibre.view.MapLibreView
        android:id="@+id/mapView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
</androidx.constraintlayout.widget.ConstraintLayout>

MapLibreView を初期化する

アプリのアクティビティ（例：MainActivity）に移動します
アプリのアクティビティの先頭に MapLibreView のインポートステートメントを追加します：

import com.amplifyframework.geo.maplibre.view.MapLibreView;

import com.amplifyframework.geo.maplibre.view.MapLibreView

アクティビティの最上位でビューインスタンス変数を宣言します：

private MapLibreView mapView;

private val mapView by lazy {
    findViewById<MapLibreView>(R.id.mapView)

アクティビティのonCreateでマップと対話します：

protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // 注：setContentView を呼び出す前に Amplify を構成してください
    // 入門手順を参照してください
    setContentView(R.layout.activity_main);
    mapView = findViewById(R.id.mapView);
    // これでマップビューと相互作用できます。以下の例を参照してください

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // 注：setContentView を呼び出す前に Amplify を構成してください
    // 入門手順を参照してください
    setContentView(R.layout.activity_main)
    // これでマップビューと相互作用できます。以下の例を参照してください

マップと相互作用する

マップと相互作用するには、マップを読み込む必要があります。マップの準備が整ったときに呼び出されるgetMapAsyncまたは、マップとそのスタイルの両方が準備が整ったときに呼び出されるgetStyleのいずれかを使用できます。SymbolManagerなどの一部の API では、マップ上にマーカーやその他のシンボルを描画できるようにスタイルも読み込まれる必要があります。それがgetStyleが便利な場合です。

マップの中心を更新する

import com.mapbox.mapboxsdk.camera.CameraPosition;
import com.mapbox.mapboxsdk.geometry.LatLng;

mapView.getMapAsync(map -> {
    LatLng seattle = new LatLng(47.6160281982247, -122.32642111977668);
    map.setCameraPosition(
        new CameraPosition.Builder()
            .target(seattle)
            .zoom(13.0)
            .build()

import com.mapbox.mapboxsdk.camera.CameraPosition
import com.mapbox.mapboxsdk.geometry.LatLng

mapView.getMapAsync { map ->
    val seattle = LatLng(47.6160281982247, -122.32642111977668)
    map.cameraPosition = CameraPosition.Builder()
        .target(seattle)
        .zoom(13.0)
        .build()

cameraPositionを更新すると、カメラを渡された座標に移動します。アニメーションなしで。アニメーションが必要な場合は、代わりにmap.animateCamera()を使用してください。詳細については、公式リファレンスを参照してください。

マップにマーカーを追加する

MapLibre SDK for Android は、マップ上にマーカーを表示するためにMapLibre Annotation Pluginに依存しています。

import com.mapbox.mapboxsdk.camera.CameraUpdateFactory;
import com.mapbox.mapboxsdk.plugins.annotation.SymbolOptions;

mapView.getStyle((map, style) -> {
    LatLng spaceNeedle = new LatLng(47.6205063, -122.3514661);
    mapView.symbolManager.create(
        new SymbolOptions()
                .withIconImage("place")
                .withLatLng(spaceNeedle)
    map.animateCamera(CameraUpdateFactory.newLatLngZoom(spaceNeedle, 16.0));

import com.mapbox.mapboxsdk.camera.CameraUpdateFactory
import com.mapbox.mapboxsdk.plugins.annotation.SymbolOptions

mapView.getStyle { map, style ->
    val spaceNeedle = LatLng(47.6205063, -122.3514661)
    mapView.symbolManager.create(
        SymbolOptions()
            .withIconImage("place")
            .withLatLng(spaceNeedle)
    map.animateCamera(CameraUpdateFactory.newLatLngZoom(spaceNeedle, 16.0))

注：

mapView.symbolManagerはMapLibre Annotation PluginからSymbolManagerの組み込み参照で、いくつかの標準構成があります。
カスタマイズされたアイコンまたは他のタイプのシェイプとレイヤーのレンダリングが必要な場合、SymbolManagerのインスタンスを作成して、異なるタイプのカスタムユースケースを管理するために使用できます。

Android Studio でアプリのsrc/main/res/layoutディレクトリに移動します
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"
    xmlns:map="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <com.amplifyframework.geo.maplibre.view.AmplifyMapView
        android:id="@+id/mapView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
</androidx.constraintlayout.widget.ConstraintLayout>

AmplifyMapView を初期化する

アプリのアクティビティ（例：MainActivity）に移動します
アプリのアクティビティの先頭に AmplifyMapView のインポートステートメントを追加します：

import com.amplifyframework.geo.maplibre.view.AmplifyMapView;

import com.amplifyframework.geo.maplibre.view.AmplifyMapView

アクティビティの最上位でビューインスタンス変数を宣言します：

private AmplifyMapView amplifyMapView;

private val amplifyMapView by lazy {
    findViewById<AmplifyMapView>(R.id.mapView)

アクティビティのonCreateでマップと相互作用します：

protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // 注：setContentView を呼び出す前に Amplify を構成してください
    // 入門手順を参照してください
    setContentView(R.layout.activity_main);
    amplifyMapView = findViewById(R.id.mapView);
    // これでマップビューと相互作用できます。以下の例を参照してください

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // 注：setContentView を呼び出す前に Amplify を構成してください
    // 入門手順を参照してください
    setContentView(R.layout.activity_main)
    // これでマップビューと相互作用できます。以下の例を参照してください

場所を選択する

AmplifyMapViewが提供するメイン API は、マップ上で場所が選択されたときに呼び出されるイベントリスナーです。マークをクリックするか、リスト上のアイテムをクリックします。

import android.util.Log;

amplifyMapView.setOnPlaceSelectListener((place, symbol) -> {
    // place は AmazonLocationPlace のインスタンスです
    // symbol は MapLibre から Symbol のインスタンスです
    Log.i("MyAmplifyApp", "The selected place is " + place.getLabel());
    Log.i("MyAmplifyApp", "It is located at " + place.getCoordinates());

import android.util.Log

amplifyMapView.onPlaceSelect { place, symbol ->
    // place は AmazonLocationPlace のインスタンスです
    // symbol は MapLibre から Symbol のインスタンスです
    Log.i("MyAmplifyApp", "The selected place is ${place.label}")
    Log.i("MyAmplifyApp", "It is located at ${place.coordinates}")

AmplifyMapView 構成パラメータ

ビューは以下の構成パラメータで初期化できます：

プロパティ	型	説明	デフォルト
`map:map_centerLatitude`	Float	初期中心緯度	`0.0`
`map:map_centerLongitude`	Float	初期中心経度	`0.0`
`map:map_minZoomLevel`	Integer	最小ズームレベル（最小は 0）	`3`
`map:map_maxZoomLevel`	Integer	最大ズームレベル（最大は 22）	`18`
`map:map_showCompassIndicator`	Boolean	コンパスを表示するかどうか	`true`
`map:map_showZoomControls`	Boolean	ズームコントロールを表示するか	`false`
`map:map_zoomLevel`	Integer	初期ズームレベル（0 から 22）	`14`

例：

<?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"
    xmlns:map="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <com.amplifyframework.geo.maplibre.view.AmplifyMapView
        android:id="@+id/mapView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        map:map_zoomLevel="12"
        map:map_centerLatitude="47.6160281982247"
        map:map_centerLongitude="-122.32642111977668"
        map:map_showCompassIndicator="true"
        map:map_showZoomControls="true"
</androidx.constraintlayout.widget.ConstraintLayout>

異なるマップスタイルを表示する

getAvailableMaps API は、表示可能なすべてのマップの情報を取得します。

これは、ユーザーにさまざまなマップスタイルの選択肢を提供したい場合に便利です。

Amplify.Geo.getAvailableMaps(
    result -> {
        for (final MapStyle style : result) {
            Log.i("MyAmplifyApp", style.toString());
    error -> Log.e("MyAmplifyApp", "Failed to get available maps.", error)

Amplify.Geo.getAvailableMaps(
        for (mapStyle in it) {
            Log.i("MyAmplifyApp", mapStyle.toString())
    { Log.e("MyAmplifyApp", "Failed to get available maps.", it) }

    val result = Amplify.Geo.getAvailableMaps()
    for (mapStyle in result) {
        Log.i("MyAmplifyApp", mapStyle.toString())
} catch (error: GeoException) {
    Log.e("MyAmplifyApp", "Failed to get available maps.", error)

RxAmplify.Geo.getAvailableMaps().subscribe(
    result -> {
        for (final MapStyle style : result) {
            Log.i("MyAmplifyApp", style.toString());
    error -> Log.e("MyAmplifyApp", "Failed to get available maps.", error)

アダプターからsetStyleメソッドを使用してマップに別のスタイルを設定できます：

MapLibreViewで：

// mapStyle は Amplify.Geo.getAvailableMaps()から選択されたスタイルへの参照です
mapView.setStyle(mapStyle, style -> {
    Log.i("MyAmplifyApp", "Finished loading " + mapStyle.getStyle());

AmplifyMapViewで：

// mapStyle は Amplify.Geo.getAvailableMaps()から選択されたスタイルへの参照です
amplifyMapView.getMapView().setStyle(mapStyle, style -> {
    Log.i("MyAmplifyApp", "Finished loading " + mapStyle.getStyle());

MapLibreViewで：

// mapStyle は Amplify.Geo.getAvailableMaps()から選択されたスタイルへの参照です
mapView.setStyle(mapStyle) { style ->
    Log.i("MyAmplifyApp", "Finished loading ${mapStyle.style}.")

AmplifyMapViewで：

// mapStyle は Amplify.Geo.getAvailableMaps()から選択されたスタイルへの参照です
amplifyMapView.mapView.setStyle(mapStyle) { style ->
    Log.i("MyAmplifyApp", "Finished loading ${mapStyle.style}.")

マップを操作する

Amplify-MapLibre アダプターをインストールする

マップを表示する

ユーザーインターフェースを選択する

`MapLibreView`対`AmplifyMapView`

MapLibreView

アプリにマップを追加する

MapLibreView を初期化する

マップと相互作用する

マップの中心を更新する

マップにマーカーを追加する

MapLibreView 構成パラメータ

AmplifyMapView

アプリにマップを追加する

AmplifyMapView を初期化する

場所を選択する

AmplifyMapView 構成パラメータ

異なるマップスタイルを表示する

マップを操作する

MapLibreView対AmplifyMapView

`MapLibreView`対`AmplifyMapView`