This sample shows how to apply a time filter to a SceneLayer using a TimeSlider component. First, we load a web scene containing a time-aware SceneLayer using a Scene component, and add a TimeSlider component to it.
<arcgis-scene item-id="5e8fbb7e4ad244d5ae60ca09f21aad63">
<!-- add other components ... -->
<arcgis-time-slider mode="instant"></arcgis-time-slider>
</arcgis-scene>There are multiple ways of filtering temporal data, and they are controlled by the mode property of the TimeSlider component. 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. 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 component will update the scenes's timeExtent whenever the time slider's timeExtent changes.
// Setup the Time slider component
const timeSlider = document.querySelector("arcgis-time-slider");
// the entire time extent of the given data
timeSlider.fullTimeExtent = new TimeExtent({
start: new Date("2019-01-21"),
end: new Date("2031-01-21"),
});
// the current position of the thumbs
timeSlider.timeExtent = new TimeExtent({
start: new Date("2028-01-21"),
end: new Date("2028-01-21"),
});
// snap to every year within the fullTimeExtent
timeSlider.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.