Windows Phone make pushpin icon move on map between start and end location

Question

I am creating an app in which I am trying to move bike icon as user travel on his path. I am getting new location of the user by subscribing to position changed event of Geolocator class. I am setting the pushpin to this new location every time. But the problem is that pushpin doesn't move on that path like with animation but suddenly goes that new location. Is there any way to animate the pushpin to move along a path using start and end point. This should also include scenario like turning on curved path.

Current code:

XAML:

<maps:Map x:Name="myMap" ZoomLevel="16">
    <toolkit:MapExtensions.Children>
        <toolkit:UserLocationMarker x:Name="UserLocationMarker" />
        <!--<toolkit:Pushpin x:Name="MyPushpin" Content="My Position"></toolkit:Pushpin>-->
    </toolkit:MapExtensions.Children>
</maps:Map>

C#:

Geolocator geolocator = new Geolocator();
this.geolocator.MovementThreshold = 0;
 RouteQuery MyQuery = null;
        GeocodeQuery Mygeocodequery = null;

    async void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
    geolocator.PositionChanged += geolocator_PositionChanged;
    Geoposition geoposition = await geolocator.GetGeopositionAsync();
    myMap.Center = geoposition.Coordinate.ToGeoCoordinate();
}

void geolocator_PositionChanged(Geolocator sender, PositionChangedEventArgs args)
{
    Dispatcher.BeginInvoke(() =>
    {
        UserLocationMarker marker = (UserLocationMarker)this.FindName("UserLocationMarker");
        marker.GeoCoordinate = new GeoCoordinate(args.Position.Coordinate.Latitude, args.Position.Coordinate.Longitude);
    });

}



 private void MovePinOnPath(bool isGeodesic)
        {
            ClearMap();
            Pushpin marker = (Pushpin)this.FindName("MyPushpin");
            marker.GeoCoordinate = path[0]; 

            currentAnimation = new Animations.PathAnimation(path, (coord, pathIdx, frameIdx) =>
            {
                marker.GeoCoordinate = coord;
            }, isGeodesic, 10000);

            currentAnimation.Play();
        }

        private void ClearMap()
        {
            if (currentAnimation != null)
            {
                currentAnimation.Stop();
                currentAnimation = null;
            }
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            MovePinOnPath(true);
        }

        private void btnSearch_Click(object sender, RoutedEventArgs e)
        {
            if(!string.IsNullOrWhiteSpace(txtSearchPlace.Text))
            {
                Mygeocodequery = new GeocodeQuery();
                Mygeocodequery.SearchTerm = txtSearchPlace.Text;
                Mygeocodequery.GeoCoordinate = new GeoCoordinate(myMap.Center.Latitude, myMap.Center.Longitude);

                Mygeocodequery.QueryCompleted += Mygeocodequery_QueryCompleted;
                Mygeocodequery.QueryAsync();
            }

        }

        private void Mygeocodequery_QueryCompleted(object sender, QueryCompletedEventArgs<IList<MapLocation>> e)
        {
            if (e.Error == null
                && e.Result.Count > 0)
            {
                MyQuery = new RouteQuery();
                path.Add(e.Result[0].GeoCoordinate);
                MyQuery.Waypoints = path;
                MyQuery.QueryCompleted += MyQuery_QueryCompleted;
                MyQuery.QueryAsync();
                Mygeocodequery.Dispose();
            }
        }

        private void MyQuery_QueryCompleted(object sender, QueryCompletedEventArgs<Route> e)
        {
            if (e.Error == null)
            {
                Route MyRoute = e.Result;
                MapRoute MyMapRoute = new MapRoute(MyRoute);
                myMap.AddRoute(MyMapRoute);
                MyQuery.Dispose();

               path = e.Result.Geometry.ToList();
               btnPlay.IsEnabled = true;
            }
        }

score 1 · Accepted Answer · answered May 15 '15 at 10:45

1

You have a couple of challenges here. The updated location will not be able to tell you the path that the user took travelling from A to B, so animating curves etc will be difficult.

Initially I would suggest you change your MovementThreshold to 0 so that you get as many updates as possible to give you the highest granularity, this should minimise any error you will see for travelling on a curved path, especially at higher zoom levels.

Regarding animating between the 'old' and 'new' locations, there is an excellent blog article here:

Bring your maps to life: Creating animations with Bing Maps

This covers all sorts of pushpin animations which you should be able to utilise in your project.

answered May 15 '15 at 10:45

Gary Wright

2,441
1
20
32

Thanks Gary for you answer. I have updated my code as per the article given by you. Now I have got animation effect for moving pushpin along a path. The other changeling thing is that i need to show that car pushpin turn on that. Any idea how will i achieve that? I mean to say I might have to calculate the orientation of the pushpin as per the route generated. – Balraj Singh May 15 '15 at 13:35
If I understand you correctly, you want to rotate the icon that you are using so that it shows the direction of travel? If so, you want to use a formula something like that shown here : http://stackoverflow.com/questions/2042599/direction-between-2-latitude-longitude-points-in-c-sharp that will give you the heading between the old and new locations which you can use to rotate the pushpin image – Gary Wright May 15 '15 at 18:09

Windows Phone make pushpin icon move on map between start and end location

1 Answers1