Adding Map Directions Task In Windows Phone 8

Introduction

This article explains the Maps Directions Task. We will see how to integrate the route info and navigation in our app using the Windows Navigation app. For that purpose we will use a Windows Phone task launcher. The good thing about this launcher is it's very simple to use and can be integrated into an app with just 4-5 lines of code. So let's start.

Maps Directions Task

This is a kind of launcher provided by Windows Phone to launch mobile navigation apps. This task expects two parameters to be set and on the basis of those parameters users can use navigation services from the app itself. 

Before using this task we need to include the following namespace:

using Microsoft.Phone.Tasks;

This task has the following properties that we can use:

• Start
  Sets the starting location for which driving directions are to be displayed.
   
• End
  Sets the ending location for which driving directions are to be displayed.
   

To use this task we need to set the preceding two properties properly. The start and end properties use a labeled map location type value.

Labeled Map Location

It is a class that represents a location coordinate with label. Label can be a place or business name and location is defined in terms of various geo coordinates.

Properties that we need to use from this class for Maps Direction Task are as follows:

• Label
  Sets the text label that identifies the associated geographical location. It can be business name, place or venue name.
   
• Location
  Sets the geographical location associated with labeled map location.  

Demo

Let's see how to use it on a contact us page of our app. Here our app page will help the user to drive to our office from its location.

XAML

<phone:PhoneApplicationPage

    x:Class="Demo.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"

    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 Text="Demo" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>

            <TextBlock  Text="Demo" Margin="9,-7,0,0" FontSize="40" />

        </StackPanel>

 

        <!--ContentPanel - place additional content here-->

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

            <StackPanel Orientation="Vertical">

                <TextBlock Text="Contact US" FontSize="45" Height="106"></TextBlock>

                <TextBlock Text="Some Address Goes Here" FontSize="30" Height="106"></TextBlock>

                <Button Name="sendBtn" Click="sendBtn_Click"  Content="View Route" HorizontalAlignment="Left" Width="186" Height="80" VerticalAlignment="Bottom" Margin="132,0,0,0"/>

            </StackPanel>

        </Grid>

    </Grid>

</phone:PhoneApplicationPage>

C# Code Behind

using Microsoft.Phone.Controls;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Diagnostics;

using Microsoft.Phone.Tasks;

using System.Windows.Media;

 

namespace Demo

{

    public partial class MainPage : PhoneApplicationPage

    {

        // Constructor

        public MainPage()

        {

            InitializeComponent();

        }

 

        private void sendBtn_Click(object sender, RoutedEventArgs e)

        {

            /* Step 1 */

            Microsoft.Phone.Tasks.MapsDirectionsTask mdt = new MapsDirectionsTask();

            /* Step 2 */

            LabeledMapLocation LMLD = new LabeledMapLocation();

            LMLD.Label = "taj mahal";

            LMLD.Location = new System.Device.Location.GeoCoordinate(27.173147600000000000, 78.042068500000030000);

            mdt.End = LMLD;

//            mdt.Start  Leave it to default, i.e to user current location.

            /* Step 3 */

            mdt.Show(); 

        }

    }

}

The Show method is used to launch the task.

Output