Skip to content

Use the Bing Maps Control with Windows Phone 7 Developer Tools RTM

September 16, 2010
tags: ,

Yes indeed it’s a long title! If you follow Windows Phone 7 news in general you should have noticed that Microsoft just released the RTM version of the developers tools. I  will not go into the details, plenty of blogs have done a better job.

In this release, Microsoft has included the Panorama and Pivot Controls in the Microsoft.Phone.Controls assembly and the Bing Maps control in Microsoft.Phone.Controls.Maps (and their namespaces respectively). The documentation for the Map control is not finished yet and refers a lot to the desktop version of Silverlight.

The Location API is simple to use… If you are lucky enough to have a device. There’s no official support for a mockup in the emulator but you can find on MSDN a great sample using the Reactive framework to simulate the coordinates with a text file. I just coded a page with the Bing Maps control, here’s the XAML :

<Maps:Map x:Name="storesMap"
		  CredentialsProvider="NOTUSEDFORDEV"
		  ZoomBarVisibility="Visible">                       
	<Maps:MapItemsControl ItemsSource="{Binding Locations}">
		<Maps:MapItemsControl.ItemTemplate>
			<DataTemplate>
				<Maps:Pushpin Location="{Binding}" />
			</DataTemplate>
		</Maps:MapItemsControl.ItemTemplate>
	</Maps:MapItemsControl>
</Maps:Map>

It’s very nice to see that the Bing control supports ItemControls and that we are able to template them using the standard XAML binding engine. I binded here only to the Location object but you can use a custom object to add some text or image.

In the PositionChanged event handler I modified the code to change the map location and to add a pushpin. To keep the code simple I changed the map view only if it’s a new location or if the new location is more than 100 meters away from the previous one.

private GeoCoordinate lastLocation;
public ObservableCollection&lt;GeoCoordinate&gt; Locations { get; set; }
private void InvokePositionChanged(GeoCoordinate coordinate)
{
	if (lastLocation == null
		|| lastLocation.GetDistanceTo(coordinate) > 100)
	{
		lastLocation = coordinate;
		Dispatcher.BeginInvoke(
			() =>
				{
					storesMap.SetView(coordinate, 15);
					Locations.Add(coordinate);
				});
	}
}

Here’s a picture :

screenshoot of the emulator with the bing control map

Advertisements
One Comment leave one →
  1. Pravesh Singh permalink
    May 11, 2012 9:27 am

    This is nice article so far I’ve read online, thanks for sharing with us. I really appreciate you, keep writing. I was found some other good articles too which also explained very well about Bing Map Control in Windows Phone development. For more details on that posts check out the following url…..
    http://www.mindstick.com/Articles/68ca4c95-2ab6-4df0-94fa-9b340ca80d4a/?Map%20Control%20in%20Windows%207%20Phone%20Development
    http://f5debug.net/2012/02/21/learn-windows-phone-7-development-in-31-days-day-21-working-with-bing-map-control-in-wp7/

    Thanks everyone for your precious post.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: