This sample demonstrates how to use TimeSlider widget while taking advantage of FeatureLayer's timeOffset property. The timeOffset 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 timeOffset property is set on each layer as shown below. The timeOffset 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 definitionsconst 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(function(definition){
return createLayer(definition)
});
// Creates five instances of feature layers each representing// fires for the given year (between 2014 - 2018)functioncreateLayer (definition) {
const year = definition.year;
returnnew 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 or previous buttons to step through one month at a time.
Drag the thumbs or segment to jump through months.
When the TimeSlider's timeExtent 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.
// update the fire stats between 2014 - 2018 once timeExtent of// the TimeSlider changestimeSlider.watch("timeExtent", function(){
updateFiresStats();
});
// This function is called when the TimeSlider's timeExtent changes// It queries each layer view for fire stats and updates the chartfunctionupdateFiresStats(){
layerViewsEachAlways().then(function(layerViewsResults) {
// query each and every fire layerviews for stats and process the results queryFeaturesForStats(layerViewsResults).then(function(fireStatsQueryResults){
// fire stats query results are back. Loop through them and process. fireStatsQueryResults.map(function(result){
if (result.error) {
return promiseUtils.resolve(result.error);
}
// The results of the Promise are returned in the value propertyelse {
// if the stats query returned a year for the given layerview// then process and update the chartif (result.value.year !== null){
// extract the year and month from the datelet date = newDate(result.value.year);
let year = date.getFullYear();
// array of burnt acres sum returned in the query results// for each layerview representing fires between 2014-2018 acresBurntList.push(result.value.acres_sum.toFixed(2));
//chart labels will show the year and count of fires for that yearconst label = year + ", " + result.value.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();
startMonth = timeSlider.timeExtent.start.toLocaleString("default", { month: "long" });
endMonth = timeSlider.timeExtent.end.toLocaleString("default", { month: "long" });
monthDiv.innerHTML = "<b> Month: <span>" + startMonth + " - " + endMonth + "</span></b>";
});
});
}