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

Mapboxは、カスタムでインタラクティブで魅力的な地図を構築するための、より高速で簡単な方法をリリースしました。この新しいシステムは、POI、ラベル、建物とのインタラクションを設定するために必要なコードを大幅に削減し、開発作業を軽減し、コードベースをより読みやすく、バグが発生しにくくします。また、Mapbox Standardのベースマップフィーチャとのインタラクションを構築するまったく新しい機能も導入されています。この新しいインタラクション構築システムは、すでにPolarstepsがパーソナライズされた旅程と旅行プランを提供するのに役立っています。

例：Polarstepsは、地図上で単なる観光地以上のものを提供します

Polarstepsは、旅行の計画と追跡アプリで、人気のある観光スポットのアイコンにインタラクションを組み込んでいます。

“旅行の計画には、単なる地図以上のものが含まれます”と、PolarstepsのCEOであるClare Jones氏は述べています。“計画自体にはさまざまな段階があります。地図が主役となる最初の旅程作成から、訪問スポットや他のユーザーからのレビューなど、より多くの情報を確認することが重要な後の段階まであります。Polarstepsの旅行プランナーは、さまざまな方法で当社の地図を操作しており、インタラクションを簡素化した新しい方法により、必要なものをより多く提供できるようになりました。パーソナライズされた旅程と旅行プランは、冒険家にとって優れたUXの重要な要素であり、地図のインタラクティブ性は、それを提供するのに役立ちます。”

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

以前のバージョンのMapbox SDKでは、Mapbox Standard 3Dスタイルのベースマップフィーチャを操作することはできませんでした。現在は可能です。ラベルやPOIとのインタラクションを構築することが推奨されますが、この機能は、Standardの3D建物とのインタラクションを構築する際に、特に強力でユニークになります。宅配ドライバーは、近づくとナビゲーションアプリで配達先の建物が強調表示されるため、正しい場所に到着できます。リテールロイヤリティのメンバーは、建物の近くにいるときに、パーソナライズされたオファーとともにリテールロケーションが強調表示されるのを見ることができます。

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

インタラクションを使用して、クリックまたはホバー時に選択した建物やアイコンを強調表示し、より多くの物件情報をポップアップで表示します。住宅購入者は、サイドバーにリストされたタイルをクリックする代わりに、希望するエリアの地図上で物件を直接、より迅速かつ効果的に閲覧し、物件情報ページをクリックすることができます。

新しいアプローチで時間とリソースを節約

以前の地図インタラクションのアプローチは、クリック、タップ、マウスホバーなどのユーザー操作を処理し、次に操作の画面座標をクエリ関数に渡して、その場所にフィーチャが存在するかどうかを確認するという、2 段階のプロセスでした。

mapView.gestures.onMapTap.observe { [weak self] context in
    let options = RenderedQueryOptions(
        layerIds: [ /** list layers here */ ],
        filter: nil
    )

    mapView.mapboxMap.queryRenderedFeatures(with: context.point, options) { result in
        switch result {
        case .success(let features):
            if let feature = features.first?.queriedFeature.feature {
                print("feature: \(feature.identifier) tapped at: \(context.point)")
            }
        case .failure(let error):
            // handle error
            print("Error querying features: \(error)")
        }
    }
}.store(in: &cancelables)

新しいInteractions APIを使用すると、addInteraction()への1回の呼び出しで、ジェスチャのタイプ、フィーチャをチェックするマップレイヤー、およびフィーチャデータを処理してインタラクション後にフォローオンコードを実行するハンドラー関数を指定します。

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

重複するフィーチャに対して複数のインタラクションが存在する場合、最上位のフィーチャが最初にインタラクションを処理し、下位のフィーチャへの伝播を停止するように構成できます。  

Mapbox Studioでのスタイルのインタラクションとフィーチャの状態

Mapbox Studioには、インポートされたスタイルからの個々のレイヤーおよびフィーチャーセットに対して、地図のインタラクションを設定するツールが含まれています。開発者は、Mapbox StudioのスタイリングGUIを使用して、ホバー、クリック、ダブルクリックなどのインタラクションによってトリガーされる代替スタイルを設計できます。各状態のデザインがニーズを満たしたら、iOS、Android、Webのコードスニペットを生成およびエクスポートして、インタラクションをアプリに追加できます。

新しいinteractions APIで構築を開始しましょう

地図インタラクションを構築するための簡素化された方法は、Mapbox GL JS v.3.11およびMobile Maps SDKs v.11.11で一般的に利用可能です。iOS、Android、およびWebでの開始方法に関するドキュメントと例は、Mapboxドキュメントサイトにあります。MapboxアカウントにサインアップしてSDKの使用を開始するには、こちらをクリックしてください。