Skip To Content ArcGIS for Developers Sign In Dashboard

ArcGIS Runtime SDK for .NET

Feature layer time offset

This code sample is available for these platforms:
View Sample on GitHub

Show data from the same service side-by-side with a time offset. This allows for the comparison of data over time.

Sample Code

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns=""
            <RowDefinition Height="auto" />
            <RowDefinition Height="auto" />
            <RowDefinition Height="auto" />
            <RowDefinition Height="auto" />
            <RowDefinition Height="*" />
        <Label Text="Red hurricanes offset 10 days" FontAttributes="Bold"
                      HorizontalTextAlignment="Center" TextColor="Red" Grid.Row="0" />
        <Label Text="Blue hurricanes not offset" FontAttributes="Bold"
                      HorizontalTextAlignment="Center" TextColor="Blue" Grid.Row="1" />
        <Label Text="" x:Name="lblCurrentDate" Grid.Row="2" />
        <Slider x:Name="MyTimeSlider" ValueChanged="MyTimeSlider_ValueChanged" Minimum="0" Maximum="100" Grid.Row="3" />
        <esriUI:MapView x:Name="MyMapView" Grid.Row="4" />
// Copyright 2017 Esri.
// Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License.
// You may obtain a copy of the License at:
// Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific
// language governing permissions and limitations under the License.

using Esri.ArcGISRuntime;
using Esri.ArcGISRuntime.Mapping;
using Esri.ArcGISRuntime.Symbology;
using System;
using Xamarin.Forms;
using Colors = System.Drawing.Color;

namespace ArcGISRuntime.Samples.FeatureLayerTimeOffset
        "Feature layer time offset",
        "This sample demonstrates how to show data from the same service side-by-side with a time offset. This allows for the comparison of data over time.",
    public partial class FeatureLayerTimeOffset : ContentPage
        private Uri _featureLayerUri = new Uri("");

        // Hold a reference to the original time extent
        private TimeExtent _originalExtent;

        public FeatureLayerTimeOffset()

            // Create the UI, setup the control references and execute initialization

        private async void Initialize()
            // Create new Map
            Map myMap = new Map(Basemap.CreateOceans());

            // Create the hurricanes feature layer once
            FeatureLayer noOffsetLayer = new FeatureLayer(_featureLayerUri);

            // Apply a blue dot renderer to distinguish hurricanes without offsets
            SimpleMarkerSymbol blueDot = new SimpleMarkerSymbol(SimpleMarkerSymbolStyle.Circle, Colors.Blue, 10);
            noOffsetLayer.Renderer = new SimpleRenderer(blueDot);

            // Add the non-offset layer to the map

            // Create the offset hurricanes feature layer
            FeatureLayer withOffsetLayer = new FeatureLayer(_featureLayerUri);

            // Apply a red dot renderer to distinguish these hurricanes from the non-offset hurricanes
            SimpleMarkerSymbol redDot = new SimpleMarkerSymbol(SimpleMarkerSymbolStyle.Circle, Colors.Red, 10);
            withOffsetLayer.Renderer = new SimpleRenderer(redDot);

            // Apply the time offset (red hurricane dots will be from 10 days before the current extent)
            withOffsetLayer.TimeOffset = new TimeValue(10, Esri.ArcGISRuntime.ArcGISServices.TimeUnit.Days);

            // Add the layer to the map

            // Apply the Map to the MapView
            MyMapView.Map = myMap;

                // Ensure the no offset layer is loaded
                await noOffsetLayer.LoadAsync();

                // Store a reference to the original time extent
                _originalExtent = noOffsetLayer.FullTimeExtent;

                // Update the time extent set on the map
            catch (Exception e)
                await Application.Current.MainPage.DisplayAlert("Error", e.ToString(), "OK");

        private void MyTimeSlider_ValueChanged(object sender, ValueChangedEventArgs e)

        private void UpdateTimeExtent()
            // Get the value of the slider
            double value = MyTimeSlider.Value / 100;

            // Calculate the number of days that value corresponds to
            // 1. Get the interval
            TimeSpan interval = _originalExtent.EndTime - _originalExtent.StartTime;

            // 2. Store the interval as days
            double days = interval.TotalDays;

            // 3. Scale the interval by the value from the slider
            double desiredInterval = value * days;

            // 4. Create a new TimeSpan
            TimeSpan newOffset = new TimeSpan((int)desiredInterval, 0, 0, 0);

            // Determine the new starting offset
            DateTime newStart = _originalExtent.StartTime.DateTime.Add(newOffset);

            // Determine the new ending offset
            DateTime newEnd = newStart.AddDays(10);

            // Reset the new DateTimeOffset if it is outside of the extent
            if (newEnd > _originalExtent.EndTime)
                newEnd = _originalExtent.EndTime.DateTime;

            // Do nothing if out of bounds
            if (newEnd < newStart) { return; }

            // Apply the new extent
            MyMapView.TimeExtent = new TimeExtent(newStart, newEnd);

            // Update the label
            lblCurrentDate.Text = $"{newStart:d} - {newEnd:d}";