地図

マップのセットアップ

Avonni Mapコンポーネントを始めるには、まずマップの種類を選択し、データの表示方法を設定する必要があります。

位置データの接続

The データソース は、ピンの一覧（または マーカー）をAvonni Mapに提供します。Account、Contact、カスタムオブジェクトなどのデータソースから取得した各レコードは、住所または特定の緯度・経度座標などの位置情報が含まれていれば、マップ上にポイントとしてプロットされます。

この位置データを提供するには、「Data Source」プロパティで次のいずれかのオプションを選択してください。

位置データのマッピング

正しい情報を表示するために、SalesforceのフィールドをAvonni Mapの属性に接続してください。たとえば、「Address」フィールドをマップ上の「address」属性にリンクします。

マップタイプの選択

Avonni Mapコンポーネントは、2つの強力なマッピングプロバイダーを提供します： Google Maps 値を参照するフィルターを追加します： Leaflet。選択によりマップの見た目、大規模データセットでのパフォーマンス、利用可能な対話機能が決まります。以下は、ユースケースに最適なオプションを選ぶための内訳です。

Google Maps：シンプルさと馴染みやすさのために

ユーザーフレンドリーで瞬時に認識されるインターフェースが欲しい場合はGoogle Mapsを選んでください。大量のマーカーを表示する必要がない単純なマップに最適です。

• 強み： Street Viewや衛星画像などの馴染みのある組み込み機能を含みます。座標がなくても住所から直接位置をプロットできます。

• 重要な考慮点： Google Mapsは一般的に少数の位置を表示するのに最適で、技術的な制限は マップあたり100件のマーカー です。

Leaflet：大量データと高度な機能のために

高度な機能が必要な場合や大量のマーカーを表示する必要がある場合はLeafletを選択してください。

• 強み： Leafletは高いパフォーマンスを持ち、何百から何千ものマーカーを扱えます。自動的な マーカーのクラスタリング （近接ポイントのグループ化）、対話型の 描画ツール、およびカスタム形状の豊富な GeoJSON サポートを提供します。

• 重要な考慮点： Leafletはプロットしたい各レコードに対して特定の 緯度および経度の座標 が必要です。住所を自動的にマップポイントに変換することはできません。

クイックガイド：どちらを使うべきか？

• 次の場合はGoogle Mapsを使用してください… 表示するマーカーが100未満で、住所を使ったシンプルさを望む場合。

• 次の場合はLeafletを使用してください… 大量のマーカーを表示する必要があり、描画やクラスタリングなどの高度な機能が必要で、かつレコードに緯度/経度データがある場合。

マーカーの外観のカスタマイズ

マップにマーカーを配置するだけでなく、各レコードの視覚的な外観を正確に制御できます。これはMapコンポーネントのプロパティ内の データマッピング セクションで行い、ブランドに合わせた見た目を作成したり、瞬時に特定の情報を伝えたりできます。

マーカーの外観を設定する方法

1. マップコンポーネントを選択 し、プロパティパネルの データマッピング セクションに移動します。ここでデータソースのフィールドをマップの視覚プロパティに接続します。

2. 次に、 タイプ 利用可能なマッピングオプションのリスト内の属性。

方法1：定義済みのマーカー形状を使用

一貫した見た目にするには、 タイプ 属性を静的なテキスト値に設定できます。これによりマップ上のすべてのマーカーがこの形状を使用します。

• 設定： データに応じて タイプ 属性に次のテキスト値のいずれかを設定します：

  • デフォルト：シンプルで標準的なマップマーカー。

  • circle：円形のマーカー。

  • rectangle：長方形のマーカー。

  • polygon：多角形のマーカー。

  • pin：クラシックなピン形のマーカー。

方法2：カスタムアイコンを使用

ブランドや特定の画像を使用するには、マーカーにカスタムSVG画像を使用するようマップを構成できます。通常は タイプ 最小（Min） icon を設定し、別の属性（例えば iconUrl や またはiconName

）をデータソースのフィールドにマッピングして、SVGのURLまたは名前を指定します。

さらなるカスタマイズ タイプ:

• Data Mappingsセクション内で、選択したマーカーの外観を微調整する追加の属性を設定できる場合が多いです。 塗りつぶしの色と不透明度：

• マーカーのメインカラーと透明度を制御します。 ストローク：

• マーカーの境界線（色、太さ、実線や破線などのスタイル）をカスタマイズします。 スケール：

マーカーの全体的なサイズを調整します。

動的スタイリングの力タイプ, これらの外観属性（, 塗りつぶし色や データマッピングスケール など）は内で設定されるため、

• 例: データ駆動型にすることができます。 すべてのマーカーに静的な値を設定する代わりに、これらの属性をデータソースのフィールドにマッピングできます。 例えば、AccountオブジェクトにIndustryフィールドに基づいて色を返す数式フィールドを持たせることができます。 これらの外観属性（ Industry

フィールドに基づいた数式フィールドを持たせ、その数式フィールドにマップの

属性をマッピングすれば、Accountのマーカーは業界ごとに自動的に色分けされ、マップ上で即座に視覚的な洞察を提供します。

マップの設定

