Filter features with TimeSlider

Explore in the sandboxView live

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:

Use dark colors for code blocksCopy
 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.

Use dark colors for code blocksCopy
        // 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");

        // wait till the layer view is loaded
        view.whenLayerView(layer).then((lv) => {
          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 timeExtent 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.

Use dark colors for code blocksCopy
// watch for TimeSlider timeExtent change
timeSlider.watch("timeExtent", () => {
  // gray out earthquakes that are outside of the current timeExtent
  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: