This sample demonstrates how to use TimeSlider widget with actions while taking advantage of FeatureLayer's timeOffset property. The time
property is used to offset the layer's timeInfo by a certain TimeInterval in order to overlay features from two or more time-aware layers with different time extents.
This app displays five time-aware feature layers showing California fires between 2014 and 2018. When the layers are initialized, the time
property is set on each layer as shown below. The time
property temporarily shifts the fire data from their perspective years to 2018. When TimeSlider's timeExtent updates, then all feature layers display the data that fall within the current time extent as if all fires happened in that period in 2018.
// create five new instances of feature layers
// based on the following definitions
const url = "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/California_fires_since_2014/FeatureServer/"
const definitions = [
{ id: 0, year: 2014, offset: 4 },
{ id: 1, year: 2015, offset: 3 },
{ id: 2, year: 2016, offset: 2 },
{ id: 3, year: 2017, offset: 1 },
{ id: 4, year: 2018, offset: 0 }
];
const layers = definitions.map(definition => createLayer(definition));
// Creates five instances of feature layers each representing
// fires for the given year (between 2014 - 2018)
function createLayer (definition) {
const year = definition.year;
return new FeatureLayer({
url: url + definition.id,
timeOffset: {
value: definition.offset,
unit: "years"
},
outFields: ["*"],
popupTemplate: {
title: "{ALARM_DATE}",
content: "{YEAR_}, {ALARM_DATE}, {GIS_ACRES}"
}
});
}
How it works
To start visualizing California fires recorded between 2014 and 2018 with a monthly interval, you can do one of the following:
- Hit
play
button to automatically update the time visualization. - Hit
next
orprevious
buttons to step through one month at a time. - Drag the thumbs or segment to jump through months.
When the TimeSlider's time
changes, each layer is updated to display fires that fall within that timeExtent. Each layerView is queried for statistics. Query results are processed and then displayed in the bar chart. The bar chart displays the total amount of acres burnt for the given period in each year between 2014 - 2018.
// query fire stats for the given month and year when the timeExtent changes
reactiveUtils.watch(() => timeSlider.timeExtent, () => {
updateFiresStats();
});
// This function is called when the timeSlider's timeExtent changes
// It queries each layer view for fire stats and updates the chart
async function updateFiresStats() {
// Query each and every fire layerview for stats and process the results
const promises = fireLayerViews.map(layerView => queryFeaturesForStats(layerView));
const fireStatsQueryResults = await Promise.all(promises);
let acresBurntList = [];
let chartLabels = [];
// Fire stats query results are back. Loop through them and process.
fireStatsQueryResults.forEach((result) => {
if (result.error) {
console.error(result.error);
return;
}
// update the chart if stats query returned a year for the given layer view
if (result && result.year !== null) {
let date = new Date(result.year);
let year = date.getFullYear();
// Array of burnt acres sum returned in the query results
acresBurntList.push(result.acres_sum ? result.acres_sum.toFixed(2) : 0);
// Chart labels will show the year and count of fires for that year
const label = `${year}, ${result.fire_counts}`;
chartLabels.push(label);
}
});
// Query results have been processed. Update the fires chart to display
// sum of acres burnt for the given month and year
firesChart.data.datasets[0].data = acresBurntList;
firesChart.data.labels = chartLabels;
firesChart.update();
const startMonth = timeSlider.timeExtent.start.toLocaleString("default", { month: "long" });
const endMonth = timeSlider.timeExtent.end.toLocaleString("default", { month: "long" });
monthDiv.innerHTML = `<b> Month: <span>${startMonth} - ${endMonth}</span></b>`;
}
TimeSlider actions
You can also use the actions
menu to directly navigate to top three months that had the acres burned.
At version 4.21, the actions property was added to the TimeSlider widget, which allows you to create custom actions that occur when an item is selected from the actions menu.