This is a migrated thread and some comments may be shown as answers.

Location Animation for InformationLayer Items

4 Answers 246 Views
Map
This is a migrated thread and some comments may be shown as answers.
HCT-CERT
Top achievements
Rank 1
HCT-CERT asked on 07 Nov 2012, 01:17 PM
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

4 Answers, 1 is accepted

Sort by
0
Accepted
Andrey
Telerik team
answered on 08 Nov 2012, 12:51 PM
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"
                        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

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
HCT-CERT
Top achievements
Rank 1
answered on 12 Nov 2012, 05:57 AM
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);
0
vishal
Top achievements
Rank 1
answered on 15 Jan 2015, 08:02 PM
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.








0
Petar Mladenov
Telerik team
answered on 20 Jan 2015, 10:33 AM
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
 

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.

 
Tags
Map
Asked by
HCT-CERT
Top achievements
Rank 1
Answers by
Andrey
Telerik team
HCT-CERT
Top achievements
Rank 1
vishal
Top achievements
Rank 1
Petar Mladenov
Telerik team
Share this question
or