Drawing Route Path using REST API in Bing Map for Windows Store App (XAML)


In this article we would see how we could draw a Route Path between two points in Bing Map. The two points are referred to as Source Location and Destination Location.

This article is a continuation of the previous articles, to catch up with previous posts you could respective link as follows:

1. Bing Map for Windows Store Apps

2. Starting Bing Map for Windows Store App (XAML)

3. Enabling Location Capability with Bing Map in Windows Store App (XAML)

4. Custom Pushpin in Bing Map for Windows Store App (XAML)

5. Get Address by Location in Bing Map in Windows Store App (XAML)

Designing the Interface

We would basically have a Bing Map control, two buttons. The two buttons would help us tracking locations of source and destination and drawing the path.

The design I have come up with is very simple, which looks like the following.

Getting Started

As mentioned above the article posts would help you get started, to start this sample application in this post; we would start by adding a default pushpin to the Bing map.

Identifying Last Tapped Location

We would be subscribing to the Tapped event of Bing map, which could be useful here for identifying the last location clicked/tapped by the user.

When a user taps/clicks on the Bing map, the pushpin would be Red in color, which would initially determine any point but after drawing a path it would represent a destination point.

Of course you can change your own color instead of Red.

Consider the above as the starting location.

Adding Source and Destination Points

We would have a view model of the view, which would have the following properties that we would update. Such as:

While adding source and destination points or locations, we would update the StartCoordinate and EndCoordinate properties.

You are seeing an implementation where StartCoordinate is updated, which is almost similar for EndCoordinate.

The difference is, we are validating for the Source Location and if validated we are drawing the Path on Bing Map.

Drawing Path

Drawing a path on the Bing map could be achieved by using MapPolyline control. As Bing map has a REST API, which could provide us the locations collection to draw the MapPolyline correctly on Bing map surface.

The following method helps us to drawing the path.

As you see in the above line of code, we are doing things step by step such as:

1. Building the Bing Map REST API URL

2. Making a Service Call

3. On success, De-serializing the response.

4. Adding Source and Destination Location Pushpins.

5. Drawing MapPolyline

6. If failed, displaying error message.

The output that we are looking for are as follows:

And while it’s loading the data.

Note that, if you are trying to draw path across countries, that doesn’t have an active route would give you error messages.

Hope this article helps, thanks for reading.

Download Full Source Code: Click Here