How to animate a Map! :)

The following example displays a map with default center and zoom level. When you click the Change button in the app bar, it displays a map with a new center and zoom level. When you click the Animate button, the map animates to a new center and zoom level.

This is the XAML code behind the animated map:

<!--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="Maps" Style="{StaticResource PhoneTextNormalStyle}"/>
      <TextBlock x:Name="PageTitle" Text="MapView" 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">
      <maps:Map x:Name="MyMap"  Center="13.0810, 80.2740" ZoomLevel="10"/>
   </Grid>
</Grid>

<!--Sample code showing usage of ApplicationBar-->
<phone:PhoneApplicationPage.ApplicationBar>
   <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
      <shell:ApplicationBarIconButton x:Name="BtnZoom"  IconUri="/Images/appbar_button2.png" Text="Change" Click="OnCenterZoom_Click"/>
      <shell:ApplicationBarIconButton x:Name="BtnCenter"  IconUri="/Images/appbar_button1.png" Text="Animate" Click="OnAnimate_Click"/>
   </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

While this is the C# code:

void OnCenterZoom_Click(object sender, EventArgs args)
{
   MyMap.Center = new GeoCoordinate(47.6097, -122.3331);
   MyMap.ZoomLevel = 18;
}

void OnAnimate_Click(object sender, EventArgs args)
{
   MyMap.SetView(new GeoCoordinate(47.6097, -122.3331), 15, MapAnimationKind.Parabolic);
}

 

Happy coding! 🙂

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...