LoginSignup
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@skuramoto(Shiori Kuramoto)inMicrosoft

Power Apps キャンバスアプリでマップコントロールを使う

Last updated at Posted at 2023-10-11

キャンバスアプリのプレミアムコンポーネントである、マップコントロールを使っての基本的な操作をご紹介します。

image.png
（会社からディズニーに飛び出したい、、そんな気持ちで触りました。どうぞよろしくお願いいたします。）

簡易設定

マップコントロールは、規定では使用できる機能が制限された状態で実行されます。
この「簡易設定」ではその制限範囲でできることを設定していきます！

マップ自体の表示、緯度と経度のピン、図形を許可するなどの設定範囲で操作していきましょう。
フル機能使いたい場合は高度設定参照

マップコントロールの挿入

リボンの[挿入]>[メディア]の中に[マップ]コントロールが表示されます。

操作

まずマップコントロールの基本的な操作をご紹介します！
既定だと変な位置が表示されるので、表示範囲少しいじりましょう。

[alt]キーを押しながらマップ内の[-]を連打して、表示範囲を広げてみます。
（右上のアプリのプレビュー[▷]での操作もおすすめ！）
image.png
一番上の方位磁石マークは、カーソルを当てると地図の向きを回転できる⤴ボタンが表示されます。
北南に合わせたい場合は方位磁石マークを押すことでリセットします。

image.png

一番下の台形マークは地図を置く側に倒すことができます。
image.png

これらのコントロールを非表示にしたい場合は、右のプロパティペインでそれぞれ非表示にすることができます。
image.png

デザイン

地図全体のデザインを変えたい場合は「MapStyle/地図スタイル」プロパティを設定します。
選択肢は以下のようになっています。

  • Road
  • Night
  • Road shaded relief
  • Satellite, Satellite road labels
  • High contrast light
  • High contrast dark
  • Grayscale light
  • Grayscale dark
    image.png

現在地取得

現在地を取得する為に、「CurrentLocation/現在の場所を表示する」プロパティを「true/オン」に設定します。

image.png

動作プロパティである「CurrentLocationLatitude/現在の場所の緯度」「CurrentLocationLongitude/現在の場所の経度」を設定してきます。

緯度（CurrentLocationLatitude）のほうには、数式バーで以下のコードを入力します。

Location.Latitude

image.png

経度（CurrentLocationLongitude）のほうには、数式バーで以下のコードを入力します。

Location.Longitude

image.png

既定の表示場所を指定

既定だと変なところが表示されてしまう為、ここも設定します。
「DefaultLocation/規定の場所を使用」プロパティを「true/オン」に設定します。
image.png

動作プロパティである「DefaultLatitude/既定の緯度」「DefaultLongitude/既定の経度」を設定してきます。

緯度（DefaultLatitude）のほうには、数式バーで以下のコードを入力します。

Location.Latitude

image.png

経度（DefaultLongitude）のほうには、数式バーで以下のコードを入力します。

Location.Longitude

image.png

すると現在地にフォーカスして表示させることができました。

ズーム範囲は「DefaultZoomLevel/規定のズームレベル」プロパティで設定可能です。
0~22の間で指定でき、数字が小さいほどズームレベルが小さくなり、表示範囲が広がります。
image.png

図形描画設定

マップ上に図形（固定）を書くことができるような設定もできます。
図形にはラベルを付けることができますので、特定の領域または関心領域を強調表示することもできます。

image.png

該当の設定プロパティは、以下画像の赤枠部分になります。
image.png

ピン止め設定

マップ上にピンを表示させるにはマップコントロールにデータソースを追加し、テーブルに保存してある地理座標や住所から表示させる方法があります。

１つのマップコントロールでは緯度・経度から最大 5000 ピン、および住所から最大 50 ピンを表示できます
住所に関しては、住所情報から地理座標(緯度/経度)にジオコーディングする必要があるため、ピン数制限は低くなっています。

テーブル作成

今回Dataverseのテーブルを使っていきます。
Power Appsを開き、[テーブル]を選択、[空白のテーブルから開始する]をクリック
image.png
「新しいテーブル」という名前の右横の[✏]マークをクリックし、テーブルの名前を編集します。
(高度なオプションを開いてスキーマ名（必須）も忘れずつけてください)
image.png

[新しい列]という名前の一列目をクリックし、[列の編集]を選択し編集します。
場所の名前を保存する列を設定します。（場所の名前は必須ではないです。）
image.png

緯度、経度、住所を保存する列も作成していきます。
[＋]をクリックして列の設定を作っていきます。（すべてテキスト列で大丈夫です。）
緯度、経度、住所（「緯度・経度だけ」、もしくは「住所だけ(※)」でもＯＫ）

(※)「住所だけ」の時、環境の設定が必要になります。
高度設定参照
image.png

【オプション】ピンの色とアイコンを指定する列を作成します。（必須ではないです。）
image.png
image.png

項目の作成が終わったら、[作成]ボタンをクリックします。
image.png

作成完了したら[編集]ボタンをクリックします。
image.png

テーブルに複数データを入れたら準備完了です。
image.png

色の指定方法については以下を参照ください。
https://learn.microsoft.com/ja-jp/power-platform/power-fx/reference/function-colors

