Click here to Skip to main content
12,557,148 members (31,291 online)
Click here to Skip to main content
Add your own
alternative version


9 bookmarked

Bing Maps in Silverlight 4

, 26 Jun 2010 CPOL
Rate this:
Please Sign up or sign in to vote.
How to get started with bing maps in your Silverlight app


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.)


  • 26th June, 2010: Initial post


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Team Leader
Spain Spain
No Biography provided

You may also be interested in...


Comments and Discussions

GeneralSuggestion Pin
BryanWilkins28-Jun-10 6:46
memberBryanWilkins28-Jun-10 6:46 
GeneralRe: Suggestion Pin
nereo.lopez28-Jun-10 7:32
membernereo.lopez28-Jun-10 7:32 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.161026.1 | Last Updated 26 Jun 2010
Article Copyright 2010 by nereo.lopez
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid