In this article we are going to see how to change to different cartographic modes of the Map control in Windows phone application development. Cartographic modes have 4 different modes which are used to define and display the different translation of the map control. To get some basics about maps please refer to my previous article on How to use Maps in Windows Phone application. Map control has the property called CartographicMode which is used to specify the type of mode which we can use to display the maps real time. The 4 different Cartographic mode include Road, Aerial, Hybrid, Terrain which can be changed accordingly as required in the application. Let us see the steps on how to achieve this task in our Windows Phone application development. Open Visual Studio 2012 IDE and create a new Windows Phone project with a valid project name as shown in the screen below.     [more]

Clicking on OK will create the project and the solution with the list of default files and folders that are required to run the application. It will take some time to create these files based on your system configuration, so once everything is ready we can see the Visual Studio IDE with the project as shown in the screen below.

Let us add some controls to shift between different modes to change the map accordingly, we will add few buttons and the map control from the toolbox as shown in the code below.

XAML Code:

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="F5debug How to Series" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="Cartographic" 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">
            <Button Content="Road" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Click="Button_Click"/>
            <Button Content="Aerial" HorizontalAlignment="Left" Margin="107,10,0,0" VerticalAlignment="Top" Click="Button_Click_1"/>
            <Button Content="Hybrid" HorizontalAlignment="Left" Margin="213,10,0,0" VerticalAlignment="Top" Click="Button_Click_2"/>
            <Button Content="Terrain" HorizontalAlignment="Left" Margin="326,10,0,0" VerticalAlignment="Top" Click="Button_Click_3"/>

            <maps:Map HorizontalAlignment="Left" Margin="29,87,0,0" VerticalAlignment="Top" Height="494" Width="404"/>

        </Grid>

In each of the button click event write the below code, where we will assign the appropriate mode to activate the maps cartographic mode selected. In Map control we have the property called MapCartographic mode that will be used as shown in the code below.

C# Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
using F5debugHowto72.Resources;
using Microsoft.Phone.Maps.Controls;

namespace F5debugHowto72
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();

            mymaps.Center = new System.Device.Location.GeoCoordinate(47.6097, -122.3331);
            mymaps.ZoomLevel = 15;
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            mymaps.CartographicMode = MapCartographicMode.Road;
        }

        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            mymaps.CartographicMode = MapCartographicMode.Aerial;
        }

        private void Button_Click_2(object sender, RoutedEventArgs e)
        {
            mymaps.CartographicMode = MapCartographicMode.Hybrid;
        }

        private void Button_Click_3(object sender, RoutedEventArgs e)
        {
            mymaps.CartographicMode = MapCartographicMode.Terrain;
        }
    }
}

Now we are done with the code, just run the application by pressing F5 directly from the keyboard or we can use the Build and execute the project option from the tool bar to run the application. Once the Build is successful we can see the Windows Phone emulator with the application and the expected outputs as shown in the screen below.