Virtual Earth Silverlight Map Control CTP: Setting the Map Mode and View
In a previous post, I showed you how to get started and create the simple “Hello World” sample using the Virtual Earth Silverlight Map Control CTP. Notice in that sample, the map by default shows the “Road” map. The navigation control at the top left of the map lets users manually change the Map to other map styles by clicking on Aerial and toggling Labels. Also, by default, the user can navigate the map to change the map view with input devices by using the mouse wheel and clicking and dragging the map.
The Virtual Earth Silverlight Map Control also allows you to programmatically control the map mode and the map view which allows you to put the Map in a known state when it initializes. In the Virtual Earth Ajax JavaScript Map Control, map modes were referred to as “map styles”. To set the initial map mode, you can use the Mode property of the Map. There are 3 supported Map Modes in the CTP: Road, Aerial, and AerialWithLabels.
Here’s example XAML code to set the Map Mode to Aerial:
<m:Map Mode=”Aerial” />
Here’s example XAML code to set the Map Mode to Aerial with labels turned on (known as Hybrid map style in the Ajax map control):
<m:Map Mode=”AerialWithLabels” />
Here’s example XAML code to set the Map Mode to Road:
<m:Map Mode=”Road” />
Also, the Mode XAML property uses a type converter so you can set it with a string in the XAML. If you want to set the MapMode in the code behind file, you can do this by setting the Mode property to an instance of the MapMode class. For example:
map.Mode = new RoadMode(); // Set the Mode to “Road”
map.Mode = new AerialMode(); // Set the Mode to “Aerial”
map.Mode = new AerialWithLabelsMode(); //Set the Mode to “AerialWithLabels”
In addition to setting the Map Mode, you can also set the Center and ZoomLevel properties on the Map to control the initial Map view. The Center property is of type Location which lets you specify the Latitude and Longitude of the Map center point. The ZoomLevel is a double and lets you specify the level of detail of the Map View. Notice in the Javascript Ajax Map Control the zoom level was an integer, however in Silverlight it is a double, so you can have in-between floating point zoom levels.
For example, the following XAML will initially put the Map in Aerial Mode with labels and set the center and zoom level over San Francisco:
<m:Map Mode=”AerialWithLabels” Center=”37.806029, –122.407007” ZoomLevel=”16” />
Here’s the sample running:
Virtual Earth Silverlight Map Control CTP: Set Initial View Sample
Here’s the complete listing of the XAML code from the sample:
<UserControl x:Class="SilverlightApplication1.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:m="clr-namespace:Microsoft.VirtualEarth.MapControl;assembly=Microsoft.VirtualEarth.MapControl">
<Grid x:Name="LayoutRoot" Background="White">
<m:Map Mode="AerialWithLabels" Center="37.806029, -122.407007" ZoomLevel="16"/>
</Grid>
</UserControl>
You can also programmatically set the Center and ZoomLevel in the code behind file. For example:
map.Center = new Location(37.806029, –122.407007);
map.ZoomLevel = 16;
There are also some additional SetView methods which allow you to set the view without using the properties directly. For more information, see the Virtual Earth Silverlight Map Control CTP Interactive SDK.
(Note: this post is also available at the Virtual Earth Platform Team Blog)
