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.
xmlns:map="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps"
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:
AsWlUnHEvLgHlLHaRqTZLslewv1QIdGppxOqyL-7He2jxyHvLAjutrcntemUih-w9
(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.
App.xaml
<Application.Resources> <map:ApplicationIdCredentialsProvider ApplicationId="AsWlUnHEvLgHlLHaRqTZLslewv1QIdGppxOqyL-7He2jxyHvLAjutrcntemUih-w9" x:Key="BingMapsAPIKey"></map:ApplicationIdCredentialsProvider> </Application.Resources>
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.
XAML
<map:Pushpin Location="40.1449, -82.9754" FontSize="30" Background="Orange" Content="1" />
C#
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; MapControl.Children.Add(pushpin);
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:
XAML
<map:MapPolygon Fill="Purple" Stroke="White" Opacity=".7" Locations="40.1449,-82.9754 40.1449,-12.9754 10.1449,-82.9754" />
C#
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; locations.Add(location); locations.Add(location1); locations.Add(location2); mapPolygon.Locations = locations; MapControl.Children.Add(mapPolygon);
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.
JEFF BLANKENBURG 
Leave a Reply