アイコンの指定種類については以下を参照ください。
既定はmarkerです。
https://learn.microsoft.com/en-us/azure/azure-maps/how-to-use-image-templates-web-sdk#list-of-image-templates

データ接続してピン表示

アプリの編集画面を表示し、マップを選択した状態で右のプロパティペインで[場所(項目)]の横のドロップダウンをクリックします。
Dataverseの場合、[テーブル]の右横の[...]をクリックし、[最新の情報に更新]をクリックします。

image.png
もう一度ドロップダウンをクリックし、検索バーで作成したテーブル名で検索し、該当のテーブルを選択します。
作成したテーブルが表示されない場合は、アプリを保存したうえで、編集画面を閉じ、もう一度アプリ編集画面を開きなおすなどしてみて下さい。（それでも表示されない場合は、テーブルを直接確認）
image.png

プロパティペインにおいて、[詳細]タブをクリックし、ItemLabelsの項目を探します。
先ほど作成したテーブルの「名前」列のスキーマ名を選択します。（名前は必須ではない）
image.png

同様に、以下のプロパティにテーブルのそれぞれの項目を割り当てます。
ItemsLatitudes：「緯度」列のスキーマ名
ItemsLongitudes：「経度」列のスキーマ名
ItemsAddresses：「住所」列のスキーマ名
(オプション)ItemsColors：「色」列のスキーマ名
(オプション) ItemsIcons：「アイコン」列のスキーマ名

設定完了するとテーブルに保存されたデータがマップにピン表示されました。
色やアイコンは変えることができます。

image.png

ピンをクリックしたり、カーソルを合わせた時に場所の情報を表示させたい場合は「情報カードの表示」プロパティを「On click」（クリックしたとき）「On hover」（カーソルを合わせた時）に設定します。
image.png

表示させる情報を編集するときは[フィールド]の[編集]をクリックし、[フィールドの追加]から項目を追加したり、、、

image.png

項目名の横の[...]をクリックし削除したりできます。
image.png

すると、設定した情報が設定した動きで表示されます。
image.png

高度設定

マップコントロールは、規定では使用できる機能が制限された状態で実行されます。
前のセクションの「簡易設定」ではその制限範囲でできることを設定しています。
Power Platform 管理センターで完全なサポートをオンにすることによって 追加のマップ制御機能や住所入力コントロールのサポートを有効にすることができます。
具体例）以下を設定したい場合

環境の地理空間機能を有効にする

管理者ロール(環境のシステム管理者、システムカスタマイザー、Power Platform管理者)を持っているユーザーでPower Platform管理センター(https://aka.ms/ppac )へアクセスします。

[環境]タブで、アプリを使用する環境を選択してから、[設定]を選択します。
image.png

[製品]を展開し、[機能]を選択します。
image.png

[地図と住所のサービス]で、[完全]トグルをオンにします。
image.png

サービス利用条件を読み,[サービス使用条件に同意する]を選択して、[有効化]を選択します。
image.png

忘れずに[保存]ボタンをクリックします。
image.png

地理空間制御は、Spatial Servicesコネクタを使用し、マップタイルをフェッチし、ジオコードのアドレスを検索します。
DLPポリシーでSpatial Servicesコネクタに適用される設定とコントロールに影響を与えるポリシーが競合しないよう注意して下さい。

image.png

これで晴れて、マップコントロールのフル機能が使用できます！

住所情報からピン表示

先ほどのアプリを開きなおし、マップコントロールで設定したItemsLatitudesとItemsLongitudesの緯度・経度列との接続を削除してみます。

image.png

ItemsLatitudesとItemsLongitudesを空白にしてもピンは表示されました。
これで住所のみでもピン表示ができることを確認しました！
（地理空間機能を有効にする前はエラー表示されます。）
※ うまくいかない方は、アプリの編集画面を開きなおしたり、アクセスしなおしてみてください。
image.png

マップルーティング

ここから、ピン間のルートを表示する方法についてご紹介します。

右のペインの[プロパティ]タブで「ルートウェイポイント(項目)」のドロップダウンを選択し、ルート表示させたいピン情報を保存してあるテーブルを接続します。
image.png

[詳細]タブを開き、以下の項目にテーブルの該当する列を設定します。
RouteWaypointsLabels:「名前」列のスキーマ名
RouteWaypointsLatitudes:「緯度」列のスキーマ名
RouteWaypointsLongitudes:「経度」列のスキーマ名
RouteWaypointsAddresses:「住所」列のスキーマ名

するとマップ上に1,2とフラグが立ちます。
テーブルに保存されているデータの１行目から順に番号が付けられます。

image.png

[プロパティ]タブで「ルーティングを有効にする」を[オン]にします。
image.png

複数ある場合の挙動を見るためにテーブルの３行目にデータを追加します。
（ディズニーでは飽き足らないのでシーパラに行きたいと思います。（仮想で））
image.png

既定では移動時間・距離を減らすために順序を無視したルートを表示してくれますが、もし行の順番を優先したい場合はウェイポイント順序を管理するを[オン]にします。
image.png

image.png

[ルートの最適化プロパティ]で時間・距離の最適化をしてくれます。
image.png

まとめ

今回はマップコントロールの使い方についてまとめました。
マップの機能を使用したアプリで、よりいろんな実務の中で有効にPower Appsをご活用いただければと思います！
いいPower Appsライフを～！

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?