iPentec.com / Document / カテゴリ: C# / タグ: C# Azure Maps

Windows Form アプリケーションに Azure Mapsの地図を表示する

概要

Windowsアプリケーションに地図を表示する方法として従来はBing Mapsを利用していましたが、Bing Mapsは非推奨となり、将来的には廃止されます。(2025年6月30日で廃止予定)

この記事では、Windows FormアプリケーションでAzure Mapsを利用して地図を表示する方法を紹介します。

なお、Windows Formアプリケーションで地図を表示しますが、WebView2を利用した方式のため、システム構成的にはHTMLページをWindows Formアプリケーションで表示す動作となります。

事前準備

Azure Mapsアカウントの作成と認証キーの取得

はじめにAzure Mapsのアカウントを作成してAPIを呼び出すためのキーを取得する必要があります。手順の詳細はこちらの記事を参照してください。

Windows Formアプリケーションの準備

Windows Formアプリケーションのプロジェクトを作成します。

WebView2 の導入

NuGetを利用して、WebView2のライブラリをインストールします。手順の詳細はこちらの記事を参照してください。

HTMLページの準備

WebView2に読み込むページを作成します。アプリケーションと同じ位置に以下のHTMLファイルを作成します。
HTMLファイルのコードの詳細についてはこちらの記事を参照してください。

Map.html

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
  <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

  <script>
    var map;

    function GetMap() {
      map = new atlas.Map("myMap", {
        center: [139.76, 35.68],
        zoom: 10,
        language: 'ja',
        fallbackLanguage: 'en',
        style: 'road',
        authOptions: {
          authType: 'subscriptionKey',
          subscriptionKey: '(Azure Mapsの共有認証キー)'
        },
      });
    }

    window.onload = GetMap;
  </script>
</head>
<body>
  <h1>WebView2 での Azure Maps のデモ</h1>
  <div id="myMap" style="width: 100%; height: 80vh;"></div>
</body>
</html>

作成した Map.html のプロパティを表示し、[出力ディレクトリにコピー]の設定を "常にコピーする" に変更します。ビルド結果のディレクトリにMap.htmlが配置される設定にします。
Windows Form アプリケーションに Azure Mapsの地図を表示する:画像1

注意

HTMLコード内に「Azure Mapsの共有認証キー」を埋め込んでいますが、このキーは外部公開できないことに注意が必要です。

実装

Windows Formアプリケーションを作成します。

UI

下図のフォームを作成します。フォームに WebView2 コントロールを配置しています。

コード

以下のコードを記述します。
Loadイベントで、WebView2 コントロールの Sourceプロパティに先ほど作成したMap.html のパスを代入してWebView2で表示します。
WebView2でローカルファイルを開く場合には、file://(読み込ませるファイルのフルパス) の形式で Sourceプロパティに指定します。

namespace AzureMapsWindowsForm
{
  public partial class FormMain : Form
  {
    public FormMain()
    {
      InitializeComponent();
    }

    private void FormMain_Load(object sender, EventArgs e)
    {
      string FilePath = Path.GetDirectoryName(Application.ExecutablePath) + "\\Map.html";
      webView21.Source = new Uri("file://"+FilePath);
    }
  }
}

ソリューションエクスプローラーの状態です。
Windows Form アプリケーションに Azure Mapsの地図を表示する:画像2