TimeSlider with timeOffset and actions

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 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}"
    }
  });
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
// 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>`;
}