Working with Bing Maps in Silverlight and Windows Phone 7 Applications

by Jani Jarvinen

Location based services and interactive maps are fast becoming a commodity. As an application developer, you need to learn how to easily bring maps and location based features into your own applications. In this article, you will learn how to integrate Microsoft's Bing Maps into your own Silverlight and Windows Phone 7 applications.


Microsoft's Bing search engine (which the company calls a "decision engine") allows you to search the Internet, but also work with maps interactively. As you could expect from the developer-friendly company, creating applications that use the Bing Maps functionality has been made easy. For instance, you can add a Bing Maps control into your Silverlight applications, and run them on the web, the desktop and on Windows Phone 7.

In addition to basic map display functionality (see Figure 1), you can also programmatically manipulate the map. For instance, you can add pushpins to mark your location, add areas, or even integrate media onto the map. For instance, a video could start playing at a particular location when you zoom in enough on the map. Furthermore, you can switch your view to an aerial view, or at certain urban locations, the bird's view.

A Bing map on the web browser
Figure 1. A Bing map on the web browser.

In many situations, Bing Maps is a free service for both profit and non-profit organizations. However, the application (solution) you are developing must be a publicly facing web application, and the map functionality must not be password protected. Furthermore, there is a limit to 125.000 sessions per year. If your needs are above that or you want to integrate Bing Maps with your internal applications, you must discuss licensing with Microsoft. For mobile applications, Bing Maps is free if it is provided in a publicly distributed application and does not display real-time traffic data.

In this article, you are going to learn how you can get started with Bing Maps in your own applications. Two example solutions are given: a traditional Silverlight 4.0 application for web use and another that works with a Windows Phone 7 device. Sample code is shown for C# programming, and Microsoft Visual Studio 2010 with the Windows Phone 7 Tools used as the development tool.

Registering for a Bing Maps Developer Account

Bing Maps is a free service for public-facing web applications and Windows Phone 7 applications available through the Windows Marketplace. Although you can freely browse the maps on the Bing Maps web site at http://maps.bing.com/, using the same maps in your own applications or web sites requires you to register as a developer.

This registration process is a straightforward process and similar to many other web based registrations. You simply point your browser to the Bing Maps Account Center at www.bingmapsportal.com and then log in with a Microsoft Live ID (see Figure 2). Once you have logged in and registered, you can access your developer key from the top-left corner of the web portal. From there, you can find a section named "Map APIs", under which you can find a link to "Create or view keys".

To be able to use a map in your own applications, you need to register for a developer key
Figure 2. To be able to use a map in your own applications, you need to register for a developer key.

If you click this link, you will see an orange-ish box to create a new developer key. You must give your application a name (it could be "Test") and an URL pointing to your application. In a production application, this should be a public URL, but for testing and development work, you can just type in "http://localhost/". For the application type, select for instance "Developer" or "Evaluation/Trial". After pressing the submit button, you will receive your developer key, which is a long string of alphanumeric characters.

The same map portal that allowed you to create your developer key also lets you access the Bing Maps Silverlight Control download page. To be able to use Bing maps in your Silverlight applications, you will need to download this control. The control has been designed for Microsoft Visual Studio 2010 and the separate Silverlight 4 Tools for Microsoft Visual Studio. Remember also that you will need to have the latest Silverlight developer runtime as well. If you forget to install the runtime, Microsoft Visual Studio will kindly prompt you to download it.

Working with Bing Maps in Silverlight Applications

Once you have successfully registered yourself a Bing Maps developer account, you will receive a developer key (also called credential) which you will need during development. In addition to the key, you will need the Bing Maps assemblies (binaries) to be able to host the map control. The assemblies are installed automatically when you install the Bing Maps Silverlight Control.

Once you have installed this control (in fact, it is a complete SDK package) onto your development machine, you are ready to start coding. First, open up a Silverlight project, and then go to the XAML code of the window (or other user interface element) of your choice, and add in the following tag:

  <m:Map name="bingMap" CredentialsProvider="OgyJkr4W7..."/>

There are two important things to note. Firstly, you will need to specify your own developer key in the CredentialsProvider attribute shown above. Also note how the tag refers to a namespace called "m", which must be defined for the XAML file to be valid. The namespace declaration you need is shown below. It must be added to the topmost tag of your XAML file, often the Window or UserControl tag.

  <UserControl x:Class="MySilverlightApp1.MainPage"

Once you have the Map tag and the namespace declaration in place, the final step is to add proper assembly references to your C# project. You can do this for instance in Solution Explorer by right-clicking the References node, and choosing Add from the popup menu.

Then, go to the Browse tab, and select both of the Bing Maps assemblies: Microsoft.Maps.MapControl.dll and Microsoft.Maps.MapControl.Common.dll. These can be found from the Bing Maps SDK installation folder (by default at C:\Program Files\Bing Maps Silverlight Control\V1\Libraries), see Figure 3.

[Figure 3 - Bing Map Control DLLs.png]
Figure 3. The Bing maps Silverlight control requires two assembly references to be added to your project.

With the XAML code and proper assembly references in place, the Bing Maps control will readily show in your Silverlight application. The next step is to program the map.

