Virtual Earth Silverlight Map Control (CTP), using Deep Zoom technology

  • Article

Talking to some colleagues the other day, I showed them a cool sample application that is available to show off the Silverlight VE Map control, which has been released in CTP mode at MIX09. The application uses Silverlight Deep Zoom technology to zoom into the location from a Twitter user and show it on the map. Check it out: https://earthware.cloudapp.net/demos/sltwittermap.aspx, it’s created by Earthware and hosted on Windows Azure.

This gave us the idea of offering our office visitors a cool way to locate the Microsoft Belgium office. That said, I put up a sample in a few minutes. I’m planning to add some functionality like adding route calculation, for which I’ll be using the Virtual Earth Web Services. In this post though, I’m using only the map control. It literally takes less than 30 minutes from downloading the CTP to getting the map on the Silverlight app.

Pre-requisites

Silverlight
You will need either Silverlight 2 or Silverlight 3 beta runtime, SDK and tools for Visual Studio. The Silverlight pre-requisities can be downloaded from https://silverlight.net/getstarted/

Virtual Earth Silverlight Map Control CTP
In order to get access to the VE Silverlight CTP you need to go to the Microsoft Connect site, login or sign-up, fill in the survey and then you will get access to the downloads section.

Adding the map control to the Silverlight application

First we need to create a new Silverlight project in Visual Studio. In that project, make sure to add a reference to the Microsoft.VirtualEarth.MapControl.dll (found in the install directory you chose for the VE Silverlight map control).

image

To add the map control first add a namespace reference and then call the Map control in XAML.

 <UserControl
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:ve="clr-namespace:Microsoft.VirtualEarth.MapControl;
assembly=Microsoft.VirtualEarth.MapControl">
    <ve:Map x:Name="veMap" Mode="Aerial" ZoomLevel="1" />
</UserControl>

Adding this will show the Virtual Earth map zoomed out to the maximum.

image 

Zooming in to a location

To zoom in to a location I got the longitude and latitude and pass that on to the map. At the same time I’m switching from Aerial to Road mode. The user can still use the default map controls to go back to Aerial mode. In this case I’m zooming in to the location of the MS Belgium office.

 private void NavigateHome(int zoom)
{

      Location homeLongLat = new Location(50.890995015145464, 4.45862411989244);
     veMap.Mode = new RoadMode();
     veMap.View = new MapViewSpecification(homeLongLat, zoom);
}

This will zoom in into the Belgium office location.

image

image 

Further reading