Getting started with the Bing Maps Silverlight SDK

16 11 2009

I got the chance this morning to have a look at the newly released Bing Maps Silverlight SDK. The bing maps SDK allows you to add a map to your silverlight application and enhance it by adding pushpins, images, videos, shapes and scalable elements etc.

I’m impressed at how easy it is to get a bing map displaying in your silverlight application and start customising it.

I decided to create this getting started guide to help you create a simple silverlight application displaying a bing map.

When you have completed the guide below you should have a map similar to the one below.

image

1. Download and install the Bing Maps Silverlight Control SDK from here –

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

2. Create a new ‘Silverlight Application’ project in Visual Studio 2008/2010 whichever you prefer. When the box pops up to asking whether or not you want VS to host the silverlight app in a new web site – make sure its ticked.

3. Add a reference to the dll’s

Microsoft.Maps.MapControl.dll

Microsoft.Maps.MapControl.Common.dll

you can find these dll’s in a subfolder of the installation directory called ‘Libraries’.

4. Create an account at the ‘Bing Maps Account Center’ and create a new application key (you will need this key to be able to use the bing map control) –

https://www.bingmapsportal.com/

4. Open the MainPage.xaml file of your project (not the web project) and a new xml namespace:

xmlns:m=”clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl”

5. Next add the following code inside the Grid control (make sure you paste your bing maps application key into the CredentialsProvider property –

<m:Map
Height=”300″
Width=”350″
x:Name=”testMap”
CredentialsProvider=”Your application key goes here
Background=”White”
Mode=”Road”
Center=”19.642588,50.273438″
ZoomLevel=”0″>
<m:Pushpin Location=”52.97421339369046,-1.246250867843628″/>
<m:Pushpin Location=”-27.469442,153.030136″/>
</m:Map>

6. Refresh the designer in visual studio by clicking the link and then build your project.

7. Hey Presto! – you should now be seeing a bing map just like the one above showing the locations of the ID offices.

Advertisements