Temporal Renderer Tracks

This sample displays the tracks of hurricanes of the coast of the United States during 3 day intervals in the summer and fall of 2000. Use the TimeSlider control to view sections of time within this period. The hurricane data is added to the map as a local feature layer. A client-side temporal renderer is applied to the hurricane local feature layer. The renderer uses the TrackIdField to associate events in the data which it uses to generate tracks (lines). The latest observation is a custom marker symbol that contains a rotating hurricane icon and a label with the name and windspeed. To use the sample, push the play button to automate the hurricanes on the map. It is also possible to use the forward and rewind buttons to manually cycle through the cumulative hurricanes being displayed.

XAML

<UserControl x:Class="ArcGISWPFSDK.LocalTemporalRendererTracks"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:esri="http://schemas.esri.com/arcgis/client/2009">
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.Triggers>
            <EventTrigger RoutedEvent="Grid.Loaded">
                <BeginStoryboard>
                    <BeginStoryboard.Storyboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="(Grid.Background).(ImageBrush.Transform).(RotateTransform.Angle)"
                                Storyboard.TargetName="RotationGrid"
                                From="360" To="0"
                                Duration="0:0:05"
                                RepeatBehavior="Forever" />
                        </Storyboard>
                    </BeginStoryboard.Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Grid.Triggers>
        <Grid.Resources>
            <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
            <ImageBrush x:Key="HurricaneBrush" Stretch="Fill" AlignmentX="Center"
                        AlignmentY="Center" ImageSource="/Assets/Images/hurr_100_icon.png">
                <ImageBrush.Transform>
                    <RotateTransform CenterX="50" CenterY="50" />
                </ImageBrush.Transform>
            </ImageBrush>
            <esri:MarkerSymbol x:Key="LatestObservationSymbol">
                <esri:MarkerSymbol.ControlTemplate>
                    <ControlTemplate>
                        <Grid Margin="-200" Width="{Binding Attributes[WINDSPEED]}" Height="{Binding Attributes[WINDSPEED]}" HorizontalAlignment="Center" VerticalAlignment="Center">
                            <Viewbox>
                                <Ellipse Fill="{StaticResource HurricaneBrush}" Width="100" Height="100" />
                            </Viewbox>
                            <Grid Margin="0,0,-50,0" HorizontalAlignment="Right" VerticalAlignment="Center" Background="#77ffffff">
                                <Grid.Effect>
                                    <BlurEffect />
                                </Grid.Effect>
                                <StackPanel>
                                    <TextBlock Text="{Binding Attributes[EVENTID]}" Foreground="White" />
                                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                                        <TextBlock Text="{Binding Attributes[WINDSPEED]}" Foreground="White"/>
                                        <TextBlock Text="mph" Foreground="White"/>
                                    </StackPanel>
                                </StackPanel>
                            </Grid>
                            <StackPanel Margin="0,0,-50,0" 
                                        HorizontalAlignment="Right" 
                                        VerticalAlignment="Center">
                                <TextBlock Text="{Binding Attributes[EVENTID]}"  Foreground="Black"/>
                                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                                    <TextBlock Text="{Binding Attributes[WINDSPEED]}"  Foreground="Black"/>
                                    <TextBlock Text="mph"  Foreground="Black"/>
                                </StackPanel>
                            </StackPanel>
                        </Grid>
                    </ControlTemplate>
                </esri:MarkerSymbol.ControlTemplate>
            </esri:MarkerSymbol>
            <esri:SimpleMarkerSymbol x:Key="ObservationSymbol" Color="#55ffffff">
                <esri:SimpleMarkerSymbol.ControlTemplate>
                    <ControlTemplate>
                        <Grid >
                            <Grid Margin="-400" Width="{Binding Attributes[WINDSPEED]}" Height="{Binding Attributes[WINDSPEED]}" HorizontalAlignment="Center" VerticalAlignment="Center">
                                <Ellipse Stroke="{Binding Symbol.Color}" StrokeThickness="2" />
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </esri:SimpleMarkerSymbol.ControlTemplate>
            </esri:SimpleMarkerSymbol>
            <esri:SimpleLineSymbol x:Key="TracklineSymbol" Color="Black" Width="1" Style="Dash" />
            <!-- Temporal renderer -->
            <esri:TemporalRenderer x:Key="MyTemporalRenderer" TrackIdField="EVENTID">
                <esri:TemporalRenderer.LatestObservationRenderer>
                    <esri:SimpleRenderer Symbol="{StaticResource LatestObservationSymbol}"  />
                </esri:TemporalRenderer.LatestObservationRenderer>
                <esri:TemporalRenderer.ObservationRenderer>
                    <esri:SimpleRenderer Symbol="{StaticResource ObservationSymbol}"  />
                </esri:TemporalRenderer.ObservationRenderer>
                <esri:TemporalRenderer.TrackRenderer>
                    <esri:SimpleRenderer Symbol="{StaticResource TracklineSymbol}" />
                </esri:TemporalRenderer.TrackRenderer>
                <esri:TemporalRenderer.SymbolAger>
                    <esri:RampInterpolator>
                        <esri:RampInterpolator.OpacityRange>
                            <esri:OpacityRange From="1" To=".1" />
                        </esri:RampInterpolator.OpacityRange>
                    </esri:RampInterpolator>
                </esri:TemporalRenderer.SymbolAger>
            </esri:TemporalRenderer>
            <LinearGradientBrush x:Key="PanelGradient" EndPoint="0.5,1" StartPoint="0.5,0">
                <LinearGradientBrush.RelativeTransform>
                    <TransformGroup>
                        <ScaleTransform CenterY="0.5" CenterX="0.5"/>
                        <SkewTransform CenterY="0.5" CenterX="0.5"/>
                        <RotateTransform Angle="176" CenterY="0.5" CenterX="0.5"/>
                        <TranslateTransform/>
                    </TransformGroup>
                </LinearGradientBrush.RelativeTransform>
                <GradientStop Color="#FF145787" Offset="0.16"/>
                <GradientStop Color="#FF3D7FAC" Offset="0.502"/>
                <GradientStop Color="#FF88C5EF" Offset="0.984"/>
            </LinearGradientBrush>
        </Grid.Resources>
        <esri:Map x:Name="MyMap" Extent="-15141796.142,113237.394,5976634.055,8887493.525"   WrapAround="True" MinimumResolution="2445.98490512499"  
                  TimeExtent="{Binding ElementName=MyTimeSlider, Path=Value, Mode=OneWay}">
            <esri:ArcGISLocalTiledLayer ID="TopoMapLayer"
                  Path="..\\Data\\TPKs\\Topographic.tpk"/>
            <esri:ArcGISLocalFeatureLayer ID="MyHurricaneFeatureLayer"  Path="..\\Data\\MPKs\\TimeAwareHurricanes.mpk"  Renderer="{StaticResource MyTemporalRenderer}" 
 LayerName="TimeAwareHurricanes" OutFields="*" Initialized="ArcGISLocalFeatureLayer_Initialized" />
        </esri:Map>
        <Grid HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="50,10,50,10" >
            <Rectangle Fill="{StaticResource PanelGradient}" Stroke="Gray"  RadiusX="10" RadiusY="10" Margin="0,0,0,5" >
                <Rectangle.Effect>
                    <DropShadowEffect/>
                </Rectangle.Effect>
            </Rectangle>
            <Border Background="#FFFFFFFF" BorderBrush="DarkGray" CornerRadius="5" Margin="10,10,10,15"
                   HorizontalAlignment="Center" VerticalAlignment="Top" >
                <StackPanel Margin="5">
                    <TextBlock Text="Hurricanes" FontSize="16" HorizontalAlignment="Center"  Foreground="Black"/>
                    <Grid>
                        <TextBlock 
                        Text="{Binding ElementName=MyMap, Path=Layers[MyHurricaneFeatureLayer].TimeExtent.Start, Mode=OneWay}" 
                        HorizontalAlignment="Left"  Foreground="Black"/>
                        <TextBlock
                        Text="{Binding ElementName=MyMap, Path=Layers[MyHurricaneFeatureLayer].TimeExtent.End, Mode=OneWay}" 
                        HorizontalAlignment="Right"  Foreground="Black"/>
                    </Grid>
                    <esri:TimeSlider x:Name="MyTimeSlider" 
                        Loop="True"
                        TimeMode="TimeExtent"     
                        MinimumValue="{Binding ElementName=MyMap, Path=Layers[MyHurricaneFeatureLayer].TimeExtent.Start, Mode=OneWay}"
                        MaximumValue="{Binding ElementName=MyMap, Path=Layers[MyHurricaneFeatureLayer].TimeExtent.End, Mode=OneWay}"                              
                        Height="20" />
                </StackPanel>
            </Border>
        </Grid>
        <Grid Visibility="Collapsed" x:Name="RotationGrid" Background="{StaticResource HurricaneBrush}" />
        <ProgressBar x:Name="MyProgressBar" IsIndeterminate="True" VerticalAlignment="Bottom" Width="200" Height="20" Margin="10" Visibility="{Binding Path=IsBusy, Converter={StaticResource BooleanToVisibilityConverter}}"></ProgressBar>
    </Grid>
