Feature layer time offset

View inMAUIUWPWPFWinUIView 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

  1. Create a feature layer for displaying the non-offset features and apply symbology to it.
  2. 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.
  3. Apply a 10-day time extent to the map view, starting at the beginning of the data range.
  4. 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.

Tags

change, range, time, time extent, time offset, time-aware, time-enabled

Sample Code

FeatureLayerTimeOffset.xamlFeatureLayerTimeOffset.xamlFeatureLayerTimeOffset.xaml.cs
Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<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>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.