Filter features with TimeSlider component

Explore in the sandboxView live

This sample demonstrates how to filter temporal data in a GeoJSONLayer using a TimeSlider component. 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 property.

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
    }
  }
  ...
 });

The TimeSlider component is added to the app without being associated with arcgis-map component as shown below. This will allow you to apply a custom logic whenever the TimeSlider's timeExtent property changes. This approach is useful if your layer has a date field but does not have time enabled. You can also use this approach if you want to have a complete control over the logic whenever the timeSlider's timeExtent updates.

Use dark colors for code blocksCopy
<!-- add time slider component outside of the map without a reference-element -->
<arcgis-map basemap="dark-gray-vector" zoom="13" center="-117.512764, 34.04355">
...
</arcgis-map>
<arcgis-time-slider mode="time-window" play-rate="50"></arcgis-time-slider>

Lastly, the application listens to the `arcgisPropertyChange` event on the time slider component. This event tracks property changes within the component, providing insights into any modifications to the time slider's time extent. In this example, the application updates the layer's feature effect to display earthquakes recorded within the current time extent. Additionally, it performs a statistical query on the earthquakes from that specific day after applying the feature effect.

<CodeBlock
  source="./index.html"
  language="html"
  section="arcgisPropertyChange"
/>


## How it works

The app shows [USGS earthquakes](https://earthquake.usgs.gov/earthquakes/feed/v1.0/csv.php) 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.
-   Drag the thumbs or segment to jump through days.

TimeSlider

time