Calculate and draw route on Bing Maps control

Question

in my app for WP7(mango) I need to navigate the user from one point to another. I know there is the Map control that lets you draw staff on it, but how do you ask it to draw

Answer 1

To update the map with the users current location, use the GeoCoordinateWatcher and update the position of a databound Pushpin as it changes. Remember to set the minimum distance to something low, like 5 meters.

A pushpin like the one on bing maps, can be created with this XAML template:

<maps:Pushpin Background="{StaticResource PushpinLocationBrush}"
              Location="{Binding MyLocation}">
    <maps:Pushpin.Template>
        <ControlTemplate>
            <Grid>
                <Rectangle Width="15"
                           Height="15"
                           Margin="0"
                           Fill="Black">
                    <Rectangle.Projection>
                        <PlaneProjection CenterOfRotationX="0"
                                         LocalOffsetX="-2"
                                         LocalOffsetY="5"
                                         RotationZ="45" />
                    </Rectangle.Projection>
                </Rectangle>
                <Ellipse Width="7"
                         Height="7"
                         Margin="0"
                         HorizontalAlignment="Center"
                         VerticalAlignment="Center"
                         Fill="Orange"
                         RenderTransformOrigin="0.339,0.232"
                         StrokeThickness="0" />
            </Grid>
        </ControlTemplate>
    </maps:Pushpin.Template>
</maps:Pushpin>

Getting the GeoCoordinate of a address can be done with Bing Maps. You can read more about Bing Services here: http://msdn.microsoft.com/en-us/library/cc980922.aspx -- the one you need is the GeoCodeService

Drawing a path is rather complicated, specially if you want it to follow the roads. For this, you need the Bing Maps Route Service.

Add the service to Visual Studio, with RouteServiceReference as name, and then you can utilize following code to get the path fragments, and add them to your map. The XAML below reflects the controls I add the fragments to:

List<GeoCoordinate> locations = new List<GeoCoordinate>();

RouteServiceClient routeService = new RouteServiceClient("BasicHttpBinding_IRouteService");

routeService.CalculateRouteCompleted += (sender, e) =>
{
    var points = e.Result.Result.RoutePath.Points;
    var coordinates = points.Select(x => new GeoCoordinate(x.Latitude, x.Longitude));

    var routeColor = Colors.Blue;
    var routeBrush = new SolidColorBrush(routeColor);

    var routeLine = new MapPolyline()
    {
        Locations = new LocationCollection(),
        Stroke = routeBrush,
        Opacity = 0.65,
        StrokeThickness = 5.0,
    };

    foreach (var location in points)
    {
        routeLine.Locations.Add(new GeoCoordinate(location.Latitude, location.Longitude));
    }

    RouteLayer.Children.Add(routeLine);
};

RouteBingMap.SetView(LocationRect.CreateLocationRect(locations));

routeService.CalculateRouteAsync(new RouteRequest()
{
    Credentials = new Credentials()
    {
        ApplicationId = "YOURBINGMAPSKEYHERE"
    },
    Options = new RouteOptions()
    {
        RoutePathType = RoutePathType.Points
    },
    Waypoints = new ObservableCollection<Waypoint>(
        locations.Select(x => new Waypoint()
        {
            Location = x.Location
        }))
});

Related XAML:

<maps:Map x:Name="RouteBingMap"
          AnimationLevel="None"
          CopyrightVisibility="Collapsed"
          CredentialsProvider="YOURBINGMAPSKEYHERE"
          LogoVisibility="Collapsed"
          ZoomBarVisibility="Collapsed"
          ZoomLevel="12">
    <maps:MapLayer x:Name="RouteLayer" />
</maps:Map>