Mobile devices are becoming more and more connected to the internet. That's encourage developers to develop applications that uses this advantage. Web services are on the top of these apps. Nowadays, web services are a must known technology for every developer.
As it is a Windows Phone Application, you will need to have Visual Studio for Windows Phone Express installed or Visual Studio 2010, which you can download them from
https://dev.windowsphone.com/en-us/downloadsdk and http://www.microsoft.com/visualstudio/en-us/try.
About this application
This app is gonna use Bing Maps to show the route between two points on the map and display it's lenght. As I will focus more on the web service, you could find Bing Maps and Bing Maps v2 helpful to start manipulating Bing Maps. Bing Maps in Windows Phone is simple article to start with.
Assuming that you have drop and dragged the Map control from the Toolbox to the main page and had inserted the following code related to the ApplicationBar:
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" Opacity="0.9">
<shell:ApplicationBarIconButton IconUri="/Icons/plus.png" Text="Zoom In" Click="zoomIn_click"/>
<shell:ApplicationBarIconButton IconUri="/Icons/minus.png" Text="Zoom out" Click="zoomOut_click"/>
<shell:ApplicationBarIconButton IconUri="/Icons/A.png" Text="Aerial mode" Click="Aerial_click"/>
<shell:ApplicationBarIconButton IconUri="/Icons/R.png" Text="Road mode" Click="Road_click"/>
<shell:ApplicationBarMenuItem Text="Choose my position" Click="chooseMyPosition_click"/>
<shell:ApplicationBarMenuItem Text="Locate Me" Click="locateMe_click"/>
<shell:ApplicationBarMenuItem Text="Set Pushpin" Click="setPin_click"/>
<shell:ApplicationBarMenuItem Text="Add Pushpin" Click="addPin_click"/>
<shell:ApplicationBarMenuItem Text="Show Route" Click="showRoute_click"/>
Let's add these
using statements to use the Maps features:
After that we wil be able to write this code:
Pushpin pin1 = new Pushpin();
Pushpin pin2 = new Pushpin();
MapPolyline poly = new MapPolyline();
Some initialization are required to display the Polyline in the Map:
poly.Locations = new LocationCollection();
poly.Opacity = 1.0;
poly.StrokeThickness = 3;
SolidColorBrush mySolidColorBrush = new SolidColorBrush();
mySolidColorBrush.Color = Colors.Green;
poly.Stroke = mySolidColorBrush;
Now, we will start using the web service. So, first of all lets right click on our project and click on Add Service Reference:
On the address field paste this reference to the route web service http://dev.virtualearth.net/webservices/v1/routeservice/routeservice.svc/mex
and click "Go", then the services will appear in the Services field, to prove it's not a wrong reference.
When clicking the OK button, some files will be generated in your project. So now we can use that distributed service through its reference.
private void showRoute_click(object sender, EventArgs e)
ServiceReference1.RouteServiceClient proxy =
ServiceReference1.RouteRequest rr = new ServiceReference1.RouteRequest();
rr.Credentials = new ServiceReference1.Credentials();
rr.Options = new ServiceReference1.RouteOptions();
rr.Options.RoutePathType = ServiceReference1.RoutePathType.Points;
ServiceReference1.Waypoint wp1 = new ServiceReference1.Waypoint();
ServiceReference1.Waypoint wp2 = new ServiceReference1.Waypoint();
wp1.Location = new ServiceReference1.Location();
wp1.Location.Latitude = SharedInformation.myLatitude;
wp1.Location.Longitude = SharedInformation.myLongitude;
wp1.Description = "";
wp2.Location = new ServiceReference1.Location();
wp2.Location.Latitude = SharedInformation.pinLat;
wp2.Location.Longitude = SharedInformation.pinLong;
wp2.Description = "";
rr.Waypoints = new System.Collections.ObjectModel.ObservableCollection<ServiceReference1.Waypoint>();
It's very important to know that the web service in Windows Phone is called in asynchronized way. That's why the expression
"Async" is added to the end of the method's name. That's avoid the interface's thread to be blocked.
The IntelliSence could help you to show the different methods you can invoke from the web service with its full signature, as shown here:
The result returned by this web service is returned through the second parameter of the
which will be executed when there is a response from the service. This result is a list of points. Linked one to the next, they will draw the route we need to show using the polyline.
public void proxy_CalculateRouteCompleted(object obj, ServiceReference1.CalculateRouteCompletedEventArgs e)
foreach (ServiceReference1.Location location in e.Result.Result.RoutePath.Points)
poly.Locations.Add(new GeoCoordinate(location.Latitude, location.Longitude));
pin2.Content = "It's " + e.Result.Result.Summary.Distance.ToString() + "Km far away!";
catch (Exception exc)
The use of the
try catch block is because the service may return some exceptions such as Point so far away from any road..
Some screenshots of the final app:
So that the result will be like this:
I hope you liked my article.
If you need any more information, please let me know.
I'm studying Software Engineering. I like writing articles and developing open source software in C#, Windows Phone and Windows 8 applications http://bit.ly/WpZFWC. I enjoy giving training sessions about .NET technologies. I enjoy talking on international conferences about software technologies http://droidcon.tn/speakers.php.