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: http://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.
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 http://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.
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).
To add the map control first add a namespace reference and then call the Map control in XAML.
xmlns:ve="clr-namespace:Microsoft.VirtualEarth.MapControl;assembly=Microsoft.VirtualEarth.MapControl"> <ve:Map x:Name="veMap" Mode="Aerial" ZoomLevel="1" />
Adding this will show the Virtual Earth map zoomed out to the maximum.
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.
Thank you for submitting this cool story - Trackback from DotNetShoutout
if you want to add the same minimap we used in our twitter map take a look at this tutorial: