So far we have built an earthquake application, mapped an address using geocoding, and even Prism-fied the Bing Maps WPF control. Now let’s see how to map a route with turn-by-turn directions. By now it should be no surprise that you will need to complete the following steps before you can create this application.
You MUST have a Bing Maps API key in order to use any of the SOAP services.
For this application we will be using the Geocode Service and the Route Service. The Geocode service is used to match addresses, places, and geographic entities to latitude and longitude coordinates on the map, as well as return location information for a specified latitude and longitude coordinate. The Route service is used to generate routes and driving directions based on locations or waypoints.
Now that you have that out of the way let’s write an application. Create a new WPF application targeting the .NET 4.0 framework. Add a reference to the Microsoft.Maps.MapControl.WPF.dll. This will most likely be located in Program Files or Program Files (x86) –> Bing Maps WPF Control –> Beta –> Libraries.
Open up your App.xaml. You need to add an ApplicationIdCredentialsProvider as a resource and enter your ApplicationId:
We need to add the Geocode and Route service to our application. First, let’s start by adding the Geocode service. Right click the project and select “Add Service Reference”. Use the following address:
Give your service a name. I called mine BingServices. Now we need to add the Route service, but we don’t want to add a separate service reference. Ideally we would have a single service that contained both the Geocode and Route services. Luckily there is a trick we can use to do just that. Select the Project and click the “Show All Files” button at the top of the Solution Explorer. Expand the Service Reference folder and then expand the BingServices service. Look for a file called Reference.svcmap. Open the References.svcmap and locate the MetadataSource node. It will loko something like this:
Simply add a new MetatdataSource as follows:
As you can see we added a new MetadataSource that points to the Route service and we gave it a SourceId of 2. Now right click the service and select “Update Service Reference”. This will generate a single service proxy for both the Geocode and Route services. Pretty slick huh?
The next step will be to create a ViewModel that will contain an ICommand that will execute the route calculation, properties that will represent a “To” address and a “From” address. We will also need a property for the RouteResult and for the directions we generate. Lets first create our Direction object:
Now we will need a make-shift delegate command (do not use in production code):
Now on to the ViewModel itself:
Let’s walk though the CalculateRoute Method. First we geocode the “From” and “To” properties the same way we did in the geocoding post. Once we have our From and To locations we use those results to generate a RouteRequest and send that request to the Route service. The service will generate a result and we set our RouteResult property accordingly. This property will be used in data binding shortly. Next we generate an ObservableCollection<Direction> by looping through all the ItineraryItems in the result.
Now that we have generate all of our data, we need to create a View that supports and displays this data, but before we do that we need to create some attached properties. Why do you ask? Well because as it stands, the Bing Maps WPF control is not data binding friendly. So we need to enable data binding with the use of attached properties. We will need an attached property for the Route result which will be responsible for drawing the route line on the map. We will also need one for the MapLayer that will be used to contain the route line. Here is the code:
The RouteResult property simply creates a MapPolyline, loops through all the points in the result and adds the locations to the route line. It then gets the RouteLineLayer and adds it to the map. Lastly, it sets the map’s view to best fit the route line.
Now we are ready for the View:
Oh and don’t forget the code behind:
Now let’s view the fruits of our labor at runtime.
As you can see, given a “From” and “To” address, we can draw a route line and provide turn-by-turn directions as the user hovers over the direction pins. Pretty neat huh? And it wasn’t too difficult to pull off. As always you can Download the Source and start playing.