Removing poly line from Bing Maps on WP7

Showing a route line for a journey on a Bing Maps control in a WP7 app is relatively easy, especially if you use the WP7Contrib Bing Maps Wrapper service to call out to the Bing Maps RESTful API. It's not quite so easy to remove a route line from the control once displayed.

The background to this is in our WP7 app FINDaPAD (you'll need Zune installed) we have a page which shows the route to a property. We offer a driving route and a walking route - if it's walking distance! We don't display these routes together, they are mutually exclusive. When either of the icons is clicked to calculate the route we remove the existing route and display the new route once it has been calculated. The couple of screen shots below show 2 different routes between the same start & end locations depending whether you are driving or walking.

Shown below is a quick demo I knocked up to show the problem in more detail. This app displays a driving or walking app between the 2 UK cities Oxford & Cambridge. It also has a couple of buttons for Clearing the route line and what I call Resetting the route line. This is very similar to what we have in FINDaPAD.

The MapPolyline class in the Microsoft.Phone.Controls.Maps namespace use the Location property for the line drawn on top of the map. This is not a generic collection like IList or ObservableCollection it is of type LocationCollection coming from the same namespace. 


So my definition of Clearing would be clearing contents of this collection. This is done in the 'Clear Route' button click event handler:

private void HandleClearRouteButtonClick(object sender, RoutedEventArgs e)
{
    this.routeResult.Text = string.Empty;
    this.routeMapRouteLine.Locations.Clear();
}

Unfortunately this doesn't do what I'd expected, it does not remove the overlaid map polyline. As you can see from the screenshot below the text showing the number of points and total distance has been removed but the line hasn't.

To get this to work I had to do what I define as Resetting the clearing of the collection but then adding back in a single value. It doesn't have to any particular value it could be anything that is a valid geo-location - not GeoCoordinate.Unknown.

private void HandleResetRouteButtonClick(object sender, RoutedEventArgs e)
{
    this.routeResult.Text = string.Empty;
    this.routeMapRouteLine.Locations = new LocationCollection {this.routeMap.Center};
}

I literally resetting the collection and adding the centre point of the map back in as the start of the poly line, this gives the expected UI response when 'Reset Route' button is clicked:

I've observed the same behaviour when using the MVVM pattern (FINDaPAD) or a code behind as in the above demo. I've included the code below for the demo, including the XAML.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

            <Microsoft_Phone_Controls_Maps:Map x:Name="routeMap"
                                               Height="400"
                                               VerticalAlignment="Top"
                                               ZoomBarVisibility="Collapsed"
                                               CopyrightVisibility="Visible"
                                               ZoomLevel="8"
                                               AnimationLevel="UserInput"
                                               HorizontalContentAlignment="Stretch"
                                               VerticalContentAlignment="Stretch">

                <Microsoft_Phone_Controls_Maps:MapPolyline x:Name="routeMapRouteLine"
                                                           Stroke="Green"
                                                           StrokeThickness="6"
                                                           Opacity="0.7" />

            </Microsoft_Phone_Controls_Maps:Map>

            <Button Content="Driving Route"
                    Height="72"
                    Margin="0,463,232,0"
                    Name="drivingButton"
                    VerticalAlignment="Top"
                    Click="HandleDrivingButtonClick" />

            <Button Content="Walking Route"
                    Height="72"
                    Margin="209,463,6,0"
                    Name="walkingButton"
                    VerticalAlignment="Top"
                    Click="HandleWalkingButtonClick" />

            <TextBlock Height="30"
                       Margin="12,427,6,0"
                       Name="routeResult"
                       VerticalAlignment="Top" />

            <Button Content="Clear Route"
                    Height="72"
                    HorizontalAlignment="Left"
                    Margin="0,529,0,0"
                    Name="clearRouteButton"
                    VerticalAlignment="Top"
                    Width="224"
                    Click="HandleClearRouteButtonClick" />

            <Button Content="Reset Route"
                    Height="72"
                    HorizontalAlignment="Left"
                    Margin="209,529,0,0"
                    Name="resetRouteButton"
                    VerticalAlignment="Top"
                    Width="241"
                    Click="HandleResetRouteButtonClick" />
        </Grid>

As I said earlier I've used the Bing Maps Wrapper service from the WP7Contrib, you can find out more about calculating routes and all the other functionality by reading a couple of posts by RichGee and this by me.

public partial class MainPage : PhoneApplicationPage
{
    private const string RouteResultFormat = "Route Points: {0}, Distance: {1} {2}";
    private const string RouteFailedFormat = "Route Failed: {0}";

    private readonly IBingMapsService bingMapsService;
    private readonly IRouteSearchCriterion drivingCriterion;
    private readonly IRouteSearchCriterion walkingCriterion;

    public MainPage()
    {
        InitializeComponent();

        this.bingMapsService = new BingMapsService("Your credentials", "Your app id");

        var start = new GeoCoordinate(51.754240074033525, -1.25244140625);
        var end = new GeoCoordinate(52.19413974159756, 0.1318359375);

        var waypoints = new List<WayPoint> { new WayPoint { Point = start }, new WayPoint { Point = end } };

        this.drivingCriterion = CriterionFactory.CreateRouteSearch(waypoints, ModeOfTravel.Driving);
        this.walkingCriterion = CriterionFactory.CreateRouteSearch(waypoints, ModeOfTravel.Walking);

        this.routeMap.Center = new GeoCoordinate(51.88369680508255, -0.4140472412109375);
        this.routeMap.ZoomLevel = 8;
    }

    private void HandleDrivingButtonClick(object sender, RoutedEventArgs e)
    {
        this.routeProgressBar.IsIndeterminate = true;

        this.bingMapsService.CalculateARoute(drivingCriterion)
            .ObserveOnDispatcher()
            .Subscribe(this.UpdateRouteResult, () => { this.routeProgressBar.IsIndeterminate = false; });
    }
        
    private void HandleWalkingButtonClick(object sender, RoutedEventArgs e)
    {
        this.routeProgressBar.IsIndeterminate = true;

        this.bingMapsService.CalculateARoute(walkingCriterion)
            .ObserveOnDispatcher()
            .Subscribe(this.UpdateRouteResult, () => { this.routeProgressBar.IsIndeterminate = false; });
    }

    private void UpdateRouteResult(RouteSearchResult result)
    {
        if (result.HasError)
        {
            this.routeResult.Text = string.Format(RouteFailedFormat, result.ErrorDetails);
            return;
        }

        if (result.HasPoints)
        {
            this.routeResult.Text = string.Format(RouteResultFormat, result.Points.Count, result.TravelDistance, result.DistanceUnit);
            this.routeMapRouteLine.Locations = result.Points;
            this.routeMap.ZoomLevel = 8;
        }
    }

    private void HandleClearRouteButtonClick(object sender, RoutedEventArgs e)
    {
        this.routeResult.Text = string.Empty;
        this.routeMapRouteLine.Locations.Clear();
    }

    private void HandleResetRouteButtonClick(object sender, RoutedEventArgs e)
    {
        this.routeResult.Text = string.Empty;
        this.routeMapRouteLine.Locations = new LocationCollection {this.routeMap.Center};
    }
}