Get Directions with Bing Maps using Geocordinates.

With Bing Map API, you can easily get the directions to some place. You only need to know  the start location and end location. If this start location is not specified, your current location is treated as the start.

In this tutorial we use Bing Maps Directions Task which is one of the many launchers bundled with Windows Phone7 Mango series. Hopefully, they make developer's life easy. They are really useful when integrate social sharing features to your applicaton. Otherwise you need to deal with OAth protocol for a considerable amount of time. You do not need to touch those dirty ...
Enough  pep talk. Let's get started.

You have two options to enter location details either by text based or geocordinates which are in latitude and longitude format. These two methods are demonstrated below.

Text based location

[sourcecode language="csharp"]
BingMapsDirectionsTask bmDirectionTask = new BingMapsDirectionsTask();
LabeledMapLocation start = new LabeledMapLocation("Sydney", null);
LabeledMapLocation end = new LabeledMapLocation("Perth", null);
bmDirectionTask.Start = start;
bmDirectionTask.End = end;
bmDirectionTask.Show();
[/sourcecode]

Based on geocordinates

[sourcecode language="csharp"]
BingMapsDirectionsTask bingMapsDirectionsTask = new BingMapsDirectionsTask();

GeoCoordinate userLocation = new GeoCoordinate(33.8683,151.2086);
LabeledMapLocation start = new LabeledMapLocation("From", userLocation);
bingMapsDirectionsTask.Start = start;

GeoCoordinate placeLocation = new GeoCoordinate();
LabeledMapLocation end = new LabeledMapLocation(31.9554,115.8585);
bingMapsDirectionsTask.End = end;

bingMapsDirectionsTask.Show();
[/sourcecode]

Customized PushPin on bing Map

This tutorial demonstrates how to create a pushpin from a specified image.



First add your image to the silverlight project.

Add the bing map control to the page.

[sourcecode language="xml"]
<my:Map x:Name="map" CredentialsProvider="YOUR_BING_MAP_API_KEY" Height="600" >
</my:Map>
[/sourcecode]

Define a control template inside the required page or inside App.xaml page. Things we declare in App.xaml are global. If you need to use bing map on several pages App.xaml is preferred. So we maintain code reusability.

For this example, I define control template in one of my inside page within PhoneApplicationPage.Resources section.

[sourcecode language="xml"]
<phone:PhoneApplicationPage.Resources>
<ControlTemplate x:Key="PushpinControlTemplate" TargetType="my:Pushpin">
<Image x:Name="pinImage" Height="64" Source="/Images/push_pin.png"/>
</ControlTemplate>
</phone:PhoneApplicationPage.Resources>
[/sourcecode]

Value of TargetType  attribute consists of your bing map control namespace which can be found in your xaml page. Here, it 's 'my'.

To display the pushpin add this code.
Here we should specify the relevant control template that we need.

[sourcecode language="csharp"]
Pushpin pin1 = new Pushpin();
pin1.Location = new GeoCoordinate(51.5171, 0.1062);
pin1.Template = (ControlTemplate)(this.Resources["PushpinControlTemplate"]);
map.Children.Add(pin1);
map.SetView(pin1.Location, 10);
[/sourcecode]

That 's it!

If you can not see the pushpin, set the Build Action of the image to Content and try.

Roundedc Corner Rectangles

[sourcecode language="xml"]
<Rectangle x:Name="rec_1" Width="100" Height="100" RadiusX="20" RadiusY="20" Fill="Blue" />
[/sourcecode]

RadiusX determines the radius of the corners on the x-axis and RadiusY determines the radius of the corners on the y-axis.