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 time property.
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
}
}
...
});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 time 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
time updates.
<!-- 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.