Feature layer time offset
Display a time-enabled feature layer with a time offset.
You can use a time offset to compare time periods by displaying them overlaid on the map. For example, you could show a feature layer with flu cases from December overlaid with flu cases from January to visualize the spread of the disease over time.
How to use the sample
When the sample loads, you'll see hurricane tracks visualized in red and blue. The red hurricane tracks occurred 10 days before the tracks displayed in blue. Adjust the slider to move the interval to visualize how storms progress over time.
How it works
- Create a feature layer for displaying the non-offset features and apply symbology to it.
- Create a second feature layer referring to the same service. Apply a 10 day time offset and unique symbology. Features displayed from this layer will have time values 10 days earlier than the values in the non-offset layer.
- Apply a 10-day time extent to the map view, starting at the beginning of the data range.
- When the user adjusts the slider, move the time extent. Both feature layers will filter their content for the map view's time extent.
About the data
The sample uses a time-enabled feature service depicting hurricanes in the year 2000.
change, range, time, time extent, time offset, time-aware, time-enabled
<UserControl x:Class="ArcGIS.WinUI.Samples.FeatureLayerTimeOffset.FeatureLayerTimeOffset" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:esriUI="using:Esri.ArcGISRuntime.UI.Controls"> <Grid> <esriUI:MapView x:Name="MyMapView" /> <Border Width="375" Margin="30" Padding="20" HorizontalAlignment="Right" VerticalAlignment="Top" Background="White" BorderBrush="Black" BorderThickness="1"> <StackPanel> <TextBlock HorizontalAlignment="Center" FontWeight="Bold" Foreground="Red" Text="Red hurricanes offset 10 days" /> <TextBlock HorizontalAlignment="Center" FontWeight="Bold" Foreground="Blue" Text="Blue hurricanes not offset" /> <Slider x:Name="TimeSlider" IsEnabled="False" Maximum="100" Minimum="0" ValueChanged="MyTimeSlider_ValueChanged" /> <TextBlock x:Name="CurrentDateLabel" FontWeight="SemiBold" TextAlignment="Center" /> </StackPanel> </Border> </Grid> </UserControl>