Bing Maps Silverlight Control SDK

11月にBing Maps Silverlight Control 1.0がリリースされました。これは、Bingサービスの地図検索のBing MapsをSilverlightから利用できるコントロールです。現在利用できるBing MapsサービスはJavaScriptや非同期通信を使用したAjaxによるものですが[1]⁠、Bing Maps Silverlight Controlから利用できるBing MapsサービスはSilverlightとDeep Zoomと呼ばれる高解像度の画像をなめらかにズームイン・アウトできる機能を使用しており、これまでとは異なる新しいユーザーエクスペリエンスを実現しています。このコントロールを利用すると簡単にSilverlightアプリケーションへBing Mapsサービスの組み込みや連携が可能です。今回はこのコントロールを使ってみましょう[2]⁠。

Silverlight とDeep Zoomを使用したBing Mapsを体験するには、http://dev.virtualearth.net/embeddedMap/v1/silverlight/AerialWithLabelsを見てみるのが手っ取り早いでしょう。このアドレスはWebサイトにiframeタグなどでBing Mapsを埋め込むためのものです。これもMap Controlの内容のひとつです。アドレスにパラメータを付けることで、簡単な制御も可能です。

http://dev.virtualearth.net/embeddedMap/v1/silverlight/Aerial?zoomLevel=15&center=36.0999_139.6549&pushpins=36.0999_139.6549&culture=ja-jp

Silverlightアプリケーション プロジェクトの作成

SilverlightアプリケーションからBing Maps Silverlight Controlを利用するまでの必要な環境を用意していきましょう。

開発環境

Bing Maps Silverlight Control SDKを利用した開発には、Visual Studio 2008 SP1またはVisual Web Developer 2008 Express Edition SP1、およびVisual Studio 2008 SP1用Microsoft Silverlight 3 Toolsが必要です。これ以外にも、現在Visual Studio 2010のBeta版を試すことができるので、こちらを使ってみるのもよいかもしれません。本記事ではVisual Studio 2010 Beta2を使用した結果を載せています。

SDKのインストール

Bing Maps Silverlight Control SDKは、Download Centerからダウンロードし、インストールします。内容はVisual Studioから参照して使用するライブラリ（DLLファイル）とヘルプファイル、ラインセンス文書です。通常、「⁠%programfiles%\Bing Maps Silverlight Control\V1」にインストールされます（64bit環境では、Program Files (x86)フォルダです⁠）⁠。

プロジェクトの作成

Silverlightアプリケーションプロジェクトを新規に作成します（図1⁠）⁠。このときSilverlightアプリケーションをホストするASP.NET Webプロジェクトも併せて作成します（図2⁠）⁠。

参照の追加

Silverlightアプリケーションプロジェクトに参照の追加を行います。プロジェクトメニューの「参照の追加」項目から、SDKをインストールした場所、V1\LibrariesフォルダにあるふたつのDLLファイルを選択します（図3）

以上で、準備が整いました。

地図の表示

さっそく、アプリケーションにコントロールを組み込み、地図を表示してみましょう。プロジェクトにあるMainPage.xamlをデザイナで表示し、次のように編集します。

<UserControl x:Class="BingMapsApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:m="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <Grid x:Name="LayoutRoot" Background="White">
        <m:Map x:Name="MyMap" />
    </Grid>
</UserControl>

追加したのは、xmlns:m……の名前空間の指定部分と<m:map>要素のみです。これで一応は地図が表示できる状態になっていますので、実行してみましょう。結果は図4のようになります。

少し操作すると、メッセージが表示されることがわかります。英文で書いてあるとおり、コントロールの利用には、開発者アカウントが必要です。次はこのアカウントの作成と、アプリケーションごとに必要なBing Maps Keyを取得します。

Bing Maps Keyの取得

Bing Maps Silverlight Controlの利用には、Bing Maps Keyを取得する必要があります。最初にBing Maps開発者用のアカウントを作成し、アプリケーション用にBing Maps Keyを取得します。

開発者アカウントの作成

アカウントの作成は、Bing Maps Account Centerで行います。Windows Live IDアカウントによるサインインも必要になります。「⁠Create an account」から必要な項目を記入し、利用規約に同意後、「⁠Create account」ボタンをクリックします（図5⁠）⁠。必須項目はメールアドレスと、アカウント名（Account name）です。アカウント名には、アカウントを自分とマイクロソフトが識別するために わかりやすい適当な名前を入力します。

Bing Maps Keyの取得

続いてBing Maps Keyを取得します。「⁠Create or view keys」から作成します（図6⁠）⁠。アプリケーション名とアプリケーションを公開するアドレスを入力します。「⁠Create key」ボタンをクリックすると、作成したKeyが表示されます。

Keyは少し長めの文字列です。これをコピーして使用します。また、このKeyは5個まで作成可能です。

Bing Maps Keyの設定

取得したKeyを先ほどのアプリケーションに設定して動作を確認します。XAMLを編集し、<m:Map>要素を次のように変更します。

<m:Map x:Name="MyMap" CredentialsProvider="取得したKey" />

再度実行すると、メッセージの表示が消えたでしょうか？　確認してみてください。

