Draw route on Windows Phone 8 map as position changes?

Question

Scenario:

I want a user to see a map and their current position. Then, if they click "start", navigation will begin and they'll see their "route" drawn onto the map as their position changes, similar to how some fitness apps work that map out your run/walk. The goal is to do this in real-time as the user's position changes.

Options:

The way I see it, there are two options: 1) use a RouteQuery and Map.AddRoute from the starting position, to the next position (when the position changes), keeping track of the last position, and always drawing a new MapRoute from that position to the new, or 2) displaying the user's current position as a dot that moves as their position changes, and then maybe when they press "stop", draw a MapRoute for each of their positions in order to show their full route.

I'd really prefer option #1 because the user can see their route progression, etc., as they go.

Here is the code that I'm using:

XAML:

<maps:Map x:Name="MainMap" />
<Button x:Name="btnStart" Content="Start"/>
<Button x:Name="btnStop" Content="Stop" IsEnabled="False"/>

Code-behind:

Global Variables:

GeoCoordinateWatcher watcher;
List<GeoCoordinate> listCoordinates;
GeoCoordinate lastCoordinate;

btnStart.Tap():

private void btnStart_Tap(object sender, GestureEventArgs e)
{
   if (watcher == null)
   {
      watcher = new GeoCoordinateWatcher(GeoPositionAccuracy.High);
      watcher.MovementThreshold = 20;
      watcher.StatusChanged += watcher_StatusChanged;
      watcher.PositionChanged += watcher_PositionChanged;
   }
   watcher.Start();
}

watcher.StatusChanged():

private void watcher_StatusChanged(object sender, GeoPositionStatusChangedEventArgs e)
{
   switch (e.Status)
   {
      case GeoPositionStatus.Initializing:
         btnStart.IsEnabled = false;
         btnStop.IsEnabled = true;
         break;

      case GeoPositionStatus.NoData:
         lblStatus.Text = "location data is not available.";
         break;

      case GeoPositionStatus.Ready:
         lblStatus.Text = "location data is available.";
         break;
   }
}

watcher.PositionChanged():

void watcher_PositionChanged(object sender, GeoPositionChangedEventArgs<GeoCoordinate> e)
{
   if (listCoordinates == null)
   {
      // first time through:
      listCoordinates = new List<GeoCoordinate>();
      listCoordinates.Add(e.Position.Location);
      lastCoordinate = e.Position.Location;
      return;
   } 
   else 
   {
      listCoordinates.Add(e.Position.Location);
      DrawRoute(e.Position.Location);
      lastCoordinate = e.Position.Location;
   }
}

DrawRoute function:

private void DrawRoute(GeoCoordinate newPosition)//
{
   RouteQuery query = new RouteQuery()
   {
      TravelMode = TravelMode.Driving,
      Waypoints = new List<GeoCoordinate>() { MainMap.Center, newPosition }
   };
   query.QueryCompleted += RouteQueryCompleted;
   query.QueryAsync();
   MainMap.Center = newPosition;
   lastCoordinate = newPosition;
}

And finally, RouteQueryCompleted():

void RouteQueryCompleted(object sender, QueryCompletedEventArgs<Route> e)
{
   mapRoute = new MapRoute(e.Result);
   MainMap.AddRoute(mapRoute);
}

What happens:

It appears to work for a second as I begin driving, a short line is drawn where my start position is, but then about 10 second in, a line is randomly drawn down a nearby street (probably equivalent to 3 or 4 blocks long) and then down another block on a side road (while the whole time I haven't even driven ONE block, let alone make any turns!). It's very bizarre and definitely not accurate. I can upload a screenshot to better illustrate it if need be.

Can anyone see what I'm doing wrong in my code or is there a better way to accomplish this? I wasn't sure if this was the best way but I wasn't able to find any examples suggesting otherwise.

Answer 1

I ended up using MapPolyLine to draw a line between the last GeoCoordinate and the new one.

MapPolyline line = new MapPolyline();
line.StrokeColor = Colors.Blue;
line.StrokeThickness = 15;
line.Path.Add(lastCoordinate);
line.Path.Add(pos);
MainMap.MapElements.Add(line);

Answer 2

I am not sure why you are using RouteQuery for your task. Generally, you use this when you want the map sdk to determine a route for you given a set of coordinates. In your case however, you always know where you are through PositionChanged event. It will be easier to plot directly on the map as you move.

Something like this

void watcher_PositionChanged(object sender, GeoPositionChangedEventArgs<GeoCoordinate> e) {
  Plot(e.Position.Location);
}

void Plot(GeoCoordinate pos) {
  var ellipse = new Ellipse();
  ellipse.Fill = new SolidColorBrush(System.Windows.Media.Colors.Blue);
  ellipse.Height = 15;
  ellipse.Width = 15;
  ellipse.Opacity = 25;

  var mapOverlay = new MapOverlay();
  mapOverlay.Content = ellipse;
  mapOverlay.PositionOrigin = new System.Windows.Point(0.5, 0.5);
  mapOverlay.GeoCoordinate = pos;

  var mapLayer = new MapLayer();
  mapLayer.Add(mapOverlay);

  MainMap.Layers.Add(mapLayer);
}