</UserControl>

C#

using System;
using System.Windows.Controls;
using ESRI.ArcGIS.Client;
using ESRI.ArcGIS.Client.Toolkit;
using System.ComponentModel;

namespace ArcGISWPFSDK
{
    public partial class LocalTemporalRendererTracks : UserControl, INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        private bool _isBusy = true;

        public bool IsBusy
        {
            get
            {
                return _isBusy;
            }
            set
            {
                _isBusy = value;

                if (PropertyChanged != null)
                {

                    PropertyChanged(this, new PropertyChangedEventArgs("IsBusy"));
                }
            }
        }    
    
        public LocalTemporalRendererTracks()
        {
            InitializeComponent();
        }

        private void ArcGISLocalFeatureLayer_Initialized(object sender, EventArgs e)
        {
            TimeExtent extent = new TimeExtent(MyTimeSlider.MinimumValue, MyTimeSlider.MaximumValue);
            MyTimeSlider.Intervals = TimeSlider.CreateTimeStopsByTimeInterval(extent, TimeSpan.FromDays(2));
            MyTimeSlider.Value = new TimeExtent(MyTimeSlider.MinimumValue, MyTimeSlider.MinimumValue.AddDays(2));
            DataContext = this;
            IsBusy = false;
        }
    }
}

VB.NET

Imports System.Windows.Controls
Imports ESRI.ArcGIS.Client
Imports ESRI.ArcGIS.Client.Toolkit
Imports System.ComponentModel

Namespace ArcGISWPFSDK
    Partial Public Class LocalTemporalRendererTracks
        Inherits UserControl
        Implements INotifyPropertyChanged
        Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged
        Private _isBusy As Boolean = True
        Public Property IsBusy() As Boolean
            Get
                Return _isBusy
            End Get
            Set(value As Boolean)
                _isBusy = value

                RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs("IsBusy"))
            End Set
        End Property
        Public Sub New()
            InitializeComponent()
        End Sub

        Private Sub ArcGISLocalFeatureLayer_Initialized(sender As Object, e As EventArgs)
            Dim extent As New TimeExtent(MyTimeSlider.MinimumValue, MyTimeSlider.MaximumValue)
            MyTimeSlider.Intervals = TimeSlider.CreateTimeStopsByTimeInterval(extent, TimeSpan.FromDays(2))
            MyTimeSlider.Value = New TimeExtent(MyTimeSlider.MinimumValue, MyTimeSlider.MinimumValue.AddDays(2))
            DataContext = Me
            IsBusy = False
        End Sub
    End Class
End Namespace