Time Bar with actions and layer timeOffset | Sample

This sample demonstrates how to use the Time Bar component with custom Calcite 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 respective years to 2018. When the Time Bar’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.

      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 layerColors = ["#FAD90E", "#FFA77F", "#FF7200", "#C93100", "#FF0000"];
      const layers = definitions.map(createLayer);

      function createLayer(definition) {
        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 Time Bar’s timeExtent changes, each layer is updated to display fires that fall within that timeExtent. Each layer 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.

      timeBar.addEventListener("arcgisPropertyChange", (event) => {
        if (event.detail.name === "timeExtent") {
          updatePopover();
          updateFiresStats();
        }
      });

      async function updateFiresStats() {
        const timeExtent = timeBar.timeExtent;
        const promises = layers.map((layer) => queryFeaturesForStats(layer, timeExtent));
        const fireStatsQueryResults = await Promise.all(promises);

        // Ignore results if the selected time window changed during the queries
        if (timeBar.timeExtent !== timeExtent) {
          return;
        }

        const acresBurntList = [];
        const chartLabels = [];
        const chartColors = [];

        fireStatsQueryResults.forEach((result, index) => {
          if (result && result.year !== null) {
            const year = new Date(result.year).getFullYear();
            acresBurntList.push(result.acres_sum ? result.acres_sum.toFixed(2) : 0);
            chartLabels.push(`${year}, ${result.fire_counts}`);
            chartColors.push(layerColors[index]);
          }
        });

        // 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.datasets[0].backgroundColor = chartColors;
        firesChart.data.labels = chartLabels;
        firesChart.update();

        const startMonth = timeExtent.start.toLocaleString("default", { month: "long" });
        const endMonth = timeExtent.end.toLocaleString("default", { month: "long" });
        monthDiv.innerHTML = `Month: <span>${startMonth} - ${endMonth}</span>`;
      }

Custom actions

A Calcite action menu in the Time Bar’s actions-end slot provides shortcuts to the three months with the most acres burned. Each action updates the Time Bar’s timeExtent.

arcgis-time-bar-slider

arcgis-zoom