types | References | ArcGIS Maps SDK for JavaScript

Types

import type { TimeSliderState, TimeSliderMode, StopsByDates, StopsByInterval, StopsByCount } from "@arcgis/core/widgets/TimeSlider/types.js";

A module for importing types used in the TimeSlider widget and TimeSliderViewModel.

Type definitions

TimeSliderState

Type definition

Since: ArcGIS Maps SDK for JavaScript 5.0

The TimeSliderViewModel's state.

Type: "disabled" | "ready" | "playing"

TimeSliderMode

Type definition

Since: ArcGIS Maps SDK for JavaScript 5.0

The time slider mode.

See also

TimeSlider.mode

Type: "instant" | "time-window" | "cumulative-from-start" | "cumulative-from-end"

StopsByDates

Type definition

Since: ArcGIS Maps SDK for JavaScript 5.0

Specifies an array of dates for the time slider widget. Can be used to create irregularly spaced stops.

dates

Property

Type: Date[]

Since: ArcGIS Maps SDK for JavaScript 5.0

Array of dates.

Example

// Explicitly define 5 stops.
const timeSlider = new TimeSlider({
  container: "timeSliderDiv",
  fullTimeExtent: {
    start: new Date(2000, 0, 1),
    end: new Date(2004, 2, 19)
  },
  timeExtent: {
    start: new Date(2000, 0, 1),
    end: new Date(2001, 3, 8)
  },
  stops: {
    dates: [
      new Date(2000, 0, 1),
      new Date(2001, 3, 8),
      new Date(2002, 0, 10),
      new Date(2003, 12, 8),
      new Date(2004, 2, 19)
    ]
  }
});

StopsByInterval

Type definition

Since: ArcGIS Maps SDK for JavaScript 5.0

Defines regularly spaced stops on the time slider from a TimeInterval. The optional TimeExtent can confine the subdivision to a specific time frame. StopByInterval is useful when the spacing is in terms of months and years, which cannot be reliably expressed in milliseconds.

interval

Property

Type: TimeInterval

Since: ArcGIS Maps SDK for JavaScript 5.0

Specifies a granularity of temporal data and allows you to visualize the data at specified intervals. It can be set at regular interval such as every hour or every day.

timeExtent

Property

Type: TimeExtent | undefined

Since: ArcGIS Maps SDK for JavaScript 5.0

A period of time with definitive start and end dates. The time slider widget's TimeSlider.fullTimeExtent will be used if this property is not specified.

Example

// Add yearly intervals starting from the beginning of the TimeSlider.
const timeSlider = new TimeSlider({
  container: "timeSliderDiv",
  fullTimeExtent: {
    start: new Date(2000, 0, 1),
    end: new Date(2015, 2, 19)
  },
  timeExtent: {
    start: new Date(2000, 0, 1),
    end: new Date(2001, 0, 1)
  },
  stops: {
    interval: {
      value: 1,
      unit: "years"
    }
  }
});

StopsByCount

Type definition

Since: ArcGIS Maps SDK for JavaScript 5.0

Divides the time slider's TimeSlider.fullTimeExtent into equal parts. A stop will be placed at the start and end of each division resulting in count + 1 TimeSlider.effectiveStops.

count

Property

Type: number

Since: ArcGIS Maps SDK for JavaScript 5.0

Number of evenly spaced divisions.

timeExtent

Property

Type: TimeExtent | undefined

Since: ArcGIS Maps SDK for JavaScript 5.0

The time period to divide. If unspecified, the time slider's TimeSlider.fullTimeExtent will be used.

Example

// Add ten evenly spaced stops.
const timeSlider = new TimeSlider({
  container: "timeSliderDiv",
  fullTimeExtent: {
    start: new Date(2000, 0, 1),
    end: new Date(2004, 2, 19)
  },
  timeExtent: {
    start: new Date(2000, 0, 1),
    end: new Date(2000, 3, 8)
  },
  stops: {
    count: 10
  }
});

Stops

Type definition

Since: ArcGIS Maps SDK for JavaScript 5.0

Defines specific locations on the time slider where thumbs will snap to when manipulated. If unspecified, ten evenly spaced stops will be added. For continuous sliding set stops to null.

See also

TimeSlider.stops

Type: StopsByDates | StopsByInterval | StopsByCount

Action

Type definition

Since: ArcGIS Maps SDK for JavaScript 5.0

Definition of an action that can be assigned to the TimeSliderViewModel.actions property on the TimeSlider.actions or the TimeSliderViewModel.actions. It is displayed in a menu when the user clicks the ellipsis button timeSlider-actions-menu on the TimeSlider widget.