Mapboxは、より高速かつ簡単にマップ上のインタラクションを構築できる新システムをリリースしました。POI（地点情報）、ラベル、建物とのインタラクション設定に必要なコード量を大幅に削減し、開発工数を抑えつつ、読みやすく保守性の高いコードを実現。さらに、 Mapbox Standardのベースマップ要素にもインタラクションが可能になるという全く新しい機能も登場しました。

この新システムはすでに、旅行アプリ『Polarsteps』 において、ユーザーのためのパーソナライズされた旅程・旅行計画機能に活用されています。

‍

導入事例：Polarstepsが実現する、ただの観光マップに留まらない体験

旅行の計画は、単に地図を見るだけではありません。

Polarstepsでは、ユーザーが旅行を計画する各ステージで、マップと深くインタラクトできるよう、アイコンにインタラクションを追加しました。

‍

「旅行の計画には、マップ以上の要素が必要です」と語るのは、Polarsteps CEOのClare Jones氏。「最初の旅程作成から、他ユーザーのレビューなど詳細情報を見ながら最終調整する段階まで、旅行者はマップと多様に関わります。今回の新しいインタラクション構築方法は、そうしたニーズに応える上で非常に役立っています。パーソナライズされた旅程は、冒険者たちにとって最高のUXの一部です。そして、マップのインタラクティブ性がそれを支えています。」

不動産検索をもっと直感的に

たとえば不動産アプリでは、インタラクションによって地図上の建物やアイコンをクリックやホバーでハイライト表示し、物件情報のポップアップを表示できます。

従来のようにサイドバーの物件リストからクリックするのではなく、地図上で直感的に気になる建物を選び、すぐに詳細へ遷移できるようになります。

‍

‍

開発の負担を減らす、新しいアプローチ

従来のインタラクション設定は、ユーザーのジェスチャー（タップ、クリック、ホバー）を検出し、その座標を使って対象のフィーチャーを照会するという2段階の処理が必要でした。

swift

コピーする編集する

mapView.gestures.onMapTap.observe { [weak self] context in

   let options = RenderedQueryOptions(layerIds: [/** list layers here */], filter: nil)

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

       switch result {

           case .success(let features):

               // dispatch tapped features to consumers.

           case .failure(let error):

               // handle 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 Standardでもベースマップとのインタラクションが可能に

これまでのSDKでは、Mapbox Standard 3D styleに含まれるベースマップの建物や地物にインタラクションを追加することはできませんでした。しかし今では、それが可能です。

たとえば：

• 配送ドライバー：配達先の建物が地図上でハイライト表示され、迷わず到着
• 小売のRoyalty 会員アプリ：店舗近づくとハイライト表示され、パーソナルオファーを提示
  

Mapbox Studioでインタラクションのスタイルを設定可能に

新しいMapbox Studioでは、インポートしたスタイルやレイヤーに対してインタラクション状態ごとのスタイル設定（通常／ホバー／クリックなど）が可能になりました。GUI上でデザインを確認しながら、iOS/Android/Web用のコードスニペットをそのまま生成できます。

‍

今すぐ新しいインタラクションAPIで開発を始めましょう

この新しいマップインタラクションの構築方法は、Mapbox GL JS  v3.11およびMobile Maps SDKs v11.11で一般利用可能です。

• iOS / Android / Web向けのドキュメント・コード例は Mapbox公式ドキュメント をご覧ください。
• 今すぐ無料でMapboxアカウントを作成し、SDKの利用を始めませんか？

＊本記事は、Mapbox Inc. Blogの翻訳記事です。

‍