Avonni Mapは単なる静的なビューではなく、位置を必要な形で表示するためにカスタマイズできる動的なツールです。これらのカスタマイズオプションを使うことで、フォーカス位置、外観、ユーザーの操作範囲を制御でき、基本的なマップをデータの探索と管理に強力なツールに変えます。 マップの中心設定 マップの初期視点（最初に読み込まれたときに「中心」となる場所）は、プロパティパネルの

Map Center Location

• セクションで設定します。これにより、ユーザーは最も関連性の高い地理領域から始められます。 このセクションでは、中心点を定義するいくつかの方法があります：

• デフォルトの中心： 設定をデフォルトのままにして標準的な世界地図表示を表示し、ユーザーがグローバルな視点からナビゲートできるようにします。複数の異なる地域にマーカーを表示する場合に適しています。 座標で指定： 値を参照するフィルターを追加します： 正確なセンタリングのために、特定の 緯度

• 経度 の値を手動で入力できます。これは目的の焦点点の正確な座標が分かっている場合に理想的です。 住所で指定：Street、City、State、Countryなどの住所コンポーネントフィールドを使用して場所を指定します。マップはこの住所をジオコーディングして中心点を決定します。座標がないが住所データがある場合に便利です。

• リソースで中心を動的に設定： 座標や住所のフィールドのいずれも 変数リソース や他のコンポーネントの属性にバインドできます。これにより、ユーザーの入力やページ上の他のデータに基づいてマップの中心を動的に変更できます（例：選択されたレコードの住所にマップを中心にする）。

また、計算された中心点に目立つピンを配置して初期視点を識別しやすくする Display Center as Marker オプションを有効にすることもできます。

ズームレベル

ズームはマップの開始時の近接度を制御し、ユーザーが最初に見る詳細レベルを設定します。

• 初期ズームレベルの調整：

  • 1（世界表示）から22（建物レベル）までのズームレベルを選択します。

ヘッダー

ヘッダーはマップの上部バーで、名前や操作ツールを提供します。これをカスタマイズすると明確さと制御が向上し、マップが単なる画像ではなく、ラベル付きの操作可能なインターフェースの一部になります。

• マップヘッダーをカスタマイズ：

  • タイトル、キャプション、アイコン、結合の有無、ボタン： ヘッダー要素を構成します。

フィルタリングと検索

これらのツールにより、ユーザーはマップ上のデータを絞り込んだり特定のデータを検索したりして、必要な情報に集中できます。

• フィルタリングオプション： マップデータを絞り込むフィルタメニューを追加します。

• 検索オプション： 特定のフィールドに対する検索機能を有効にします。

リストビュー

リストビューはテキストリストをマップと組み合わせ、クリック可能なサイドバーにすべての場所を表示します。目次のように、ユーザーがパン操作をせずにマーカーを参照したり移動したりできます。

• 場所の一覧を表示または非表示にする：

  • 表示、非表示、または自動（デフォルト）から選択します。

マップの対話

対話により、マップは静的な表示からユーザーが操作できる動的なツールへと変わります。対話を設定することで、ユーザーがマップのマーカーやヘッダーのボタンをクリックしたときに正確に何が起こるかを定義できます。これらの設定はマップコンポーネントのプロパティの インタラクション セクションで見つけることができます。

マーカー選択時

このイベントは、ユーザーがマップ上の特定のマーカーをクリックするたびに発生します。データポイントをインタラクティブにする主要な方法です。

• マーカーデータへのアクセス： 対話設定内で、クリックされたマーカーのデータにアクセスできます。例えば、マーカーに関連付けられたレコードIDを取得するには、通常リソースセレクタを使用して Component Event > marker > value を選択します（マーカーの value がData MappingsセクションでレコードIDにマッピングされていることを前提とします）。

• 一般的なユースケース：

  • レコードへ移動： クリックされたマーカーの完全なレコードページを開くように Maps の対話を構成します。

  • ダイアログやパネルで詳細を開く： 「Open Flow Dialog」、「Open Flow Panel」、または「Open Dynamic Component Dialog/Panel」の対話を使用して、マップを離れることなく選択されたレコードの詳細表示や編集機能を表示します。

  • クイック情報を表示： 短い情報を表示するために Show Toast の対話を使用します。

ヘッダーアクション時（On Header Action）

このイベントは、マップの ヘッダー セクションに追加したカスタムボタンをユーザーがクリックしたときに発生します。これらのアクションは単一のマーカーではなくマップ全体またはデータセットに適用されます。

• 一般的なユースケース：

  • データを更新（Refresh Data）： 「更新」ボタンを追加して、 Refresh Query の対話をトリガーし、最新データでマップのマーカーを再読み込みします。

  • 新規レコードの追加： ユーザーが新しいレコードを作成するための「Open Flow Dialog」を起動するボタンを追加できます。作成後（更新後）そのレコードがマップに表示されます。

  • レポートの表示： 関連するSalesforceのレポートやダッシュボードにユーザーを移動させるための Maps の対話を使用するボタンを追加します。

これらの対話を設定することで、マップは単なる視覚表示から、地理的データをその場で探索、更新、操作するためのインタラクティブなハブへと変わります。