Understanding Map Views
When working with Bing Maps WPF Control, a user may want to change the map view.
Map View Modes
The Bing Maps WPF Control has three map view modes: Aerial, AerialWithLabels and Road. Road imagery is display by default. Use the Mode property to set the map view mode.
<m:Map x:Name="myMap" Mode="AerialWithLabels" CredentialsProvider="INSERT_YOUR_BING_MAPS_KEY" />
Defining View Change Behavior
By default the Bing Maps WPF Control 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: The Center property represents the center point of a map view and is defined by a Location coordinate.
Zoom Level: The ZoomLevel 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: The Heading property specifies the directional heading that is pointing “up” on the map. The heading is a value between 0 and 360 that specifies 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.
Example
The following example changes the center location on the map by clicking a button. This is a simple example that demonstrates how the Bing Maps WPF 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. You can also change the animation of the transition by selecting the desired value from the drop-down menu.
.jpeg "Rendered map view for example")
<Window x:Class="WPFTestApplication.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.WPF;assembly=Microsoft.Maps.MapControl.WPF"
Width="1024" Height="768">
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="40" />
<RowDefinition Height="20" />
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<m:Map x:Name="myMap" CredentialsProvider="<strong>INSERT_YOUR_BING_MAPS_KEY</strong>"
Grid.Column="0" Grid.Row="0" Grid.RowSpan="3" Padding="5"
Center="39.3683,-95.2734,0.0000" ZoomLevel="4.000" AnimationLevel="None" Mode="AerialWithLabels"/>
<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>
<ComboBox SelectionChanged="AnimationLevel_SelectionChanged" SelectedIndex="1" Margin="10" Height="20">
<ComboBoxItem Content="None" />
<ComboBoxItem Content="Full" />
</ComboBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Opacity="0.9" Grid.Column="0" Grid.Row="2" HorizontalAlignment="Center">
</StackPanel>
<StackPanel Orientation="Horizontal" Opacity="0.9" Grid.Column="0" Grid.Row="3" 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>
</Window>
using System;
using System.Windows;
using System.Windows.Controls;
using System.Globalization;
using Microsoft.Maps.MapControl.WPF;
using Microsoft.Maps.MapControl.WPF.Design;
namespace WPFTestApplication
{
public partial class SwitchMapViews : Window
{
LocationConverter locConverter = new LocationConverter();
public SwitchMapViews()
{
InitializeComponent();
//Set focus on the map
myMap.Focus();
// Displays the current latitude and longitude as the map animates.
myMap.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
myMap.SetView(center, zoom);
}
private void AnimationLevel_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
ComboBoxItem cbi = (ComboBoxItem)(((ComboBox)sender).SelectedItem);
string v = cbi.Content as string;
if (!string.IsNullOrEmpty(v) && myMap != null)
{
AnimationLevel newLevel = (AnimationLevel)Enum.Parse(typeof(AnimationLevel), v, true);
myMap.AnimationLevel = newLevel;
}
}
}
}
Imports System
Imports System.Windows
Imports System.Windows.Controls
Imports System.Globalization
Imports Microsoft.Maps.MapControl.WPF
Imports Microsoft.Maps.MapControl.WPF.Design
Namespace WPFTestApplication
Partial Public Class SwitchMapViews
Inherits Window
Private locConverter As New LocationConverter()
Public Sub New()
InitializeComponent()
' Displays the current latitude and longitude as the map animates.
AddHandler myMap.ViewChangeOnFrame, AddressOf viewMap_ViewChangeOnFrame
' The default animation level: navigate between different map locations.
'viewMap.AnimationLevel = AnimationLevel.Full;
End Sub
Private Sub viewMap_ViewChangeOnFrame(ByVal sender As Object, ByVal e As MapEventArgs)
' Gets the map object that raised this event.
Dim map As 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 As Location = 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() As String = (CType(sender, Button)).Tag.ToString().Split(" "c)
Dim center As Location = CType(locConverter.ConvertFrom(tagInfo(0)), Location)
Dim zoom As Double = System.Convert.ToDouble(tagInfo(1))
' Set the map view
myMap.SetView(center, zoom)
End Sub
Private Sub AnimationLevel_SelectionChanged(ByVal sender As Object, ByVal e As SelectionChangedEventArgs)
Dim cbi As ComboBoxItem = CType((CType(sender, ComboBox)).SelectedItem, ComboBoxItem)
Dim v As String = TryCast(cbi.Content, String)
If (Not String.IsNullOrEmpty(v)) AndAlso myMap IsNot Nothing Then
Dim newLevel As AnimationLevel = CType(System.Enum.Parse(GetType(AnimationLevel), v, True), AnimationLevel)
myMap.AnimationLevel = newLevel
End If
End Sub
End Class
End Namespace