【Bing Maps】PowerAppsで地図を使う方法

7284 ワード
MicrosoftPowerPlatform bingmaps PowerApps bingmaps テキストリンク

概要

前半では PowerApps を利用してスクリーン上に地図を表示するアプリを作成します。
後半は その表示された 地図 を Flow を利用して OneDrive にアップロードする機能を作ります。今回は Bing Maps を利用していますが、 Google Map でも可能です。

アプリの作成

Bing Maps APIの取得

こちらから API Key を取得します。

スクリーンの作成

まずは最終的な完成イメージを確認しましょう。

上記のようにコントロールをスクリーンに対して挿入していきます。

ポイント

ここでポイントになるのが AppsMain ❔というコントロールだと思います。
「こんなの挿入に存在しない」
と思った方は正解です。こちらはスクロールが可能な領域を表しているのですが、通常の作り方では、作成できません。
ですので、新たに スクリーンを「スクロール可能」で作成し、そのコントロールをコピー＆ペーストする形になります。（早くコントルールに追加してほしい）
今回はスクロールが発生するアプリではないのでこちらを使はなくても特に問題ありません。

Image1

こちらに地図を表示するわけですが、表示はいたって簡単です。
Image プロパティに以下を追加します。

Concatenate(
    "https://dev.virtualearth.net/REST/V1/Imagery/Map/Road/",
    EncodeUrl("浅草"),
    "?mapSize=",
    Text(Image1.Width),
    ",",
    Text(Image1.Height),
    "&key={Your API Key}"
)

こちらで「浅草」の地図が表示されます。
特に難しい点もありませんので次に行きます。

locationInputText（浅草）

こちらを動的に切り替えられるように変更します。
先ほどの Image1 の items プロパティを変更します。

Concatenate(
    "https://dev.virtualearth.net/REST/V1/Imagery/Map/Road/",
    EncodeUrl(locationInputText.Text),
    "?mapSize=",
    Text(Image1.Width),
    ",",
    Text(Image1.Height),
    "&key={Your API Key}"
)

先ほどの"浅草"と入力されていた部分を 

locationInputText.Text

に変更します。

これで自由に入力ができるようになったと思います。

mapTypeDrop（地図の見た目）

現在普通の地図の見た目が見えているかと思いますが、そこを動的に変更できるようにします。

プロパティ 数式
items ["Road","Aerial", "AerialWithLabels", "AerialWithLabelsOnDemand", "CanvasDark", "CanvasLight", "CanvasGray"]

先ほど同様 Image1 も変えていきます。

Concatenate(
    "https://dev.virtualearth.net/REST/V1/Imagery/Map/",
    mapTypeDrop.Selected.Value,"/",
    EncodeUrl(locationInputText.Text),
    "?mapSize=",
    Text(Image1.Width),
    ",",
    Text(Image1.Height),
    "&key={Your API Key}"
)

先ほどのRoadと入力されていた部分を 

    mapTypeDrop.Selected.Value,"/",

となります。

tglGPSLocation（現在位置情報）

ラベルを変えたい場合は、 FalseText TrueText プロパティを変更することで実装可能です。

今回は locationInputTextを変更します。

プロパティ 数式
Default If(tglGPSLocation.Value, Concatenate(Text(Location.Latitude), "," ,Text(Location.Longitude)),"浅草")

tglGPSLocation.Value

トグルが true か false かを返してくれます。

一度保存を行い再度アプリを開くと位置情報の許可が求められますので許可しましょう。

デバックを行いトグルを切り替えると地図情報が現在位置に切り替わります。

slZoom（地図のズーム）

現在地が表示されているときに地図の縮尺を変更できるようにします。

プロパティ 数式
Default 17
Visible tglGPSLocation.Value
Layout Layout.Vertical

今回は縦表示にしたかったので Layout.Vertical としました。
Image1 も変更します。

Concatenate(
    "https://dev.virtualearth.net/REST/V1/Imagery/Map/",
    mapTypeDrop.Selected.Value,"/",
    EncodeUrl(locationInputText.Text),
    "/", 
    Text(slZoom.Value),
    "?mapSize=",
    Text(Image1.Width),
    ",",
    Text(Image1.Height),
    "&key={Your API Key}"
)

とします。
EncodeUrlの後に

    "/", 
    Text(slZoom.Value),

が追加されています。

これで一旦、地図を表示するところまでは完成です。

Flow の作成

PowerAppsから地図の画像を送り、それを OneDrive に保存する Flow を組み立てます。

これだけです。
数式を少しだけ解説します。

変数を初期化する 値

concat(formatDateTime(body('現在の時刻'),'yyyyMMddhhss'),'.png')

現在日付をフォーマットで直しています。

URL からファイルのアップロード

画像保存の場合は通常このアクションではなくファイル作成アクションを使いますが、今回の地図の場合は画像のURLが送られてくるため、この保存方法となっています。

Button2（登録）

最後にアプリに戻り、ボタンの OnSelect に対して先ほどの Flow を登録します。

プロパティ 数式
Selected {Your Flow Name}.Run(Image1.Image)

完成

アプリを実行し確認しましょう。
One Dive上に地図画像が保存されます。

ここからの発展として、保存情報を一覧で確認できたり、Excel などに位置情報を保存し、それを Power BI や Power BI タイル 等で可視化してみるのも面白いと思います。(Microsoftさん Microsoft Teams で画像 + メンションができるようにしてください...)

追記 メンションはできるようになった模様 (2019/08/07)

参考