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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/6288880a-3e52-44cc-9cc9-1399f150c38c.png)
（会社からディズニーに飛び出したい、、そんな気持ちで触りました。どうぞよろしくお願いいたします。）

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

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

## マップコントロールの挿入
リボンの[挿入]>[メディア]の中に[マップ]コントロールが表示されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/38624df0-2603-c6c8-d029-55f21a5fbb88.png" width=50%>

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

[alt]キーを押しながらマップ内の[-]を連打して、表示範囲を広げてみます。
（右上のアプリのプレビュー[▷]での操作もおすすめ！）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/7a988b08-3669-52be-67e5-2ebe1d216c9f.png)
一番上の方位磁石マークは、カーソルを当てると地図の向きを回転できる⤴ボタンが表示されます。
北南に合わせたい場合は方位磁石マークを押すことでリセットします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/dbee4788-a6db-034b-ec8b-96b2d9aa93aa.png)

一番下の台形マークは地図を置く側に倒すことができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/e16ccd23-0656-6cac-773f-01b6fa3a1999.png)

これらのコントロールを非表示にしたい場合は、右のプロパティペインでそれぞれ非表示にすることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/ceac1f33-860f-7d28-6b09-35ddced766fe.png)


## デザイン
地図全体のデザインを変えたい場合は「MapStyle/地図スタイル」プロパティを設定します。
選択肢は以下のようになっています。
- Road
- Night
- Road shaded relief
- Satellite, Satellite road labels
- High contrast light
- High contrast dark
- Grayscale light
- Grayscale dark
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/9826fef4-055c-e43d-bea5-d7e5afb41729.png)


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/f9455858-c63c-054c-61f8-390ebe139fbf.png)

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

緯度（CurrentLocationLatitude）のほうには、数式バーで以下のコードを入力します。
```
Location.Latitude
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/48bfcc5b-ed6f-e385-d60c-797b658d71c5.png)

経度（CurrentLocationLongitude）のほうには、数式バーで以下のコードを入力します。
```
Location.Longitude
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/bcb6a2cf-1b29-1257-513c-03a62da9633c.png)


## 既定の表示場所を指定
既定だと変なところが表示されてしまう為、ここも設定します。
「DefaultLocation/規定の場所を使用」プロパティを「true/オン」に設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/21a5c51f-e270-719c-42a5-e05f1bd24cdb.png)

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

緯度（DefaultLatitude）のほうには、数式バーで以下のコードを入力します。
```
Location.Latitude
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/a6b12c84-1af3-516a-73e8-c16bd76c5ad5.png)


経度（DefaultLongitude）のほうには、数式バーで以下のコードを入力します。
```
Location.Longitude
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/139c8bc2-348b-3d74-e3cb-1434b3bdfd74.png)

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

ズーム範囲は「DefaultZoomLevel/規定のズームレベル」プロパティで設定可能です。
 0~22の間で指定でき、数字が小さいほどズームレベルが小さくなり、表示範囲が広がります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/28e3fd73-072c-8219-29f2-4b1d80853723.png)


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/db81bb32-5ba4-3940-76c7-701452646d96.png)

該当の設定プロパティは、以下画像の赤枠部分になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/8cf4a56f-eba0-47d3-fc99-b9e7bccc3d2d.png)


https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/geospatial-map-draw-shapes


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

::: note
１つのマップコントロールでは緯度・経度から最大 5000 ピン、および住所から最大 50 ピンを表示できます
住所に関しては、住所情報から地理座標(緯度/経度)にジオコーディングする必要があるため、ピン数制限は低くなっています。
:::
### テーブル作成
今回Dataverseのテーブルを使っていきます。
Power Appsを開き、[テーブル]を選択、[空白のテーブルから開始する]をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/b9bac4bf-08a8-2df8-c4d3-1eaa635c6b97.png)
「新しいテーブル」という名前の右横の[✏]マークをクリックし、テーブルの名前を編集します。
(高度なオプションを開いてスキーマ名（必須）も忘れずつけてください)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/1a370491-8874-9460-f894-bf212e6539bf.png)

[新しい列]という名前の一列目をクリックし、[列の編集]を選択し編集します。
場所の名前を保存する列を設定します。（場所の名前は必須ではないです。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/a9ae654b-b94b-42be-6765-91ea84e361eb.png)

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

(※)「住所だけ」の時、環境の設定が必要になります。
[高度設定](#高度設定)参照
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/c1426d15-e2f9-ab91-07b0-8f69d499329c.png)

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/96f9c647-6a82-7d89-5459-6c76085510f7.png" width=70%>


【オプション】ピンの色とアイコンを指定する列を作成します。（必須ではないです。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/6da7f547-f5df-953f-a517-524fe55bec60.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/850125e7-69f1-dafb-59a9-86def70dedf5.png)

