This sample demonstrates how to filter temporal data in a GeoJSONLayer using a TimeSlider widget. This can be done by creating a new FeatureFilter and updating the filter's timeExtent property by watching the changes to the TimeSlider's timeExtent.
When the GeoJSONLayer is initialized, the timeInfo property for the layer is specified as shown below:
const layer = new GeoJSONLayer({
...
// specify timeInfo for the layer
timeInfo: {
startField: "time", // name of the date field
interval: { // specify time interval for
unit: "days",
value: 1
}
}
...
});Then, an instance of the TimeSlider widget is created and added to the view. The additional properties for the TimeSlider are set from the layer's timeInfo information once the layer is loaded.
// create a new time slider widget
// set other properties when the layer view is loaded
// by default timeSlider.mode is "time-window" - shows
// data falls within time range
const timeSlider = new TimeSlider({
container: "timeSlider",
playRate: 50,
stops: {
interval: {
value: 1,
unit: "hours"
}
}
});
view.ui.add(timeSlider, "bottom-left");
const setupTimeSlider = async () => {
// wait till the layer view is loaded
const lv = await view.whenLayerView(layer);
layerView = lv;
// start time of the time slider - 5/25/2019
const start = new Date(2019, 4, 25);
// set time slider's full extent to
// 5/25/5019 - until end date of layer's fullTimeExtent
timeSlider.fullTimeExtent = {
start: start,
end: layer.timeInfo.fullTimeExtent.end
};
// We will be showing earthquakes with one day interval
// when the app is loaded we will show earthquakes that
// happened between 5/25 - 5/26.
let end = new Date(start);
// end of current time extent for time slider
// showing earthquakes with one day interval
end.setDate(end.getDate() + 1);
// timeExtent property is set so that timeslider
// widget show the first day. We are setting
// the thumbs positions.
timeSlider.timeExtent = { start, end };
};
Lastly, the application watches the TimeSlider's time property and the layer's feature effect is updated to show the earthquakes recorded within the current timeExtent of the widget. The application also does statistics query on the earthquakes on that day after the feature effect is applied.
// watch for TimeSlider timeExtent change
reactiveUtils.watch(
() => timeSlider.timeExtent,
async () => {
// only show earthquakes happened up until the end of
// timeSlider's current time extent.
const date = new Date(timeSlider.timeExtent.end).toISOString().replace("T", " ").replace("Z","");
layer.definitionExpression = "time <= Timestamp '" + date + "'";
// now gray out earthquakes that happened before the time slider's current
// timeExtent... leaving footprint of earthquakes that already happened
layerView.featureEffect = {
filter: {
timeExtent: timeSlider.timeExtent,
geometry: view.extent
},
excludedEffect: "grayscale(20%) opacity(12%)"
};
);How it works
The app shows USGS earthquakes recorded between 5/25/2019 - 6/11/2019. The view's extent is set to Pomona, CA area to show earthquakes recorded in this region.
To start visualizing recorded earthquakes in this region you can do one of the following:
- Hit
playbutton to automatically update the time visualization. - Hit
nextorpreviousbuttons to step through one day at a time. - Drag the thumbs or segment to jump through days.