Change time extent

View in

MAUI

UWP

WPF

WinUI

View on GitHub

Filter data in layers by applying a time extent to a MapView.

Image of change time extent

Use case

When viewing feature layers that contain a large amount of data with timestamps, you may want to filter the data to only show data relevant to a specific time frame. This can help to visualize changes in the data over time and aids in making better interpretations and predictions of future trends.

How to use the sample

Switch between the available options and observe how the data is filtered.

How it works

Create a MapView with a Map, and add layers that have time-enabled data.
Set the TimeExtent of the map view using TimeExtent property of the .

Relevant API

Map
MapView
TimeExtent

Additional information

Note that time filtering is not applied until the MapView is provided with a TimeExtent. If the TimeExtent is null, no time filtering is applied and all content is rendered.

Sample Code

ChangeTimeExtent.xaml

ChangeTimeExtent.xaml.cs

Use dark colors for code blocksCopy
﻿<UserControl
    x:Class="ArcGIS.UWP.Samples.ChangeTimeExtent.ChangeTimeExtent"
    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="350">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <TextBlock Text="Tap a year to filter the data."
                           Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"
                           HorizontalAlignment="Center" FontWeight="SemiBold" />
                <Button Content="2000"
                        Grid.Row="1" Grid.Column="0"
                        Margin="0,5,2.5,0"
                        HorizontalAlignment="Stretch"
                        Click="TwoThousand_Click" />
                <Button Content="2005"
                        Grid.Row="1" Grid.Column="1"
                        Margin="2.5,5,0,0"
                        HorizontalAlignment="Stretch"
                        Click="TwoThousandFive_Click" />
            </Grid>
        </Border>
    </Grid>
</UserControl>