はじめに
みなさんはBing
そしてBingには、
![図1 Bing 図1 Bing](/assets/images/dev/serial/01/bing-sdk/0001/thumb/TH800_001.png)
さて、
Bing Map App
そもそもBing Map App
日本のBing Mapsは、
SilverlightのBing Mapsでは、
Map Appは、
これまでは、
ただし、
![図2 Bing Map App Gallery 図2 Bing Map App Gallery](/assets/images/dev/serial/01/bing-sdk/0001/thumb/TH800_002.png)
![図3 Streedside Photos 図3 Streedside Photos](/assets/images/dev/serial/01/bing-sdk/0001/thumb/TH800_003.png)
![図4 Twitter Maps 図4 Twitter Maps](/assets/images/dev/serial/01/bing-sdk/0001/thumb/TH800_004.png)
開発環境
Bing Map Appの開発には次の環境が必要です。
無償のVisual Web Developer Express 2010 ExpressとSilverlight 4 Toolsの組み合わせでも開発できます。
Bing Map App SDKは、
インストーラーを実行すると
![図5 Bing Map App SDK セットアップ 図5 Bing Map App SDK セットアップ](/assets/images/dev/serial/01/bing-sdk/0001/thumb/TH800_005.png)
プラグイン
最初にMap Appの構成について説明します。Map Appはbing.
レイヤー(Layer)
プラグインは、
エンティティ(Entity)
エンティティとは、
![図6 プッシュピン 図6 プッシュピン](/assets/images/dev/serial/01/bing-sdk/0001/006.png)
オーバーレイ(Overlay)
オーバーレイは、
パネル(Panel、Expanded Panel)
パネルは、
今回 作成するMap Appはひとつのレイヤーとプッシュピンを持っています。
プロジェクトの作成
それでは、
![図7 Silverlight Class Libraryプロジェクトの作成 図7 Silverlight Class Libraryプロジェクトの作成](/assets/images/dev/serial/01/bing-sdk/0001/thumb/TH800_007.png)
続いて必要なライブラリーを参照します。プロジェクト メニューの
- Microsoft.
Maps. Core. dll - Microsoft.
Maps. Extended. dll - Microsoft.
Maps. MapControl. Types. dll - Microsoft.
Maps. Plugins. dll
![図8 参照の追加 図8 参照の追加](/assets/images/dev/serial/01/bing-sdk/0001/thumb/TH800_008.png)
プラグイン クラスの作成
プラグインは、
usingディレクティブを記述し必要な型をインポートします。
using Microsoft.Maps.Core;
using Microsoft.Maps.Plugins;
そして、
public class HelloWorldPlugin : Plugin
{
}
Pluginクラスには、
public override void Initialize()
{
base.Initialize();
}
public override void Activate(System.Collections.Generic.IDictionary<string, string> activationParameters)
{
base.Activate(activationParameters);
}
以上で何もしないプラグインができました。ここに各種機能を追加していきます。
ContractのImportとExport
さて、
[ImportSingle("Microsoft/PushpinFactoryContract", ImportLoadPolicy.Synchronous)]
public PushpinFactoryContract PushpinFactoryContract { get; set; }
PushpinFactoryContractは地図上にプッシュピンを追加する機能を提供します。上記のように記述することで、
レイヤーの追加
Map Appで何かしらの情報を表示するためには、
Layerクラスは、
namespace HelloWorldBingMapApp
{
using Microsoft.Maps.Core;
using Microsoft.Maps.Plugins;
public class MainLayer : Layer
{
public MainLayer(PluginToken pluginToken) : base(pluginToken)
{
}
}
}
今回はレイヤーで何も処理しないため、
HelloWorldPluginクラスに戻り、
このメソッド内でプラグインに既にレイヤーが追加されていればレイヤーを表示、
private MainLayer mainLayer;
[ImportSingle("Microsoft/LayerManagerContract", ImportLoadPolicy.Synchronous)]
public LayerManagerContract LayerManagerContract { get; set; }
public override void Activate(System.Collections.Generic.IDictionary<string, string> activationParameters)
{
if (LayerManagerContract.ContainsLayer(this.mainLayer))
{
LayerManagerContract.BringToFront(this.mainLayer);
}
else
{
LayerManagerContract.AddLayer(this.mainLayer);
}
}
上記コードでは、
プッシュピンの追加
続いてレイヤーの中にプッシュピンを追加してみましょう。今回作成するMap Appではユーザーが表示している地図上にひとつのプッシュピンを表示します。また、
表示されている地図の操作、
[ImportSingle("Microsoft/MapContract", ImportLoadPolicy.Synchronous)]
public MapContract DefaultMap { get; set; }
[ImportSingle("Microsoft/PushpinFactoryContract", ImportLoadPolicy.Synchronous)]
public PushpinFactoryContract PushpinFactoryContract { get; set; }
[ImportSingle("Microsoft/PopupContract", ImportLoadPolicy.Synchronous)]
public PopupContract PopupContract { get; set; }
プッシュピンを作成するには、
Initializeメソッドの内容を変更したコードを示します。先ほどのレイヤーのインスタンス生成もここで行います。
public override void Initialize()
{
base.Initialize();
this.mainLayer = new MainLayer(this.Token);
var pin = PushpinFactoryContract.CreateStandardPushpin(this.DefaultMap.Center);
var entity = new Entity(pin);
this.mainLayer.Entities.Add(entity);
}
CreateStandardPushpinメソッドによる戻り値はレイヤーに直接追加できる型でありません。そのためEntityオブジェクトを生成しPrimitiveプロパティに値を設定しています。エンティティは地図上に表示するアイテムで、
最後にプッシュピンクリック時の処理です。PopupContractのRegisterメソッドを用いて次のように記述できます。Initializeメソッド内のレイヤーに追加する前に追記します。
PopupContract.Register(
entity,
(PopupStateChangeContext context) =>
{
context.Title = "こんにちは!";
if (context.State == PopupState.Normal)
{
context.Content = pin.Location.ToString();
}
});
ポップアップを表示するエンティティとポップアップの状態が変更されたときの処理を指定しています。
Map Appのテスト
以上でコードの記述は終了です。きちんとビルドできましたか? ここまでのHelloWorldPlugin.
namespace HelloWorldBingMapApp
{
using Microsoft.Maps.Core;
using Microsoft.Maps.Plugins;
public class HelloWorldPlugin : Plugin
{
private Layer mainLayer;
[ImportSingle("Microsoft/MapContract", ImportLoadPolicy.Synchronous)]
public MapContract DefaultMap { get; set; }
[ImportSingle("Microsoft/LayerManagerContract", ImportLoadPolicy.Synchronous)]
public LayerManagerContract LayerManagerContract { get; set; }
[ImportSingle("Microsoft/PushpinFactoryContract", ImportLoadPolicy.Synchronous)]
public PushpinFactoryContract PushpinFactoryContract { get; set; }
[ImportSingle("Microsoft/PopupContract", ImportLoadPolicy.Synchronous)]
public PopupContract PopupContract { get; set; }
public override void Initialize()
{
base.Initialize();
this.mainLayer = new MainLayer(this.Token);
var pin = PushpinFactoryContract.CreateStandardPushpin(this.DefaultMap.Center);
var entity = new Entity(pin);
PopupContract.Register(
entity,
(PopupStateChangeContext context) =>
{
context.Title = "こんにちは!";
if (context.State == PopupState.Normal)
{
context.Content = pin.Location.ToString();
}
});
this.mainLayer.Entities.Add(entity);
}
public override void Activate(System.Collections.Generic.IDictionary<string, string> activationParameters)
{
if (LayerManagerContract.ContainsLayer(this.mainLayer))
{
LayerManagerContract.BringToFront(this.mainLayer);
}
else
{
LayerManagerContract.AddLayer(this.mainLayer);
}
}
}
}
ビルドできたら、
![図9 Map app test tool 図9 Map app test tool](/assets/images/dev/serial/01/bing-sdk/0001/thumb/TH400_009.png)
作成したプラグインをBing Mapに追加するには、
![図10 プラグイン アセンブリファイルの選択 図10 プラグイン アセンブリファイルの選択](/assets/images/dev/serial/01/bing-sdk/0001/thumb/TH800_010.png)
テスト用にローカルで実行できる環境ですので、
もしプラグインが他に参照しているアセンブリファイルがある場合は
次に
次に進むと、
以上で、
![図11 My Map App 図11 My Map App](/assets/images/dev/serial/01/bing-sdk/0001/thumb/TH400_011.png)
クリックしてアプリケーションを実行してみましょう。地図上にプッシュピンが表示されたでしょうか。マウスポインターを合わせるとポップアップが
![図12 実行結果 図12 実行結果](/assets/images/dev/serial/01/bing-sdk/0001/thumb/TH400_012.png)
いかがでしたでしょうか。今回は簡単なBing Map Appを作成しました。これだけでは実用性はありませんが、