マップを操作する

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

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

Amplify-MapLibre はオープンソースアダプターで、一般的な MapLibre SDK が Amplify Geo とシームレスに連動できるようにします。

1. Amplify-MapLibre アダプターをアプリケーションにインストールするには、Xcode でプロジェクトを開き、File > Add Packages... を選択します

2. Amplify-MapLibre GitHub リポジトリ URL（https://github.com/aws-amplify/amplify-ios-maplibre）を検索バーに入力して Enter キーを押します。結果が読み込まれるのを待ちます。Swift Package Manager にインストールする amplify-ios-maplibre のバージョンのリポジトリルールが表示されます。

3. 依存関係ルール Up to Next Major Version を選択します。これにより、互換性のある最新バージョンの依存関係が使用され、Add Package をクリックします。

4. 最後に、プロジェクトに追加するライブラリを選択します。アダプターが提供する SwiftUI ユーザーインターフェースコンポーネントを使用する場合は、AmplifyMapLibreAdapter と AmplifyMapLibreUI の両方を選択します。Amplify Geo が MapLibre と直接連動できるようにしたいが、提供される SwiftUI ビューを使用したくない場合は、AmplifyMapLibreAdapter のみを選択できます。ライブラリを選択したら、Add Package をクリックします。

マップを表示する

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

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

マップを表示する 2 つの方法があります。最も簡単に始める方法は、AmplifyMaplibreUIライブラリを使用してAMLMapViewのインスタンスを作成することです。これは新しいプロジェクトまたは SwiftUI を使用したい誰もが推奨するアプローチです。

または、UIKit を使用しているか、MapLibre/MapBox SDK を使用している既存のコードがある場合は、AmplifyMapLibre.createMap(completionHandler:)を呼び出して、Amazon Location Service と Amplify で使用するために事前に配線されたMGLMapViewのインスタンスを作成できます。MGLMapViewを直接使用する方法の詳細については、MapLibre ドキュメントを参照してください

import SwiftUI
import AmplifyMapLibreUI

struct ContentView: View {    
    var body: some View {
        AMLMapView()
            .edgesIgnoringSafeArea(.all)
    }
}

import AmplifyMapLibreAdapter
import Mapbox
import Amplify

var mapView: MGLMapView?
do {
    mapView = try await AmplifyMapLibre.createMap()
} catch {
    print(error)
}

マップをカスタマイズして状態にアクセスする

AMLMapViewは、複数のビュー修飾子を通じてカスタマイズできます。マップ状態情報はAMLMapViewStateのインスタンスを通じて設定および監視でき、オプションでAMLMapViewに渡して初期値を設定できます。次の例では、マップの初期ズームレベルと中心位置を設定し、ユーザーの位置を表示するようにマップを構成しています。

@StateObject private var mapState = AMLMapViewState(
    zoomLevel: 8,
    center: CLLocationCoordinate2D(latitude: 39.7392, longitude: -104.9903)
)

var body: some View {
    AMLMapView(mapState: mapState)
        .showUserLocation(true)
        .edgesIgnoringSafeArea(.all)
}

カスタム動作を挿入する

AMLMapViewでは、ユーザーインタラクションによってトリガーされるカスタム動作を挿入することもできます。次の例では、カスタム機能イメージを設定し、その機能がタップされたときのマップの動作を定義します。現在のレベルから 2 レベル上にズームします。

var body: some View {
    AMLMapView()
        .featureImage { MyCustomImage() }
        .featureTapped { mapView, pointFeature in
            mapView.setCenter(
                pointFeature.coordinate,
                zoomLevel: mapView.zoomLevel + 2,
                direction: mapView.camera.heading,
                animated: true
            )
        }
        .edgesIgnoringSafeArea(.all)
}

AMLMapCompositeView

AMLMapCompositeViewは、AMLMapView、AMLSearchBar、AMLMapControlView、およびAMLPlaceCellViewを組み合わせて、完全なユーザーエクスペリエンスを作成します。これには、アクセス可能なマップコントロールボタン、ユーザー入力に基づいて関心のあるポイントを自動的に検索する検索バー、およびポイントのリスト表現が含まれます。 最も単純な形式では、上記の機能すべてを引き続き活用しながら、AMLMapCompositeViewは引数なしでインスタンス化できます。AMLMapViewのすべてのビュー修飾子と状態追跡機能もAMLMapCompositeViewで利用可能です。

var body: some View {
    AMLMapCompositeView()
}

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

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

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

var maps = [Geo.MapStyle]()
do {
    maps = try await Amplify.Geo.availableMaps()
} catch let error as Geo.Error {
    print("Failed to get available maps: \(error)")
} catch {
    print("Unexpected error: \(error)")
}

createMap 関数に渡すことで、別のスタイルマップを読み込むことができます。

guard let mapStyle = maps.first else {
    print("No maps available")
    return
}

let mapView = AmplifyMapLibre.createMap(mapStyle)