Filter SceneLayer with Time

This sample shows how to apply a time filter to a SceneLayer with a TimeSlider widget. First, we load a WebScene that contains a time-aware SceneLayer and create a SceneView.

There are multiple ways of filtering temporal data, and they are controlled by the mode property of the TimeSlider class. You might want to display the data that only matches one single instance in time (using the instant mode, like in this sample), or you might want to define an open—or close-ended time window (using time-window, cumulative-from-start or cumulative-from-end). To define the entire time period within which to visualize your time-aware data, use the fullTimeExtent property of the TimeSlider widget. To set the current location of the thumbs, use the timeExtent property. Since this sample uses the instant mode, timeExtent's start and end parameters are set to the same date. The stops property is used to define where the thumbs will snap on the time slider when manipulated. The TimeSlider widget will update the view's timeExtent whenever the time slider's timeExtent changes. Setting the view property will affect any time-aware layer in the view.

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
view.when(async () => {
  const timeSlider = new TimeSlider({
    // the ID or node representing the DOM element containing the widget
    container: "timeSlider",
    view: view,
    // display the data only matching one single instance in time
    mode: "instant",
    // the entire time extent of the given data
    fullTimeExtent: {
      start: new Date(Date.UTC(2019, 0, 0)),
      end: new Date(Date.UTC(2031, 1, 1))
    },
    // the current position of the thumbs
    timeExtent: {
      start: new Date(Date.UTC(2031, 0, 0)),
      end: new Date(Date.UTC(2031, 0, 0))
    },
    // snap to every year within the fullTimeExtent
    stops: {
      interval: new TimeInterval({
        value: 1,
        unit: "years"
      })
    }
  });

In this sample, the 3D OpenStreetMap layers are used for the transparent buildings in the background. They contain 3D building data for the whole globe. Check out this blog post for more information about these layers.

Other helpful resources

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