TimeSlider with timeOffset and actions

Explore in the sandboxView live

This sample demonstrates how to use TimeSlider widget with actions 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.

Use dark colors for code blocksCopy
// 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) => {
  return 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 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.

Use dark colors for code blocksCopy
// update the fire stats between 2014 - 2018 once timeExtent of
// the TimeSlider changes
timeSlider.watch("timeExtent", () =>{
  updateFiresStats();
});

// This function is called when the timeSlider's timeExtent changes
// It queries each layer view for fire stats and updates the chart
function updateFiresStats(){
  layerViewsEachAlways().then((layerViewsResults) => {
    // query each and every fire layerviews for stats and process the results
    queryFeaturesForStats(layerViewsResults).then((fireStatsQueryResults) => {
      monthDiv.innerHTML = "";
      let month;
      let acresBurntList = [];
      let chartLabels = [];
      // fire stats query results are back. Loop through them and process.
      fireStatsQueryResults.map((result) => {
        if (result.error) {
          return promiseUtils.resolve(result.error);
        }
        // The results of the Promise are returned in the value property
        else {
          // if the stats query returned a year for the given layerview
          // then process and update the chart
          if (result.value.year !== null){

            // extract the year and month from the date
            let date = new Date(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 year
            const 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>";
    });
  });
}

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.