Understanding Map Views

This documentation is no longer available on MSDN, however it is available as a CHM download.

When working with the Bing Maps Silverlight Control, the first thing your users will likely do is to try to change the map view using an input device or the navigation control.

Defining View Change Behavior

By default the Silverlight map control animates all movements, which means that map view changes are smooth. However, you can use the AnimationLevel property of the map to set the behavior of view changes. The available animation settings are found in the AnimationLevel enumeration. Fully animated view changes are the default. If the animation level is set to None, then the map snaps to a new view instead of animating the view change.

Setting the Map View

A new map view is defined any time the position of the map is changed by panning, zooming, rotating, or tilting. The SetView method is used to define a map view, which can include the center point of the view, zoom level, heading, and pitch.

• Center: This property represents the center point of a map view and is defined by a Location coordinate.

• Zoom Level: This property represents different levels of detail available on the map. The maximum level of available detail is determined by the location you are zooming into; some areas can be zoomed in further than other areas. Higher zoom levels represent more zoomed in views of the map, while a zoom level of 1 is the most zoomed out view of the entire world.

• Heading: This property specifies the directional heading that is pointing “up” on the map. It is represented by a value between 0 and 360, indicating the number of degrees to rotate the map. For example, if the heading was changed from 0 to 180, the map is rotated 180 degrees and the resulting map has South facing “up” on the map instead of North. The diagram below illustrates heading.

  

• Pitch: This property specifies the “look direction” of the map. It is represented by a value between -90 and 90, indicating the number of degrees to tilt the map. The diagram below illustrates pitch.

  

Example

The following example navigates to different locations on the map by clicking a button. This is a simple example that demonstrates how the Bing Maps Silverlight Control animates between different map views. It navigates between these locations: Vancouver, Canada, New York, Los Angeles and North America. As the map moves from location to location, the center point of the current frame’s map view is updated in the Latitude and Longitude text boxes.

A Map View

<UserControl x:Class="SilverlightTest1.SwitchMapViews"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:m="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl"
    Width="1024" Height="768">
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="40" />
      <RowDefinition Height="20" />
        </Grid.RowDefinitions>
        <m:Map x:Name="viewMap" CredentialsProvider="your key" Mode="AerialWithLabels"  Grid.Column="0" Grid.Row="0" Grid.RowSpan="3" Padding="5"
               Center="39.3683,-95.2734,0.0000" ZoomLevel="4.000"/>
        <StackPanel Orientation="Horizontal" Opacity="0.7" Grid.Column="0" Grid.Row="1" HorizontalAlignment="Center">
            <Button x:Name="btnNorthAmerica" Click="ChangeMapView_Click" Tag="39.3683,-95.2734,0.0000 4.0000"
                     Margin="5">
                <TextBlock>North America</TextBlock>
            </Button>
            <Button x:Name="btnNewYork" Click="ChangeMapView_Click" Tag="40.7199,-74.0030,0.0000 12.0000" Margin="5">
                <TextBlock>New York</TextBlock>
            </Button>
            <Button x:Name="btnSanFrancisco" Click="ChangeMapView_Click" Tag="37.6801,-122.3395,0.0000 11.0000" Margin="5">
                <TextBlock>San Francisco</TextBlock>
            </Button>
            <Button x:Name="btnVancouver" Click="ChangeMapView_Click" Tag="49.2765,-123.1030,0.0000 14.0000" Margin="5">
                <TextBlock>Vancouver</TextBlock>
            </Button>
        </StackPanel>
        <StackPanel Orientation="Horizontal" Opacity="0.9" Grid.Column="0" Grid.Row="2" HorizontalAlignment="Center">
            <TextBlock Text="Latitude: " Padding="5" Foreground="White"/>
            <TextBox x:Name="txtLatitude" Text="" IsReadOnly="True" Background="LightGray"/>
            <TextBlock Text="Longitude: " Padding="5" Foreground="White" />
            <TextBox x:Name="txtLongitude" Text="" IsReadOnly="True" Background="LightGray"/>
        </StackPanel>
    </Grid>
</UserControl>
    

using System;
using System.Windows;
using System.Windows.Controls;
using System.Globalization;
using Microsoft.Maps.MapControl;
using Microsoft.Maps.MapControl.Design;

namespace SilverlightTest1
{
    public partial class SwitchMapViews : UserControl
    {
        LocationConverter locConverter = new LocationConverter();
        
        public SwitchMapViews()
        {
            InitializeComponent();

            // Displays the current latitude and longitude as the map animates.
            viewMap.ViewChangeOnFrame += new EventHandler<MapEventArgs>(viewMap_ViewChangeOnFrame);
            // The default animation level: navigate between different map locations.
            viewMap.AnimationLevel = AnimationLevel.Full;
        }

        private void viewMap_ViewChangeOnFrame(object sender, MapEventArgs e)
        {
            // Gets the map object that raised this event.
            Map map = sender as Map;
            // Determine if we have a valid map object.
            if (map != null)
            {
                // Gets the center of the current map view for this particular frame.
                Location mapCenter = map.Center;

                // Updates the latitude and longitude values, in real time,
                // as the map animates to the new location.
                txtLatitude.Text = string.Format(CultureInfo.InvariantCulture, 
                    "{0:F5}", mapCenter.Latitude);
                txtLongitude.Text = string.Format(CultureInfo.InvariantCulture, 
                    "{0:F5}", mapCenter.Longitude);
            }
        }

        private void ChangeMapView_Click(object sender, RoutedEventArgs e)
        {
            // Parse the information of the button's Tag property
            string[] tagInfo = ((Button)sender).Tag.ToString().Split(' ');
            Location  center = (Location)locConverter.ConvertFrom(tagInfo[0]);
            double zoom = System.Convert.ToDouble(tagInfo[1]);
            
            // Set the map view
            viewMap.SetView(center, zoom);

        }
    }
}
    

Imports System.Globalization
Imports Microsoft.Maps.MapControl
Imports Microsoft.Maps.MapControl.Design


    Partial Public Class SwitchMapViews
        Inherits UserControl
        Private locConverter As New LocationConverter()

        Public Sub New()
            InitializeComponent()

            ' The default animation level: navigate between different map locations.
            viewMap.AnimationLevel = AnimationLevel.Full
        End Sub

        ' Displays the current latitude and longitude as the map animates.
        Private Sub viewMap_ViewChangeOnFrame(ByVal sender As Object, ByVal e As MapEventArgs) _
            Handles viewMap.ViewChangeOnFrame

            ' Gets the map object that raised this event.
            Dim map = TryCast(sender, Map)
            ' Determine if we have a valid map object.
            If map IsNot Nothing Then
                ' Gets the center of the current map view for this particular frame.
                Dim mapCenter = map.Center

                ' Updates the latitude and longitude values, in real time,
                ' as the map animates to the new location.
                txtLatitude.Text = String.Format(CultureInfo.InvariantCulture, "{0:F5}", mapCenter.Latitude)
                txtLongitude.Text = String.Format(CultureInfo.InvariantCulture, "{0:F5}", mapCenter.Longitude)
            End If
        End Sub

        Private Sub ChangeMapView_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)

            ' Parse the information of the button's Tag property
            Dim tagInfo = Split(CType(sender, Button).Tag, " ")
            Dim center= CType(locConverter.ConvertFrom(tagInfo(0)), Location)
            Dim zoom = CDbl(tagInfo(1))

            ' Set the map view
            viewMap.SetView(center, zoom)
        End Sub
    End Class

    
 

See Also

Reference

MapCore
MapEventArgs