このKeyの設定により、コントロールがロードされたときセッションがカウントされます。ユーザーがWebサイトを訪れてコントロールをロードし、Webブラウザを閉じるか他のページに移動するまでが、1セッションです。一定の期間にコントロールを無償で利用できるセッション数は、利用規約により決められています。利用目的によってもその内容は異なりますので、ご自身で確認をお願いします。

地図の制御

コードから簡単な地図の制御をしてみましょう。MainPage.xamlはKeyを追加したままの状態で、MainPage.xaml.vbの内容が以下のようになるよう追記します。

Imports Microsoft.Maps.MapControl

Partial Public Class MainPage
    Inherits UserControl

    Public Sub New()
        InitializeComponent()

        ' 道路地図か航空写真(ラベル表示の有無)かの設定
        MyMap.Mode = New AerialMode With {.Labels = True}
        ' または MyMap.Mode = New RoadMode
        ' MyMap.SetMode(New RoadMode, False) など

        ' ズームレベル(1が最小値でズームアウトした状態)の設定
        MyMap.ZoomLevel = 10

        ' 地図の中心に表示する 緯度・経度の設定
        MyMap.Center = New Location(36.0999, 139.6549)
        ' または MyMap.SetView(New Location(36.0999, 139.6549), 10) など
    End Sub
End Class

コードを見ていただけると直感的にわかるのではないかと思います。道路地図・航空写真表示の切り替え、ズームレベル、経緯度の設定をしています。プロパティやメソッドを使用して設定が可能です。上記コードではコンストラクタに記述し、固定値を設定しているだけであまり有用はありませんが、ボタンを配置しクリック時に移動処理などを行うのも簡単に対応できますね。上記の例であればXAMLだけでも同様に記述できます。

<m:Map x:Name="MyMap" CredentialsProvider="取得したKey"
       Mode="AerialWithLabels" ZoomLevel="10" Center="36.0999,139.6549"/>

SilverlightやWPFの特徴であるデータバインディングももちろん使用できます。次のようにXAMLを編集し、経緯度を表すLocationクラスと文字列を変換するコンバータークラスを追加して実行すると、表示した経緯度がテキストボックスに表示され、反対にテキストボックスに経緯度を入力するとその場所へ地図が移動します。

<UserControl x:Class="BingMapsApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:m="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl"
    xmlns:me="clr-namespace:BingMapsApp"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.Resources>
            <me:LocationConverter x:Key="LocationConverter" />
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <TextBox x:Name="LocationTextBox" Text="36.0999,139.6549" />
        <m:Map x:Name="MyMap" 
               Grid.Row="1" CredentialsProvider="取得したKey"
               Mode="AerialWithLabels" ZoomLevel="10" 
               Center="{Binding ElementName=LocationTextBox, Path=Text, Mode=TwoWay, Converter={StaticResource LocationConverter}}"/>
    </Grid>
</UserControl>

Imports System.Windows.Data
Imports Microsoft.Maps.MapControl

Public Class LocationConverter
    Implements IValueConverter

    Public Function Convert(ByVal value As Object, ByVal targetType As System.Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IValueConverter.Convert
        Try
            Dim values = CStr(value).Split(New String() {","}, StringSplitOptions.RemoveEmptyEntries)
            Return New Location(CDbl(values(0)), CDbl(values(1)))
        Catch ex As Exception
            Return DependencyProperty.UnsetValue
        End Try
    End Function

    Public Function ConvertBack(ByVal value As Object, ByVal targetType As System.Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IValueConverter.ConvertBack
        Try
            Dim location = DirectCast(value, Location)
            Return String.Format("{0},{1}", location.Latitude, location.Longitude)
        Catch ex As Exception
            Return DependencyProperty.UnsetValue
        End Try
    End Function
End Class

上記コードの実行結果は図7のようになります。

Interactive SDK

今回紹介できた内容はBing Maps Silverlight Control SDKのほんの一部分だけです。ですが、簡単に利用でき、活用できそうな雰囲気が伝わっていれば幸いです。その他の機能に関しては、Interactive SDKというコントロールの各種機能を利用したサンプルとデモをまとめたWebサイトが用意されていますので、こちらを参照するとよいでしょう。その他の機能も手短なコードで利用できることがわかるかと思います。

Interactive SDKでは、Bing Maps Silverlight Control SDKと地名から経緯度を検索するなどのBing Maps Web Servicesと連携したサンプルも紹介されています。よりコントロールを活用したアプリケーションにはこちらも必要かと思います。

おわりに

今回は以上です。いかがでしたでしょうか。LiveブランドからBingブランドへと変わり、地図検索のプラットフォームであったMicrosoft Virtual EarthはBing Maps Platformへと変わりました。その内容はいまのところ名前の変更程度に留まっていますが、これからの発展に期待されます。今回紹介したSilverlightのコントロールもVirtual Earth Silverlight Map Control Community Technology Preview バージョンとして提供されたものが正式リリースされた形ですので、Bingブランドからの新しいサービスというわけではありません。しかし、エンドユーザー向けサービスでSilverlightによる地図検索サービスは、Bing Mapsでも採用されていませんし、また特に日本においてはSDKを利用したサイトはほぼ無いといっていいでしょう。今、この時期にBing Maps Silverlight Control SDKを利用したWebアプリケーションはユーザーに対してインパクトのあるものにできるかもしれませんね。この記事が開発のきっかけになれば幸いです。