Location Animation for InformationLayer Items

[HCT-CERT]

Hi,

I am trying to animate the move of a car on a RadMap Information Layer.The car is shown as an Image and its location is set through MapLayer.SetLocation method.I also get the route of the car rendered through a MapPolyline with its points bound to a bing routing query result.

Now I would like to move the car through the route using animation storyboard, but since the MapLayer.LocationProperty is of type Location, I can not find a suitable animation for this type.I tried the DoubleAnimation to change the lat, and long separately, but the storyboard is complaining about nested property (Storyboard.TargetProperty="(rad:MapLayer.Location.Latitude)").

Any ideas on how to implement this ?

Thanks

Madani

[Andrey]

Hi Madani,

You can use the standard PointAnimation to animate movement of object on the map. You can add the DependencyProperty of Point type. And you can change the position of object using MapLayer.SetLocation method when this property is changed.
The sample code is below.

<Window x:Class="AnimatedDataObjects.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        Title="MainWindow" Height="350" Width="525">
    <Grid x:Name="LayoutRoot" Background="White">
        <telerik:RadMap x:Name="radMap"
                        Center="40, -100"
                        ZoomLevel="7">
            <telerik:RadMap.Provider>
                <telerik:OpenStreetMapProvider />
            </telerik:RadMap.Provider>

            <telerik:InformationLayer x:Name="elementsLayer">
                <telerik:Pushpin x:Name="pushpin" telerik:MapLayer.Location="40,-100" />
            </telerik:InformationLayer>
        </telerik:RadMap>

        <Button Content="Start Animation"
                VerticalAlignment="Top" HorizontalAlignment="Left"
                Click="Button_Click" />
    </Grid>
</Window>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using Telerik.Windows.Controls.Map;
using System.Windows.Media.Animation;

namespace AnimatedDataObjects
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        private static readonly DependencyProperty AnimationPointProperty = DependencyProperty.Register(
            "AnimationPoint",
            typeof(Point),
            typeof(MainWindow),
            new PropertyMetadata(new PropertyChangedCallback(AnimationPointChangedHandler)));

        public MainWindow()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            Storyboard storyboard = new Storyboard();
            PointAnimation animation = new PointAnimation();
            animation.Duration = TimeSpan.FromSeconds(10);
            animation.From = (Point)MapLayer.GetLocation(this.pushpin);
            animation.To = (Point)(new Location(40, -90));

            storyboard.Children.Add(animation);
            Storyboard.SetTarget(animation, this);
            Storyboard.SetTargetProperty(animation, new PropertyPath("AnimationPoint"));

            storyboard.FillBehavior = FillBehavior.HoldEnd;
            storyboard.Begin();
        }

        private static void AnimationPointChangedHandler(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            MainWindow window = d as MainWindow;
            if (window != null)
            {
                Point point = (Point)e.NewValue;
                MapLayer.SetLocation(window.pushpin, new Location(point.Y, point.X));
            }
        }
    }
}

Kind regards,
Andrey Murzov
the Telerik team

[HCT-CERT]

Thanks Andrey. I now use PointAnimationUsingPath since the car will move through tens of line segments.This works perfect for me.

distance = 0;
EllipseGeometry EllipseGeometry = new EllipseGeometry() { RadiusX = 20, RadiusY = 20 };
PolyLineSegment mps = new PolyLineSegment() { IsStroked = true, IsSmoothJoin = true };


                 

                for (int i = 0; i < pcol.Count - 1; i++)

                {

                    distance += this.GetDistance(pcol[i], pcol[i + 1]);

                }

                 

                NameScope.SetNameScope(this, new NameScope());

 

                RegisterName("EllipseGeometry", EllipseGeometry);

                System.Windows.Shapes.Path path = new System.Windows.Shapes.Path() { Fill = new SolidColorBrush(Colors.Blue), Data = EllipseGeometry };

                    PathGeometry pathGeometry = new PathGeometry();               

                PathFigure mpf = new PathFigure();

                mpf.IsClosed = false;

                mpf.StartPoint = mps.Points[0];

                mpf.Segments.Add(mps);

               pathGeometry.Figures.Add(mpf);

                PointAnimationUsingPath paup = new PointAnimationUsingPath();

                paup.Duration = new Duration(TimeSpan.FromSeconds(distance * 3.5));

                paup.SetValue(PointAnimationUsingPath.PathGeometryProperty, pathGeometry);

                paup.PathGeometry = pathGeometry;

                Storyboard.SetTargetProperty(paup, new PropertyPath(EllipseGeometry.CenterProperty));

                Storyboard.SetTargetName(paup, "EllipseGeometry");

                DependencyPropertyDescriptor dpd = DependencyPropertyDescriptor.FromProperty(EllipseGeometry.CenterProperty, typeof(EllipseGeometry));

                dpd.AddValueChanged(EllipseGeometry, delegate

                {

                    MapLayer.SetLocation(StartingPoint, new Location(EllipseGeometry.Center.Y, EllipseGeometry.Center.X));

                    radMap1.Center = new Location(EllipseGeometry.Center.Y, EllipseGeometry.Center.X);

 

                });

                sb = new Storyboard();              

                sb.Children.Add(paup);   

                IsPlayingAnimation = true;

                sb.Begin(this, true);

[vishal]

Hi Andrey,

Inside method AnimationPointChangedHandler , you are creating new location each time and setting it to pushpin. Here i already have a collection of locations, how can i set it to pushpin. The problem is AnimationPointChangedHandler is called each time pushpin point is changed if i have understood it rightly.

So in nutshell , i have a collection of location and i want the pushpin to move from location at index 0 to location at last index of
collection.
 
Thanks In Anticipation.

[Petar Mladenov]

Hi Vishal,

The code posted in this thread shows how to animate a route between 2 points and the route is straight.
Your requirement is to move the pushpin from point to point, following a points in a collection. Have you considered using the solution here in recursion or cycle ? Actually you only have to invoke the route between points multiple times. You just need to switch the start and end points. You can also subscribe for storyboard. Completed event handler- this is to detect when you need to start the new animation between the new start and end points.

Regards,
Petar Mladenov
Telerik