TimeSlider MapService Online

This sample demonstrates using a TimeSlider control to display online time aware data. hurricane paths and intensity off the coast of the United States between the year 1851 and 2007 are displayed. An ArcGIS Server dynamic map services is hosting the hurricane data. The legend (a screenshot of the legend in ArcMap) provides a key to the symbology used along a hurricanes path to indicate intensity of the event.

To use the sample, push the play button to automate the display or hurricane paths on the map. It is also possible to use the forward and rewind buttons to manually cycle through the hurricanes' paths being displayed.

XAML

<UserControl x:Class="ArcGISWPFSDK.TimeMapService"
    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"
    xmlns:esriToolkitPrimitives="clr-namespace:ESRI.ArcGIS.Client.Toolkit.Primitives;assembly=ESRI.ArcGIS.Client.Toolkit">

    <Grid x:Name="LayoutRoot">
        <Grid.Resources>
            <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}" >

            <esri:ArcGISTiledMapServiceLayer ID="BaseLayer"
                    Url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer" />

            <esri:ArcGISDynamicMapServiceLayer ID="HurricaneLayer" 
                    Url="http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hurricanes/NOAA_Tracks_1851_2007/MapServer"
                    Initialized="ArcGISDynamicMapServiceLayer_Initialized" />

            <esri:FeatureLayer ID="MyFeatureLayer1" Visible="False"
                    Url="http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hurricanes/NOAA_Tracks_1851_2007/MapServer/0" />
        </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 1851-2007" FontSize="14" HorizontalAlignment="Center" Foreground="Black"/>

                    <Grid>
                        <TextBlock  
                        Text="{Binding ElementName=MyMap, Path=Layers[HurricaneLayer].TimeExtent.Start, Mode=OneWay}" 
                        HorizontalAlignment="Left" Foreground="Black"/>

                        <TextBlock
                        Text="{Binding ElementName=MyMap, Path=Layers[HurricaneLayer].TimeExtent.End, Mode=OneWay}" 
                        HorizontalAlignment="Right" Foreground="Black" />
                    </Grid>

                    <esri:TimeSlider x:Name="MyTimeSlider" 
                        Loop="True" PlaySpeed="0:0:1.5"
                        TimeMode="TimeExtent"                 
                        MinimumValue="{Binding ElementName=MyMap, Path=Layers[HurricaneLayer].TimeExtent.Start, Mode=OneWay}"
                        MaximumValue="{Binding ElementName=MyMap, Path=Layers[HurricaneLayer].TimeExtent.End, Mode=OneWay}"                        
                        Height="20" />

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

        <Border Background="{StaticResource PanelGradient}" BorderThickness="1" CornerRadius="5"
                HorizontalAlignment="Right" VerticalAlignment="Top"
                Margin="20,20,20,30" Padding="10" BorderBrush="Black">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="30" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <TextBlock Text="Hurricane Categories" Foreground="White" Grid.Row="0" FontSize="16">
                    <TextBlock.Effect>
                        <DropShadowEffect ShadowDepth="1" />
                    </TextBlock.Effect>
                </TextBlock>
                <Border Background="White" Grid.Row="1" Padding="2" CornerRadius="5">
                    <Image x:Name="LegendImage" Source="/Assets/Images/hurricane_legend.png" Stretch="None"
                   Margin="5" />
                </Border>
            </Grid>
        </Border>

    </Grid>
</UserControl>

C#

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

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

        private void ArcGISDynamicMapServiceLayer_Initialized(object sender, System.EventArgs e)
        {
            TimeExtent extent = new TimeExtent(MyTimeSlider.MinimumValue, MyTimeSlider.MaximumValue);
            MyTimeSlider.Intervals = TimeSlider.CreateTimeStopsByTimeInterval(extent, TimeSpan.FromDays(500));

            MyTimeSlider.Value = new TimeExtent(MyTimeSlider.MinimumValue, MyTimeSlider.MinimumValue.AddYears(10));
        }
    }
}

VB.NET

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

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

        Private Sub ArcGISDynamicMapServiceLayer_Initialized(sender As Object, e As System.EventArgs)
            Dim extent As New TimeExtent(MyTimeSlider.MinimumValue, MyTimeSlider.MaximumValue)
            MyTimeSlider.Intervals = TimeSlider.CreateTimeStopsByTimeInterval(extent, TimeSpan.FromDays(500))

            MyTimeSlider.Value = New TimeExtent(MyTimeSlider.MinimumValue, MyTimeSlider.MinimumValue.AddYears(10))
        End Sub
    End Class
End Namespace