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 => 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
// 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.

MapView

TimeSlider