Temporal Renderer Tracks Online

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 hurricanes data is hosted in a point feature layer in an ArcGIS Server map service and added to the map as a FeatureLayer. Each point is an event in time. Multiple features may be associated with the same event, just at different points in time. A client-side temporal renderer is applied to the hurricane 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. The observation symbol is aged to decrease in opacity as the time extent of the map progresses. 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.TemporalRendererTracks"
    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>

            <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"   
                  TimeExtent="{Binding ElementName=MyTimeSlider, Path=Value, Mode=OneWay}">
            <esri:ArcGISTiledMapServiceLayer Url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer" />

            <esri:FeatureLayer ID="MyHurricaneFeatureLayer" Url="http://servicesbeta.esri.com/ArcGIS/rest/services/Hurricanes/Hurricanes/MapServer/0"
                               OutFields="EVENTID,WINDSPEED"
                               Renderer="{StaticResource MyTemporalRenderer}" 
                               Initialized="FeatureLayer_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" PlaySpeed="0:0:0.15"
                        TimeMode="TimeExtent"                 
                        MinimumValue="{Binding ElementName=MyMap, Path=Layers[MyHurricaneFeatureLayer].TimeExtent.Start, Mode=OneWay}"
                        MaximumValue="{Binding ElementName=MyMap, Path=Layers[MyHurricaneFeatureLayer].TimeExtent.End, Mode=OneWay}"                                
                        Value="2000/08/04 01:00:00 UTC,2000/08/07 01:00:00 UTC"
                        Height="20" />

                </StackPanel>
            </Border>
        </Grid>

        <Grid Visibility="Collapsed" x:Name="RotationGrid" Background="{StaticResource HurricaneBrush}" />

    </Grid>
</UserControl>

C#

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

namespace ArcGISWPFSDK
{
    public partial class TemporalRendererTracks : UserControl
    {
        public TemporalRendererTracks()
        {
            InitializeComponent();
        }

        private void FeatureLayer_Initialized(object sender, EventArgs e)
        {
            TimeExtent extent = new TimeExtent(MyTimeSlider.MinimumValue, MyTimeSlider.MaximumValue);
            MyTimeSlider.Intervals = TimeSlider.CreateTimeStopsByTimeInterval(extent, new TimeSpan(0, 6, 0, 0, 0));
        }
    }
}

VB.NET

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

Namespace ArcGISWPFSDK
    Partial Public Class TemporalRendererTracks
        Inherits UserControl
        Public Sub New()
            InitializeComponent()
        End Sub

        Private Sub FeatureLayer_Initialized(sender As Object, e As EventArgs)
            Dim extent As New TimeExtent(MyTimeSlider.MinimumValue, MyTimeSlider.MaximumValue)
            MyTimeSlider.Intervals = TimeSlider.CreateTimeStopsByTimeInterval(extent, New TimeSpan(0, 6, 0, 0, 0))
        End Sub
    End Class
End Namespace