Today we continue our exploration through the 31 Days of Silverlight with something new. We now have the ability to add a Bing Maps control to our Silverlight application. There’s some downloading and installation necessary, so let’s start there.

1. Get the Bing Maps Silverlight Control SDK

It sounds as simple as it is. You can download and install the Bing Maps Silverlight Control SDK here. Once you’ve installed it, jump to the next step.

2. Get a Bing Maps API key

Next, you need to head over to http://www.bingmapsportal.com. Log in with your Live ID, and create a key. You’ll need this to build your application, so even though you’re thinking about skipping this step, don’t. Go get it.

3. Create a new Silverlight project

This is Day #30 of my Silverlight series, so I’m going to assume at this point that you know how to do this.

4. Add the Map .dll references

When you installed the SDK, it dropped two DLLs on your hard drive. If you left the default path during installation, you should be able to find them here: C:Program FilesBing Maps Silverlight ControlV1Libraries. We’re almost ready to add a map to our page.

5. Add the namespace declaration

The final “prep” step we need to take is to add the XML namespace to the top of our XAML file. We have done this in previous projects, so I’ll just show you what you need to add:

xmlns:bing="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl"

6. Adding a map to your page

To take it very simply, we can add one line of XAML to get a map on our page. In fact, here’s what it looks like:

<bing:Map CredentialsProvider="put your api key here" />

And here’s what the control looks like (see this in a new window):

7. Customize away

There’s an absolutely crazy amount of stuff you can do to customize these maps. I’m going to show you a couple of the simple ones, saving some cooler stuff for the next post. Specifically, how to have it start on a specific location, and how to add points to a map.

8. Defining a starting position

The simple way to do this is just to add a latitude/longitude value directly to at map’s Center property. You can do this via the codebehind, or directly in your XAML. Like this:

themap.Center = new Location(40.1449, -82.9754);

themap.ZoomLevel = 15;

OR

<bing:Map Name="themap" Center="40.1449, -82.9754" ZoomLevel="15" CredentialsProvider="your api key"  />

You’ll notice that I also set the ZoomLevel in both examples, so that we were zoomed in near the location we centered on. That’s pretty simple, but it doesn’t show the user the location we were trying to call their attention to. Next, we’ll actually put a pushpin on the map.

9. Adding a pushpin to the map

There’s actually a Pushpin class, which is convenient, especially when we need to have collections of pushpins. I have named my map “themap” for this example. Also, you’ll notice that I have moved my latitude/longitude values into a seperate Location object. This way, I can reference that location multiple times, without having to continue to hardcode the coordinates.

What you will see in the following code is that after setting the center of my map (and its zoom level), I create a new Pushpin, set its location, and then add it as a Child to my map. Here’s the code:

            Location myOffice = new Location(40.1449, -82.9754);
            themap.Center = myOffice;
            themap.ZoomLevel = 15;
            Pushpin myOfficePin = new Pushpin();
            myOfficePin.Location = myOffice;
            themap.Children.Add(myOfficePin);

And here’s how it looks on the map (see this in a new window):

To download this Bing Maps Silverlight solution, click here.

Summary

Tomorrow, on our final day of this series, we’ll be diving deeper into this mapping control, geocoding (turning an address into latitude/longitude), and directions from one point to another. See you then!