マップインタラクションを構築するための新しい簡素化されたシステム

Mapbox GL JS for web v.3.8およびMobile Maps SDKs v.11.8で、マップインタラクションを構築するための合理化された、より効率的な方法が、実験的なAPIとして利用できるようになりました。新しいAPIを使用すると、開発者は、プラットフォーム全体で統一されたシステムを使用して、ベースマップおよびカスタムマップフィーチャとのインタラクションを定義できます。新しいシステムにより、既存のAPIのすべての機能を保持しながら、インタラクションの定義に必要なコードの量が大幅に削減されます。 

統一されたアプローチにより、時間とリソースを節約できます

以前は、開発者はジェスチャイベントをリッスンしてディスパッチし、マップからレンダリングされたフィーチャをクエリし、それに応じてフィーチャの状態を更新するコードを記述して、マップのインタラクションを手動で定義する必要がありました。現在、インタラクションは新しいInteractions APIを使用して簡単に実現できます。

以前のアプローチでは、単純なインタラクションを定義するコードは次のようになっていた可能性があります。

mapView.gestures.onMapTap.observe { [weak self] context in
    let options = RenderedQueryOptions(
        layerIds: [ /** list layers here */ ],
        filter: nil
    )
    
    mapView.mapboxMap.queryRenderedFeatures(with: context.point, options: options) { result in
        switch result {
        case .success(let features):
            // dispatch tapped features to consumers
            break
        case .failure(let error):
            // handle error
            break
        }
    }
}.store(in: &cancelables)

新しいAPIを使用すると、開発者はインタラクションを追加するだけで済みます。

mapboxMap.addInteractions(
    TapInteraction(.layer("custom-layer")) { feature, context in
        print("feature: \(feature.id) tapped at: \(context.point)")
        return true
    }
)

新しいシステムでは、アノテーション（PointAnnotationなど）とレイヤーを組み合わせて、インタラクションのレンダリング順序を維持しながら、地図上にデータを表示することもできます。最上位のフィーチャ（アノテーションまたはレイヤー）が最初にタップを処理し、処理する場合は、基になるフィーチャは無視されます。ベースマップでのタップを個別に管理することもできます。

これを実装するには、アノテーションのレイヤー識別子を指定するなど、多大な労力が必要でした。

/// 古いアプローチ
let options = RenderedQueryOptions(
    layerIds: [
        "custom-layer-1",
        /* ここにアノテーションレイヤーをリストします */
    ],
    filter: nil
)

mapView.mapboxMap.queryRenderedFeatures(with: context.point, options)

新しいinteractions APIを使用すると、すぐに使用できます。コードは必要ありません。

ベースマップインタラクションがMapbox Standardで利用可能になりました

この機能が導入されるまで、ベースマップのフィーチャとのインタラクションは不可能でした。 Mapbox Standard 3Dスタイル。の導入により、 Featuresets API、 それが可能になりました。新しい機能を試すには、以下を使用してください。 standard-experimental-ime エンドポイント

新しいFeaturesetsにより、開発者は、当初非表示になっていたMapbox Standardのインポート済みスタイルから選択された機能にアクセスできます。これにより、ベースマップのフィーチャとのインタラクションを定義できます。さらに、Featuresetsを使用すると、開発者はベーススタイルで独自のフィーチャを定義し、それらを他のスタイルにインポートして、スタイル全体のフィーチャを柔軟に制御できます。

例：不動産検索エクスペリエンスの向上

インタラクションを使用して、選択した建物やアイコンを強調表示し、リストに効果的に焦点を当て、アプリケーションをよりダイナミックな印象にします。これにより、特に低いズームレベルで、周囲の状況との関係におけるリストの理解を深めることもできます。不動産会社は、ユーザーがクリックしたときに、より多くの物件情報をポップアップで表示できます。これは、地図上で多くの物件を直接すばやく閲覧するのに役立ちます。

例：ナビゲーションをより簡単で直感的にする

インタラクティブな地図機能により、ドライバーはPOI、交通機関のラベル、または空港をクリックして目的地を設定し、ナビゲーションを開始できます。運転中に、例えばEV充電ステーションなど、新しい場所をタップしてルートを変更できます。到着時には、建物や入り口をハイライトして、最終目的地をさらに特定できます。

Mapbox Studioでのスタイルのインタラクション

Mapbox Studioは、ベースマップおよびカスタムマップ要素のインタラクティビティの追加をサポートするようになりました。カスタムレイヤーを追加する際に、新しい[インタラクションを追加]ボタンをクリックすると、ホバー、クリック、ダブルクリックなどのさまざまなインタラクションに合わせてレイヤーをスタイル設定できます。スタイル設定が完了したら、JavaScript、Kotlin、Javaでコードスニペットを簡単にコピーできます。iOSのサポートも近日中に開始予定です。

StudioのStandard Styleを使用すると、ベースマップ上の場所ラベルのインタラクティビティを追加することもできます。建物のインタラクションの構成のサポートは、2025年初頭に提供される予定です。

結論

インタラクティブな地図機能を構築するために必要なAPIの命名規則とコード構文を理解するには、上記の例とiOSの実装ドキュメントをご覧ください。AndroidおよびWeb向けのより包括的なドキュメントは、11月初旬にMobile SDKs 11.8.0およびGL JS 3.8.0とともにリリースされる予定です。フィードバックやご質問は、Mapboxの担当者またはアカウントマネージャーまでご連絡ください。