Location Animation for InformationLayer Items

5 posts, 1 answers
    HCT-CERT avatar
    24 posts
    Member since:
    Aug 2012

    Posted 07 Nov 2012 Link to this post


    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 ?


  2. Answer
    Andrey avatar
    1681 posts

    Posted 08 Nov 2012 Link to this post

    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"
            Title="MainWindow" Height="350" Width="525">
        <Grid x:Name="LayoutRoot" Background="White">
            <telerik:RadMap x:Name="radMap"
                            Center="40, -100"
                    <telerik:OpenStreetMapProvider />
                <telerik:InformationLayer x:Name="elementsLayer">
                    <telerik:Pushpin x:Name="pushpin" telerik:MapLayer.Location="40,-100" />
            <Button Content="Start Animation"
                    VerticalAlignment="Top" HorizontalAlignment="Left"
                    Click="Button_Click" />

    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(
                new PropertyMetadata(new PropertyChangedCallback(AnimationPointChangedHandler)));
            public MainWindow()
            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.SetTarget(animation, this);
                Storyboard.SetTargetProperty(animation, new PropertyPath("AnimationPoint"));
                storyboard.FillBehavior = FillBehavior.HoldEnd;
            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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

    HCT-CERT avatar
    24 posts
    Member since:
    Aug 2012

    Posted 11 Nov 2012 Link to this post

    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];
                    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();              
                    IsPlayingAnimation = true;
                    sb.Begin(this, true);
  4. vishal
    vishal avatar
    6 posts
    Member since:
    Jun 2010

    Posted 15 Jan 2015 in reply to HCT-CERT Link to this post

    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
    Thanks In Anticipation.

  5. Petar Mladenov
    Petar Mladenov avatar
    2986 posts

    Posted 20 Jan 2015 Link to this post

    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.

    Petar Mladenov

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top