31 Days of Windows Phone | Day #20: Map Control

This post is Day #20 in a series called the 31 Days of Windows Phone.

Yesterday’s mammoth post was on Push Notifications, and getting data to the phone, even when your app isn’t running.  Today, we’re back to controls, and more specifically, the Map Control.  As geolocation becomes more and more prevalent in mobile applications, it’s increasingly important to be able to show our user where they are, and what’s relevant near them.

Using the Map Control

Part of your Toolbox in Visual Studio 2010, you just need to drop a new Map Control on your page.  When you do, you’ll also notice that you need to add another XML namespace into your page.


And here’s the default XAML that it used for my example (after I positioned it and sized it appropriately):

<map:Map Height="607" HorizontalAlignment="Left" Name="myMap" VerticalAlignment="Top" Width="456" />

Finally, a quick screen shot of the map in my application:


You’ll notice that in white text, it says “Invalid Credentials.  Sign up for a developer account.”  For the rest of this post, I am going to walk you through all of the different things we can do with this map control, including getting a valid developer API key.

Setting Up Your Developer Account

The first thing you should do, before building your mapping application, is to get a Bing Maps API key.  It’s a simple, free process, and it gets rid of that ugly white text from above.  To get one, head over to Bing Maps Portaland register.  Once you’ve done that, you need to create an API key.  Here’s what the form looks like:


When you fill this out, they will give you an API key that looks something like this:


(No, that’s not my API key.  I’ve changed many characters.  But it looks like what you should be looking for.)



Using the Credentials Provider

Now that you have an API key, we need to plug that in to our application.  If you’ve only got one map in your application, it’s perfectly fine to use it like this:

<map:Map CredentialsProvider="AsWlUnHEvLgHlLHaRqTZLslewv1QIdGppxOqyL-7He2jxyHvLAjutrcntemUih-w9">

If you’re going to be re-using this value over and over, you might want to save this value elsewhere, like your App.xaml file.  To do this, use the example below.  I’ve provided the code you’ll want to include in both your App.xaml file, as well as in your actual Map control.  We’re basically creating a static CredentialsProvider value in our App.xaml, and retrieving it on our page.


	<map:ApplicationIdCredentialsProvider ApplicationId="AsWlUnHEvLgHlLHaRqTZLslewv1QIdGppxOqyL-7He2jxyHvLAjutrcntemUih-w9" x:Key="BingMapsAPIKey"></map:ApplicationIdCredentialsProvider>

Map Control

<map:Map CredentialsProvider="{StaticResource BingMapsAPIKey}">



Changing the Map Control’s features

There are a whole host of options for changing the map’s look & feel.  For example, changing from Road to Aerial mode, or deciding whether to show the zoom level selector.  There is an incredible list of configurable options available to you, and they’re on the Bing Maps Silverlight Control Interactive SDK.  There’s no reason for me to cover ALL of the options outlined there (especially because they did an awesome job already), but because I’d rather focus on how you get your data on a map.  I’m going to focus on two things specifically:  adding a pushpin to a map, and adding custom shapes to a map.

Adding a Pushpin to the map

In C#, adding a pushpin to as simple as creating a new Pushpin object, setting its Location, and adding it to the map.  The same is true of doing it in XAML.  Obviously, XAML provides you some shortcuts, but neither example is very difficult.


<map:Pushpin Location="40.1449, -82.9754" FontSize="30" Background="Orange" Content="1" />


Pushpin pushpin = new Pushpin();
Location location = new Location();
location.Latitude = 40.1449;
location.Longitude = -82.9754;
pushpin.Location = location;
pushpin.Background = new SolidColorBrush(Colors.Orange);
pushpin.Content = "1";
pushpin.FontSize = 30;

The above example, in either case, will add a pushpin to my office, found at 8800 Lyra Drive, Columbus, OH.  Here’s what it looks like in my application:


If you’re wondering how you can convert your address data to latitude/longitude, check out my post from the 31 Days of Silverlight.  It specifically covers Geocoding addresses, and is still exactly what you’re going to want to do in your phone application.

Adding Custom XAML to a map

Another little control we have in the Map assembly is the MapPolygon.  By supplying it with a list of Locations, it will draw a custom polygon shape on your Map, which stays in place even as the user scrolls and pans around the map.  It is tied to specific longitude and latitude values, making it very easy to delineate countries, states, regions, or even parking lots, if that’s what your app is for.  Here’s how to do it:


<map:MapPolygon Fill="Purple" Stroke="White" Opacity=".7" Locations="40.1449,-82.9754 40.1449,-12.9754 10.1449,-82.9754" />


MapPolygon mapPolygon = new MapPolygon();
mapPolygon.Fill = new SolidColorBrush(Colors.Purple);
mapPolygon.Stroke = new SolidColorBrush(Colors.White);
mapPolygon.Opacity = .7;
LocationCollection locations = new LocationCollection();
Location location = new Location();
location.Latitude = 40.1449;
location.Longitude = -82.9754;
Location location1 = new Location();
location1.Latitude = 40.1449;
location1.Longitude = -12.9754;
Location location2 = new Location();
location1.Latitude = 10.1449;
location1.Longitude = -82.9754;
mapPolygon.Locations = locations;


So there you have it.  We’ve now added a Pushpin and a custom polygon overlay to our map.  Make sure to check the Bing Maps Silverlight Control Interactive SDKfor tons more you can do with this awesome control.  (Screenshot of the MapPolygon is below.)


Download the Code

In this sample code, you’ll find examples for adding a pushpin as well as a polygonal shape to your map in both XAML and C#.  You don’t need both, so pick one or the other, depending on your needs.


9 thoughts on “31 Days of Windows Phone | Day #20: Map Control

  1. Is there a way to make a search function on a bing map of the WindowPhone7?I have put the bing map on to the WP7, and have ploted the long and lantitude of the places that i want, how can i do a search function base on that map and when i type a name of the place that i have ploted on the map, it will zoom in and notify me that particular place on the map?

  2. Does anyone knows how to configure Map control to render a custom TileSource with custom made map tiles stored locally as "Content" files or in IsolateStorage for offline usage.
    (anyone care for some reputation points? – http://stackoverflow.com/q/4386391/234592)


  3. Every burned book or house enlightens the world every suppressed or expunged word reverberates through the earth from side to side.

  4. He is richest who is content with the least, for content is the wealth of nature.

  5. Rather fail with honor than succeed by fraud.

  6. It is an error to imagine that evolution signifies a constant tendency to increased perfection. That process undoubtedly involves a constant remodelling of the organism in adaptation to new conditions but it depends on the nature of those conditions whether the directions of the modifications effected shall be upward or downward.

  7. When it is darkest, men see the stars.

  8. At the shrine of friendship never say die, let the wine of friendship never run dry. (Les Miserables)

  9. Hey Jeff, Thanks for the the great training! I am really excited about the development opportunities available. Looking forward to completing numerous projects. Will keep in contact. Thanks again!

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