Bing Maps 上にオブジェクトを配置してみよう

はじめに

初級、中級

Silverlight

前回は任意の位置とズームレベルのMapを表示させました。
今回はSilverlight Bing Maps SDK を利用して表示される地図上の任意の位置にピンを置いたりラインを引いてみます。事前に準備するものは前回の「Silverlight で Bing Maps を表示しよう」と同様です。

用意するもの

1. Expression Blend 3
2. Bing Maps Silverlight Control SDK

こちらのURLからダウンロードしてインストールしておきましょう。

http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=beb29d27-6f0c-494f-b028-1e0e3187e830

サンプルデータ

サンプルのダウンロード

Map上の任意の位置にピンを表示してみよう

<!-- Bing Map -->
<Map:Map x:Name="map" Margin="0" d:LayoutOverrides="Width, Height" Grid.Row="2"
	CredentialsProvider="Bing Maps keysを記述 "
	Center="35.70358, 139.74392" ZoomLevel="11.0000"
	ViewChangeOnFrame="map_ViewChangeOnFrame">
	<Map:Pushpin x:Name="cmPin" Location="35.70358,139.74392" ToolTipService.ToolTip="クラスメソッド" />
</Map:Map>

今回はMap上にピンを表示してみたいと思います。
この例では、クラスメソッド株式会社のある位置にピンを表示します。このようにPushpinクラスを利用することで任意の場所に簡単にピンを表示することができます。配置する数に特に制限はなく任意の場所にいくつも置くことができます。ピンはMapを拡大縮小しても大きさは追従しません。このため情報量が多い場合はズームレベルによってピンの表示・非表示を切り替えるようにしてもよいでしょう。

また、デフォルトではオレンジ色のピンが表示されるようになっていますが色は自由に変更可能です。

ピンのアイコンをオリジナルのものに変更しよう

次は、ピンをオリジナルのアイコンにしてみたいと思います。Map上にはPushpinクラスを利用しなくてもコントロールを配置することができます。
次の例では、Canvasクラスを使いBiz-RIAのロゴイメージをMap上に表示しています。

<!-- Bing Map -->
<Map:Map x:Name="map" Margin="0" d:LayoutOverrides="Width, Height" Grid.Row="2"
	CredentialsProvider=" Bing Maps keysを記述"
	Center="35.70358, 139.74392" ZoomLevel="17.0000"
	ViewChangeOnFrame="map_ViewChangeOnFrame">
	<Map:Pushpin x:Name="stPin" Location="35.70200,139.74500" ToolTipService.ToolTip="飯田橋駅" Background="#FFCC3232" />
	<Map:Pushpin x:Name="cmPin" Location="35.70358,139.74392" ToolTipService.ToolTip="クラスメソッド" Background="#FF003DE9" />
            <Canvas Width="40"  Height="51" Map:MapLayer.Position="35.70358,139.74440" Map:MapLayer.PositionOrigin="BottomCenter" Background="Black" >
            	<Canvas.Effect>
            		<DropShadowEffect Opacity="0.5"/>
            	</Canvas.Effect>
		<Image Source="logo.png" Margin="1" />
            </Canvas>
</Map:Map>

Map内に直接Canvasを置きMap:MapLayer.Positionプロパティで位置を指定することでPushpinと同じようにMap上に表示することができます。このような記述でMap上には自由にコントロールを配置することができ、制御も簡単に行うことができます。様々な応用の仕方が考えられます。

Map上に線を引こう

今度はMapに線を引いてみましょう。
MapにはShapeを描画するためのクラスが用意されています。矩形を引く場合はMapPolygonクラス、線を引く場合はMapPolylineクラスを利用します。
また、MapLayerクラスを使うとレイヤーごとに要素をまとめることができます。例えばいくつもの表示オブジェクトがある場合、その切り替えをグループごとにしたい時に利用します。この例では、Map上に飯田橋駅からクラスメソッド株式会社までの順路をMapPolylineで表しています。

<!-- Bing Map -->
<Map:Map x:Name="map" Margin="0" d:LayoutOverrides="Width, Height" Grid.Row="2"
	CredentialsProvider=" Bing Maps keysを記述"
	Center="35.70358, 139.74392" ZoomLevel="17.0000"
	ViewChangeOnFrame="map_ViewChangeOnFrame">
            <Canvas x:Name="cmLogo" Width="40"  Height="51" Map:MapLayer.Position="35.70358,139.74440" Map:MapLayer.PositionOrigin="BottomCenter" Background="Black" >
            	<Canvas.Effect>
            		<DropShadowEffect Opacity="0.5"/>
            	</Canvas.Effect>
		<Image Source="logo.png" Margin="1" />
            </Canvas>
	<Map:MapLayer>
		<Map:MapPolyline StrokeThickness="6" Locations="35.70358,139.74420 35.70278,139.74450 35.70274,139.74433 35.70210,139.74510" Opacity="0.9" >
			<Map:MapPolyline.Effect>
				<DropShadowEffect/>
			</Map:MapPolyline.Effect>
			<Map:MapPolyline.Stroke>
				<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
					<GradientStop Color="#FF00FF7E" Offset="0"/>
					<GradientStop Color="Red" Offset="1"/>
				</LinearGradientBrush>
			</Map:MapPolyline.Stroke>
		</Map:MapPolyline>
	</Map:MapLayer>
	<Map:Pushpin x:Name="stPin" Location="35.70200,139.74500" ToolTipService.ToolTip="飯田橋駅" Background="#FFCC3232" />
	<Map:Pushpin x:Name="cmPin" Location="35.70358,139.74392" ToolTipService.ToolTip="クラスメソッド" Background="#FF003DE9" />
</Map:Map>

このようにMap上に線を引くことができます。
ただし、線は自由に引くことができますがLocationで指定しないといけないため複雑な図形を作るのには向きません。そういった場合はCanvasクラスなどを配置してその中で図形を描画したほうがよいでしょう。

ここまでの作業でピンを配置して線をMap上に引きました。
Map上にコントロールを配置する方法はこれが基本になります。今回の例ではクラスメソッドの最寄りの駅からの順路を表示する想定でMap上に配置していますがいかがでしょうか。これまでの作業はBlendのみを使用して非常に簡単に行うことができます。是非Bing Map SDKに挑戦してみてください。