Bing Maps in Silverlight 4

Introduction

This article is meant to help everyone that wants to get started using Bing Maps in Silverlight. For this, we'll create a simple "Where are We" page in a sample project.

Downloading and Installing the Control

Google "download Silverlight bing maps" and you should get the link to the latest release. It is just a .msi file, so let's install it.

Now it is installed, there's a new folder under C:\Program Files\ called Bing Maps Silverlight Control. There, we can find the documentation and the libraries.

Using the Code

Once in Visual Studio, and with our solution opened, go to Project-> Add Reference -> Browse tab, and find the Bing Maps Silverlight Control folder under C:\Program Files, and add the reference, as shown in the image below:

Now, in our WhereAreWe.xaml page, let's add the XML namespace:

Now, we can use the control in our page:

Let's see the map properties for just a minute (avoiding the layout ones):

• Credentials provider: For now (I'm using the control's Beta's v1), we have to register our application to get a credential that allows us to use the map control. We can register up to 5 apps. The registration code we get is the one we set in the CredentialsProvider property (see this link for more information.)
• Center: Center point that we want our map to display when loaded
• CopyrightVisibility: To show/hide the map control's copyright
• Culture: The language/culture that we want to use in our map control
• LogoVisibility: To show/hide Bing Maps' logo
• ZoomLevel: The map zoom's distance (1 being the furthest)

How Do We Get an Address Point?

We need to know that to set the Center point and our locations. Let's go to Bing Maps, and look up for a place, let's say Seville. Once we get the result and the city is being shown in the map, we'll write javascript:map.GetCenter() in the browser's address bar. We'll get something like this: (37.38763567060232, -6.001807451248169).

So. our center point would be-> Center="37.38763567060232,-6.001807451248469". Please notice that there's no space between both values when we set the point, just a "," symbol.

Placing our Locations in the Map

We can create a Children section for our map. In this case, I'm using a canvas for each child. Take a look at the m:MapLayer.Position property. That's the point where we want our children to appear in the map. I'm just using an image to let the user know where our places are, but we could take advantage of the XAML's power and flexibility and use rotations, effects, triggers... whatever we want.

We can add as many children as needed. Of course, we could do this dynamically in the code behind, which I think would be the best way to do it if we have to display a large variable number of locations.

If you run the application, you will notice that the control runs fast, and you will like the transition effects when a zoom level or a location is changed.

Thanks for your time reading this article. Please fell free to post any comment/suggestion/doubt that you have. Maybe another day, we'll discuss how to let the user write an address and show back the location in the map.

Hope it helps!

(See this link for more information.)

History

• 26^th June, 2010: Initial post