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.
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.