Finding and Mapping a Route in Windows Phone 8

This is a support post for the Inside Windows Phone show on location and mapping in Windows Phone 8 published here.

One of the really cool and powerful things in the Windows Phone mapping services is the ability to simple hand the Windows Phone APIs a list of geo coordinates and have it create walking or driving route on the fly. Because of the power of offline mapping in Windows Phone 8, this means that developers can create extremely powerful directional software that works even when the phone doesn’t have network connectivity.

The first thing we need to do is set up a map control on which to display our resulting route.

In XAML:

<span style="background: white; color: blue;">&lt;</span><span style="background: white; color: rgb(163, 21, 21);">maps</span><span style="background: white; color: blue;">:</span><span style="background: white; color: rgb(163, 21, 21);">Map </span><span style="background: white; color: red;">x</span><span style="background: white; color: blue;">:</span><span style="background: white; color: red;">Name</span><span style="background: white; color: blue;">=&quot;myMap&quot; </span><span style="background: white; color: blue;">/&gt;</span>

Then we’ll set up a list of geocoordinates representing the order of the places we want to use to establish our route and add some locations to it.

<span style="background: white; color: rgb(43, 145, 175);">List</span><span style="background: white; color: black;">&lt;</span><span style="background: white; color: rgb(43, 145, 175);">GeoCoordinate</span><span style="background: white; color: black;">&gt; wayPoints = </span><span style="background: white; color: blue;">new </span><span style="background: white; color: rgb(43, 145, 175);">List</span><span style="background: white; color: black;">&lt;</span><span style="background: white; color: rgb(43, 145, 175);">GeoCoordinate</span><span style="background: white; color: black;">&gt;();
wayPoints.Add(</span><span style="background: white; color: blue;">new </span><span style="background: white; color: rgb(43, 145, 175);">GeoCoordinate</span><span style="background: white; color: black;">(47.60887, -122.34094));
wayPoints.Add(</span><span style="background: white; color: blue;">new </span><span style="background: white; color: rgb(43, 145, 175);">GeoCoordinate</span><span style="background: white; color: black;">(47.6396, -122.1300)); </span>

Then set up our RouteQuery object, assign an event handler so we can read the result, choose between a route for walking or driving and then assign the list of geo coordinates and we’re off!

<span style="background: white; color: rgb(43, 145, 175);">RouteQuery </span><span style="background: white; color: black;">routeQuery = </span><span style="background: white; color: blue;">new </span><span style="background: white; color: rgb(43, 145, 175);">RouteQuery</span><span style="background: white; color: black;">();
routeQuery.QueryCompleted += routeQuery_QueryCompleted;
routeQuery.TravelMode = </span><span style="background: white; color: rgb(43, 145, 175);">TravelMode</span><span style="background: white; color: black;">.Walking;                    
routeQuery.Waypoints = wayPoints;
routeQuery.QueryAsync();</span>

The RouteQuery will work for a little while and then return with (what is hopefully) a suitable route made of

<span style="background: white; color: blue;">void </span><span style="background: white; color: black;">routeQuery_QueryCompleted(</span><span style="background: white; color: blue;">object </span><span style="background: white; color: black;">sender, </span><span style="background: white; color: rgb(43, 145, 175);">QueryCompletedEventArgs</span><span style="background: white; color: black;">&lt;</span><span style="background: white; color: rgb(43, 145, 175);">Route</span><span style="background: white; color: black;">&gt; e)
{
    </span><span style="background: white; color: blue;">if </span><span style="background: white; color: black;">(</span><span style="background: white; color: blue;">null </span><span style="background: white; color: black;">== e.Error)
    {
        </span><span style="background: white; color: rgb(43, 145, 175);">Route </span><span style="background: white; color: black;">MyRoute = e.Result;
</span><span style="background: white; color: black;">    }
}</span>

The result will be a Route object that gives an estimated duration for travelling the route as well as an enormous amount of detailed data about how to get from point A to point B (and then, subsequently, points C, D, and E). The instructions between each point are kept in the Legs property of the Route and each leg has every street and every turn detailed in the Maneuvers property. It’s really easy to work with.

But even better than that is the fact adding the route to your map is only 1 line of code (but I like to use 3 to make things easier):

<span style="background: white; color: rgb(43, 145, 175);">Route </span><span style="background: white; color: black;">MyRoute = e.Result;
</span><span style="background: white; color: rgb(43, 145, 175);">MapRoute </span><span style="background: white; color: black;">mappedRoute = </span><span style="background: white; color: blue;">new </span><span style="background: white; color: rgb(43, 145, 175);">MapRoute</span><span style="background: white; color: black;">(MyRoute);
scavangeMap.AddRoute(<span style="background: white; color: black;">mappedRoute</span>);
scavangeMap.SetView(<span style="background: white; color: black;">mappedRoute</span>.Route.BoundingBox);</span>

What I’ve done here is add the UI to represent this route to my map and then moved and scaled the map so that it is in the perfect spot for the user to start interacting with the route.