Some of the most common needs when working with a map are the following:

  • Centering the map on a certain position and zooming in
  • Adding a pushpin to a certain location on the map
  • Changing the view of the map from a road map to an aerial view.

Let's address each of these in turn. Firstly, there's working with the map's current location and zooming in into it. The Bing map control contains a property named Center which lets you specify the center point of the map. This property requires you to know the latitude ("top-or-bottom" as far as the Western tradition goes) and longitude ("left-or-right") coordinates of the location. Here is an example of setting the property to somewhere near Chicago:

  using Microsoft.Maps.MapControl;
  bingMap.Center = new Location(41.8873406, -87.8382893);

Once you have the center location set, you might want to zoom in. This is very simple: you simply set the ZoomLevel property of the map control. This works with an integer value; the value of one equals no zoom at all (the widest possible view) and 21 is the maximum zoomed-in value, going to the block level in the road map view. Here is an example:

  bingMap.ZoomLevel = 18;

With this zoom level, the map looks like the one in Figure 4.

[Figure 4 - Maps with Zoom Level 18.png]
Figure 4. A Silverlight map after it has been centered and zoomed.

Adding pushpins requires some more code, but in the end, the process is simple. The Bing Maps control can display almost any framework element on top of the map, and this includes pushpins. However, to be able to show a single pushpin, you will need something called a map layer to display the pushpin on. Once this layer is in place, to add a pushpin, you will just need the simple latitude and longitude values. Here is an example:

  MapLayer layer = new MapLayer();
  Pushpin pin = new Pushpin()
    Location = new Location(41.8873406, -87.8382893)

When this code is executed, the map control looks like the one in Figure 5. The final step is to set the view to an aerial view. This is a matter of setting the Mode property:

[Maps with Zoom Level 18.png]
Figure 5. A pushpin has been added.

  bingMap.Mode = new AerialMode();

Basic work with a Bing map is very straightforward. Next, let's focus on mobile maps.

Working With the Map Control in Windows Phone 7 Applications

If you are into mobile application development, Microsoft's Windows Phone 7 is an interesting new platform that utilizes plenty of new technology. Windows Phone 7 applications are written with either Silverlight or XNA, both of which are .NET technologies. Native application development isn't allowed anymore.

In this article, the focus is on Silverlight-based Windows Phone 7 applications. As you might guess, a similar Bing maps control is available on this platform than in regular Silverlight applications for the web and desktops. Working with the phone version of the control is similar to working with its big brother, but the feature set is more limited. Also, control namespaces are different, but Microsoft Visual Studio will readily inform you of which namespaces are needed.

To run a test drive of the Bing Maps control for phone applications, make sure you have the Windows Phone 7 tools installed into Microsoft Visual Studio 2010 (see the download link at the end of this article), and then proceed to create a new, blank Silverlight application for the Windows Phone. Once the project has been created, simply drag and drop the Map control from the Microsoft Visual Studio Toolbox onto the designer surface (Figure 6).

[Figure 6 - Map Application in Visual Studio.png]
Figure 6. A Windows Phone map application in Microsoft Visual Studio 2010.

If you wanted to center and zoom the map, you would work almost exactly like you would with the regular Silverlight control. Although there are slight changes, the logic is still the same:

  using Microsoft.Phone.Controls.Maps.Platform;
  bingMap.Center = new Location()
    Latitude = 41.8873406,
    Longitude = -87.8382893
  bingMap.ZoomLevel = 15;

With the mobile map control, you can readily utilize the knowledge you have from the web/desktop version (Figure 7). Note that a recent update has been published for the Windows Phone 7 tools in Microsoft Visual Studio. Called the October 2010 Update, this update will, among other things, improve the performance of the Bing maps control. Thus, it is recommended that you install this update into your development environment.

[Figure 7 - Map in the Phone Emulator.png]
Figure 7. A Bing map running in the Windows Phone 7 emulator.


In this article, you learned the basics of the Bing Map control. You saw examples on how to integrate maps into your own Silverlight applications both on the web and desktop, but also on the new Windows Phone 7. Although there are technical differences in using these two versions of the control, the basic API is the same. This allows faster creation of applications that need to run on different platforms: the PC and of course mobile devices.

To get started with Bing Maps, you will need to install several separate installation packages on top of Microsoft Visual Studio 2010. These include Windows Phone 7 tools, Silverlight 4 tools, and finally, the Bing Maps Silverlight Control. Although this requires some installation patience, the experience is smooth. The download links at the end of this article point you to the right direction.

The short code examples shown in this article allow you to center and zoom the map, change the view mode, and add pushpins. With some additional programming, you could add your own routes, images, and even video to the map to make it alive.

Happy map programming!


Bing Maps Interactive SDK
Bing Maps Silverlight Control v1.0.1 SDK download page
Microsoft Silverlight 4 Tools for Visual Studio 2010
Silverlight developer runtime
Windows Phone 7 Tools for Visual Studio 2010
Bing Maps Silverlight Control documentation

Related Articles

This article was originally published on Monday Dec 27th 2010
Mobile Site | Full Site