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 arcgis 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.
// listen to time slider component's arcgisPropertyChange event. The event's payload contains
// info about the time slider's current time extent change.
// Update the earthquakes layer and its layer view based on the time slider's current time extent.
timeSlider.addEventListener("arcgisPropertyChange", async (event) => {
try {
// Only show earthquakes up until the end of timeSlider's current time extent.
const date = new Date(timeSlider.timeExtent.end).toISOString().replace("T", " ").replace("Z", "");
layer.definitionExpression = `time <= Timestamp '${date}'`;
// Gray out earthquakes that happened before the time slider's current timeExtent.
layerView.featureEffect = {
filter: {
timeExtent: timeSlider.timeExtent,
geometry: arcgisMap.extent
},
excludedEffect: "grayscale(20%) opacity(12%)"
};
// Run statistics on earthquakes within the current time extent.
const statQuery = layerView.featureEffect.filter.createQuery();
statQuery.outStatistics = [magMax, magAvg, magMin, tremorCount, avgDepth];
const result = await layer.queryFeatures(statQuery);
statsDiv.innerHTML = "";
if (result.error) {
console.error(result.error);
return;
}
// results returned from the query and populate the statsDiv with the results.
if (result.features.length >= 1) {
const attributes = result.features[0].attributes;
// Get statistics fields and their values from the query results.
// htmls is an array of strings that contain the statistics fields and their values.
const htmls = Object.keys(statsFields).map(name => {
if (attributes[name] != null) {
return `<br/>${statsFields[name]}: <b><span>${attributes[name].toFixed(2)}</span></b>`;
}
return '';
}).filter(html => html !== '');
// Display the number of earthquakes that occurred within the current time extent.
const yearHtml = `
<span>${result.features[0].attributes["tremor_count"]}</span> earthquakes were recorded between
${timeSlider.timeExtent.start.toLocaleDateString()} -
${timeSlider.timeExtent.end.toLocaleDateString()}.<br/>
`;
statsDiv.innerHTML = htmls.length ? yearHtml + htmls.join('') : yearHtml;
}
} catch (error) {
console.error(error);
}
});
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
playbutton to automatically update the time visualization. - Hit
nextorpreviousbuttons to step through one day at a time. - Drag the thumbs or segment to jump through days.