Feature layer time offset

View in

MAUI

UWP

WPF

WinUI

View on GitHub

Display a time-enabled feature layer with a time offset.

Image of feature layer time offset

Use case

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.

Relevant API

FeatureLayer
MapView
TimeExtent

About the data

The sample uses a time-enabled feature service depicting hurricanes in the year 2000.

Sample Code

FeatureLayerTimeOffset.xaml

FeatureLayerTimeOffset.xaml.cs

Use dark colors for code blocksCopy
﻿<UserControl
    x:Class="ArcGIS.UWP.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 Background="White" BorderBrush="Black" BorderThickness="1"
                HorizontalAlignment="Right" VerticalAlignment="Top"
                Margin="30" Padding="20" Width="375">
            <StackPanel>
                <TextBlock Text="Red hurricanes offset 10 days"
                           FontWeight="Bold"
                           HorizontalAlignment="Center"
                           Foreground="Red" />
                <TextBlock Text="Blue hurricanes not offset"
                           FontWeight="Bold"
                           HorizontalAlignment="Center"
                           Foreground="Blue" />
                <Slider x:Name="TimeSlider"
                        Minimum="0" Maximum="100"
                        IsEnabled="False"
                        ValueChanged="MyTimeSlider_ValueChanged" />
                <TextBlock x:Name="CurrentDateLabel"
                           FontWeight="SemiBold"
                           TextAlignment="Center" />
            </StackPanel>
        </Border>
    </Grid>
</UserControl>