Power Appsキャンバスアプリで移動ルートを表示する方法

こんにちは。今回はアプリで現在地を取得し、移動したルートを取得する方法をご説明します。

こちらではマップコントロールを使います。

https://qiita.com/skuramoto/items/80fde7e379f1e55f238b



# 環境の設定
まず、マップコントロールでルーティング（地点と地点をつなぐ表示）をする場合は環境の地理空間機能を有効にする必要があります。

環境の地理空間機能を有効にする設定は[こちら](https://qiita.com/skuramoto/items/80fde7e379f1e55f238b#%E7%92%B0%E5%A2%83%E3%81%AE%E5%9C%B0%E7%90%86%E7%A9%BA%E9%96%93%E6%A9%9F%E8%83%BD%E3%82%92%E6%9C%89%E5%8A%B9%E3%81%AB%E3%81%99%E3%82%8B)を参考にして下さい。


# アプリ側での設定
記録開始ボタンを押してから記録終了ボタンを押すまでの間で2秒ごとに現在地を取得し、ルートを表示するように作っていきます。

まずボタンの設定をしていきます。

## ボタンコントロールの設定
2つボタンを作成します。
記録開始ボタンの「Onstart」プロパティに以下の関数を設定します。ボタンを押したときにコンテキスト変数「recordstart」を「true」に設定し、この「recordstart」を基準にして、現在地取得をしていきます。

```
UpdateContext({
    recordstart:true
})
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/cb001490-5e75-457b-da04-084a36713235.png)

記録終了ボタンボタンの「Onstart」プロパティに以下の関数を設定します。コンテキスト変数「recordstart」を「false」に設定します。
```
UpdateContext({recordstart:false})
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/b7848571-fc3f-75c6-4200-0eb892e9f6b9.png)


## タイマーコントロールの設定
次に時間ごとに現在地取得の処理を行うためにタイマーコントロールを設定していきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/0ea73a1f-9333-0b71-f65c-d4dcb441bed3.png)



処理を繰り返すためにタイマーコントロールの「Repeat」プロパティに「true」を入れます。
```
true
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/bd0afe4b-60cb-dc0a-c7dc-9c5d23d38845.png)

2秒ごとに処理を行いたい為、タイマーコントロールの「Duration」プロパティに「2000」を入力します。

```
2000
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/6efcb1d0-df95-ffa3-0efc-7069728db4d0.png)

「recordstart」が「true」の間に設定した時間(２秒)が過ぎたら、現在地の情報を取得し、コレクションMyCol2にデータをためます。
タイマーコントロールの「OnTimeEnd」プロパティに以下の関数を入れます。

```
If(recordstart,Collect(MyCol2,{緯度:Location.Latitude, 経度:Location.Longitude}))
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/95846988-a775-d4f5-63ef-07d973107d2c.png)

タイマーコントロールの「Start」プロパティに変数の「recordstart」を入れます。
「recordstart」が「true」になったらスタートします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/8b05d3f0-98b1-d086-10d7-a672621460ae.png)

画面が表示されるタイミングでは「recordstart」を「false」にしたいのでScreenの「Onvisible」プロパティに以下の関数を設定します。
```
UpdateContext({
    recordstart:false
})
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/2ce1e099-0a56-f518-e00a-77bf0921121f.png)

## マップコントロールの設定
ルートを表示するマップコントロールを入れます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/7fd16e5b-6c06-ed3b-381c-a7c9e7add70f.png" width=60%>

マップコントロールの「RouteWaypoints_Items」にコレクションMyCol2を入力します。
```
MyCol2
```
RouteWaypointsLatitudesに「"緯度"」を入力します。
```
"緯度"
```
RouteWaypointsLongitudes「"経度"」を入力します。
```
"経度"
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/10fc7458-729e-972f-725a-7f77e60ea087.png)


## コレクションにためたルート情報を削除
コレクションにためたルート情報を削除するためのリセットボタンを作成します。
```
Clear(MyCol2);
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/6c0d63a8-e5ab-0e0c-2f97-d38fae728356.png)

## データを確認するためのギャラリー
コレクションのデータを確認するためのギャラリーを設定します。
データソースに「MyCol2」を設定し、フィールドの設定をします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/228b8a8b-e546-2d2a-fc31-7ff5b0cd118a.png)


# スマホで動作確認
スマホで開いて、動きを確認します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/5ac90cf8-c55b-405d-2ea2-52f7700d784d.png" width=70%>

記録開始ボタンを押してから記録終了ボタンを押すまでのルートを取得できました!

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/85117e45-29f6-605c-774c-4b41c363f826.png" width=70%>