CTP: Getting Started with Bing Maps Silverlight CTP Map Control SDK

Mar 20, 2009  • Mapping  • Silverlight

UPDATE: I have written a newer version of this article to specifically target the latest Bing Maps Silverlight Control Version 1.0 Release.

You can find the new article here: Getting Started with Bing Maps Silverlight Control v1.0

It seems like forever since MIX’08 when a demo was shown of a new Silverlight-based Virtual Earth Map Control. Well, now FINALLY we actually have a version of the control to “play” around with. The reason I say “play” is because it’s still a CTP (Community Technology Preview). If you read the license file you’ll see that basically the most important points of Microsoft’s position on CTP’s are: 1) You can NOT use it in a production environment, and 2) It’s a Preview, so anything can change from now until the next release (CTP, Beta, whatever). Well, anyway…

I introduce you to the Virtual Earth Silverlight Map Control SDK CTP!

Before I dig into what’s needed to begin development, and show you how simple it is to use; here’s a few highlights of what’s so Awesome about the control.

Why is the Virtual Earth Silverlight Map Control so Awesome?!?

Here’s a few reason:

  • **Silverlight!** – Silverlight itself is truly a high point with this new control. You can now Plot/Overlay Rich Media Content (Images, Video, and any Silverlight/XAML content you can think of!) over the Map!
  • **Performance!** – If you’ve used the Virtual Earth JavaScript Map Control, then you must be familiar with the fact that the Map really starts to slow down when you try to plot something around 300+ Pushpins or a hand full of Polygons with 1000+ points each. With the new Silverlight control you can literally plot THOUSANDS of Pushpins on the Map and you wont render it useless like you would with the previous JavaScript control. Your limit is really only based on the Client Computer that is running the application, and I expect that it’ll probably improve a bit with Silverlight 3’s ability to utilize the local GPU.
  • **No More JavaScript or Browser Inconsistencies! – **You no longer need to worry or hassle yourself with JavaScript and making sure it runs/works as expected in all the different web browsers (Internet Explorer, Firefox, Safari, etc.) No you can manipulate the map using pure .NET code. Don’t fret if you need to integrate with existing JavaScript code; you can always use Silverlight’s HTML Bridge to interact back and forth as needed.
  • **Virtual Earth!** – And, last but not least, we can not forget that part of the Vast Awesomeness of this control is just due to the fact that it’s Virtual Earth Mapping!!

What’s Needed to Get Started?

Firstly, Download the Virtual Earth Silverlight Map Control SDK CTP from Microsoft Connect: http://connect.microsoft.com/silverlightmapcontrolctp

Note: At the time of posting this (3/20/2009 6:26PM CST) the CTP Download is currently down. You can still go to the Microsoft Connect website and Register, then you’ll be able to download the bits when they’re back up. The download issue has been fixed.

There is also a Virtual Earth Silverlight Map Control CTP Interactive SDK (in the same style of the Virtual Earth JavaScript control) here: https://sharepoint.connect.microsoft.com/silverlightmapcontrolctp/iSDK/default.htm

Secondly, you’ll need a couple Tools installed first:

  1. Visual Studio 2008 SP1 **–or-** Visual Web Developer 2008 Express with SP1
  2. Silverlight Tools for Visual Studio 2008 SP1

Of course you’ll also need to at least be familiar with the basics of Silverlight development. I’m referring to XAML for the most part, so if your familiar with WPF that should be enough to get you started.

For those Virtual Earth developers new to Silverlight; If you need help getting started with learning the basics of Silverlight development, here are some resources that will help:

Let’s Display a Map in Silverlight

Create a New Silverlight Application Project
  1. Run Visual Studio 2008 and create a New Project using the **Silverlight Application** template. CreateSilverlightApplicationProject
  2. In the “Add Silverlight Application” dialog box, select the “**Add a new ASP.NET Web project to the solution to host Silverlight**” option and click “OK”. You must select this option to create an ASP.NET Web Application Project or ASP.NET Website because the URL Access Restrictions in Silverlight require the page that hosts the Map control to be hosted using HTTP in order to load/access the Virtual Earth Map Tiles. AddNewASP.NETWebProject

Add a Reference to Microsoft.VirtualEarth.MapControl.dll

  1. Go to the “**Solution Explorer**” and Right-Click “**References**” in the Silverlight Project (not the ASP.NET Web Application Project), and Select “**Add Reference…**” VEJS_003_AddReferenceToMapControlDLL
  2. Within the “Add Reference” Dialog, Select the “**Browse**” tab and navigate to the folder where the SDK is installed, and select the “**Microsoft.VirtualEarth.MapControl.dll**”. *Note: By Default the SDK is installed in this folder “C:\Program Files (x86)\Microsoft Virtual Earth Silverlight Map Control\CTP\Libraries” VEJS_004_AddReferenceToMapControlDLL_SelectDLLFile *

Display a Virtual Earth Map

  1. Add a Namespace declaration to to Page.xaml for the Microsoft.VirtualEarth.MapControl namespace. To do this add the following to the tag: *xmlns:m="clr-namespace:Microsoft.VirtualEarth.MapControl;assembly=Microsoft.VirtualEarth.MapControl" *</li>
  2. Add the Map Control to Page by adding the following tag within the Grid in the Page: **
    3. </ol> The resulting Page.xaml will look like this: Now, when you run the application (press F5) you will see a fully interactive Virtual Earth Map displayed: VEJS_005_SimpleMapDisplayed ## Change/Set Map Properties Declaratively using XAML and Programatically using C# You can change/set the Map Control’s properties Declaratively using XAML and Programatically using C# (or any other .NET language). Below are examples using XAML and C#. **XAML:** You can change the Map Mode declaratively using XAML by just setting the “Mode” property. For Example, setting it to “Aerial” will change the Map Mode to AerialMapMode. **C#:** You can also change the Map Mode just as easily programatically using C#. Here’s the same example of setting the Map Mode to AerialMapMode within the Page constructor: using System.Windows.Controls; using Microsoft.VirtualEarth.MapControl; namespace VirtualEarthSilverlightApplication1 { public partial class Page : UserControl { public Page() { InitializeComponent(); Map1.Mode = new AerialMode(); } } } First, in order to access the Map Control programatically you’ll need to set it’s “Name” property within XAML; like the following: ## Conclusion I hope your as psyched about the new Virtual Earth Silverlight control as I am. I’m really looking forward to exploring all the capabilities of the new control; most of which just weren’t possible with the old JavaScript control. One downside is we’ll have to wait until a future release for a “Go Live” license, but until then I’m sure the guys on the Virtual Earth team will be making this control the absolute best it can be; after all it’s pretty darn awesome already. Keep an eye out, I’ll be posting more articles/tutorials to help you out in exploring this new control. ### Next Tutorial/Article: Basics of Adding Polygons and Polylines using XAML and Code