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 TimeSlider widgetconst timeSlider = new TimeSlider({
container: "timeSlider",
playRate: 50});
view.ui.add(timeSlider, "manual");
view.whenLayerView(layer).then(function(lv) {
// start time of the TimeSlider - 5/25/2019const start = newDate(2019, 4, 25);
const end = newDate(start);
// end of current time extent for TimeSlider// showing earthquakes with one day interval end.setDate(end.getDate() + 1);
// set TimeSlider's full extent to 5/25/5019 - until end date of layer's fullTimeExtent timeSlider.fullTimeExtent = {
start: start,
end: layer.timeInfo.fullTimeExtent.end
};
// setting current time extent timeSlider.values = [start, end];
// calculate stops for the TimeSlider// with one day interval for given full time extent timeSlider.createStopsByInterval(
timeSlider.fullTimeExtent,
{
value: 1,
unit: "hours" }
);
});
Lastly, the application watches the TimeSlider's timeExtent property and the layer's 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 effect is applied.
// watch for TimeSlider timeExtent changetimeSlider.watch("timeExtent", function() {
// gray out earthquakes that are outside of the current timeExtent layerView.effect = {
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 play button to automatically update the time visualization.
Hit next or previous buttons to step through one day at a time.