項目の作成が終わったら、[作成]ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/600f9808-1e34-6f34-49ea-173a9551121e.png)

作成完了したら[編集]ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/2f3f3d34-a573-a50b-01f3-8db0cef59b31.png)

テーブルに複数データを入れたら準備完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/bd08254f-cf32-eb21-d00a-667386fdb62e.png)

::: note

**色**の指定方法については以下を参照ください。
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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/a9d75e85-057c-648c-0310-db8c561d0635.png)
もう一度ドロップダウンをクリックし、検索バーで作成したテーブル名で検索し、該当のテーブルを選択します。
作成したテーブルが表示されない場合は、アプリを保存したうえで、編集画面を閉じ、もう一度アプリ編集画面を開きなおすなどしてみて下さい。（それでも表示されない場合は、テーブルを直接確認）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/7b2108e0-7385-cf39-651b-126c955f002c.png)


プロパティペインにおいて、[詳細]タブをクリックし、ItemLabelsの項目を探します。
先ほど作成したテーブルの「名前」列のスキーマ名を選択します。（名前は必須ではない）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/d5a327bb-770a-5d24-cb4f-6dde5abe067c.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/0b7e3021-15dd-849e-c5ed-01fa71380dc1.png)


ピンをクリックしたり、カーソルを合わせた時に場所の情報を表示させたい場合は「情報カードの表示」プロパティを「On click」（クリックしたとき）「On hover」（カーソルを合わせた時）に設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/a9f8c05d-3b9f-37c7-bd44-7ed45d9004a6.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/d9db5e85-9fc0-49a2-3fed-3b9cd8a26648.png)

項目名の横の[...]をクリックし削除したりできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/c60ead57-eb9c-4939-0e74-52860fb80191.png)

すると、設定した情報が設定した動きで表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/2240c275-0ab0-bd09-8e3d-70575eedfee9.png)



# 高度設定
マップコントロールは、規定では使用できる機能が制限された状態で実行されます。 
前のセクションの「簡易設定」ではその制限範囲でできることを設定しています。
Power Platform 管理センターで完全なサポートをオンにすることによって 追加のマップ制御機能や住所入力コントロールのサポートを有効にすることができます。
具体例）以下を設定したい場合
- [住所情報からピン表示](#住所情報からピン表示)
- [マップルーティング](#マップルーティング)
（ピンとピンの間のルートを表示する機能）
- 住所入力コントロール
https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/geospatial-component-input-address


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

[環境]タブで、アプリを使用する環境を選択してから、[設定]を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/09ba6b67-6e67-6a22-5a4a-7e3dd1df64b6.png)

[製品]を展開し、[機能]を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/3ecb5ee8-9141-d4dd-3964-df9132f090c5.png)

[地図と住所のサービス]で、[完全]トグルをオンにします。 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/10df8db9-81f2-8308-118d-55856f264346.png)

サービス利用条件を読み,[サービス使用条件に同意する]を選択して、[有効化]を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/966a3d5e-25ac-dde4-eb90-711748d3d74c.png)

忘れずに[保存]ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/0ba1ad48-03d2-c2a9-8582-b4783ec50f4d.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/8f6c85a4-b52d-0c97-2d04-d48a1c9f9c98.png)



:::

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/2062ace7-7582-a066-cfb2-973f3a198b01.png)

ItemsLatitudesとItemsLongitudesを空白にしてもピンは表示されました。
これで住所のみでもピン表示ができることを確認しました！
（地理空間機能を有効にする前はエラー表示されます。）
※ うまくいかない方は、アプリの編集画面を開きなおしたり、アクセスしなおしてみてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/ff0931d1-5d54-d026-9c66-bc2bd2404d77.png)


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

右のペインの[プロパティ]タブで「ルートウェイポイント(項目)」のドロップダウンを選択し、ルート表示させたいピン情報を保存してあるテーブルを接続します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/7a200034-81f0-8f3a-41a5-b593a1d4652a.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/67880308-010a-225c-6470-2884740be5c5.png)

[プロパティ]タブで「ルーティングを有効にする」を[オン]にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/15be6614-0b03-a984-7cb5-130df35c58c5.png)

複数ある場合の挙動を見るためにテーブルの３行目にデータを追加します。
（ディズニーでは飽き足らないのでシーパラに行きたいと思います。（仮想で））
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/c0e4b744-c679-7bc7-f7a0-7d85d29681b0.png)

既定では移動時間・距離を減らすために順序を無視したルートを表示してくれますが、もし行の順番を優先したい場合はウェイポイント順序を管理するを[オン]にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/e7e87845-6e52-97cb-5df9-587cf5afce57.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/eb1bb136-5b93-df55-804c-293351d4eb57.png)

[ルートの最適化プロパティ]で時間・距離の最適化をしてくれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/0ec36744-3a09-22c7-490d-ea38478ceb87.png)


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