Setting the map view for Windows Phone
[This documentation is preliminary and is subject to change.]
July 06, 2012
Applies to: Windows Phone 8 Developer Preview | Windows Phone OS 7.1
This topic describes how to set the map view of the Bing Maps Silverlight Control for Windows Phone.
This topic contains the following sections.
- Introducing the SetView Method
- Set the Initial Map View
- Set the Best Map View
Introducing the SetView Method
The Bing Maps Silverlight Control for Windows Phone provides the same API for setting the map view that is available in the desktop version of the control. This API takes several forms:
SetView(LocationRect)
SetView(GeoCoordinate, Double)
SetView(GeoCoordinate, Double, Double)
For more information about map views, see Understanding Map Views.
Set the Initial Map View
The simplest way to set the map view is to provide a center point and zoom level. The code below centers the map on a specified coordinate and then zooms the map in to that center location. It also loads the Aerial map view.
<phone:PhoneApplicationPage
x:Class="WindowsPhoneApplication1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"></Grid>
</Grid>
</phone:PhoneApplicationPage>
using System.Windows;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Controls.Maps;
using System.Device.Location;
namespace WindowsPhoneApplication1
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
Map map = new Map();
map.CredentialsProvider = new ApplicationIdCredentialsProvider("Bing Maps Key");
// Set the center coordinate and zoom level
GeoCoordinate mapCenter = new GeoCoordinate(47.6205, -122.349);
int zoom = 15;
// Create a pushpin to put at the center of the view
Pushpin pin1 = new Pushpin();
pin1.Location = mapCenter;
pin1.Content = "Space Needle";
map.Children.Add(pin1);
// Set the map style to Aerial
map.Mode = new Microsoft.Phone.Controls.Maps.AerialMode();
// Set the view and put the map on the page
map.SetView(mapCenter, zoom);
ContentPanel.Children.Add(map);
}
}
}
Set the Best Map View
If you have a set of items on the map and need to show the best map view of them, create a LocationRect of the locations, which are of type GeoCoordinate, and then set the view based on this rectangle. The code below adds four pushpins to the map and then sets a map view that best displays them all.
<phone:PhoneApplicationPage
x:Class="WindowsPhoneApplication1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True" xmlns:my="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="Bing Maps Silverlight Control Sample" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="Bing Maps" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<my:Map Height="421" HorizontalAlignment="Left" Margin="9,20,0,0" Name="map1" VerticalAlignment="Top" Width="441" CredentialsProvider="Bing Maps Key"/>
<Button Content="Add pins and set view" Height="72" HorizontalAlignment="Left" Margin="69,483,0,0" Name="button1" VerticalAlignment="Top" Width="327" Click="button1_Click" />
</Grid>
</Grid>
</phone:PhoneApplicationPage>
using System.Windows;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Controls.Maps;
using System.Device.Location;
namespace WindowsPhoneApplication1
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
}
private void button1_Click(object sender, RoutedEventArgs e)
{
// First add some pushpins.
Pushpin pin1 = new Pushpin();
pin1.Location = new GeoCoordinate(40.0, -121.0);
pin1.Content = "1";
map1.Children.Add(pin1);
Pushpin pin2 = new Pushpin();
pin2.Location = new GeoCoordinate(40.1, -121.0);
pin2.Content = "2";
map1.Children.Add(pin2);
Pushpin pin3 = new Pushpin();
pin3.Location = new GeoCoordinate(40.2, -121.0);
pin3.Content = "3";
map1.Children.Add(pin3);
Pushpin pin4 = new Pushpin();
pin4.Location = new GeoCoordinate(40.3, -121.0);
pin4.Content = "4";
map1.Children.Add(pin4);
// Now set the view based on the pushpins.
map1.SetView(LocationRect.CreateLocationRect(pin1.Location, pin2.Location, pin3.Location, pin4.Location));
}
}
}