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:

 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 widget
const 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/2019
  const start = new Date(2019, 4, 25);
  const end = new Date(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 change
timeSlider.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: