This sample demonstrates how to visualize the Quantitative Precipitation Forecast (QPF) for the next 72 hours across the contiguous United States using the Time Bar component. The forecast data is updated hourly from the National Digital Forecast Database and produced by the National Weather Service.

Time Bar

The Time Bar component provides a flexible way to visualize and interact with time-aware data. You can configure it with the controls your application needs, including play, previous, and next buttons, time extent labels, or a time bar slider.

In this sample, users can visualize when precipitation is forecasted to fall in 6 hour intervals. Click the toggle button to the left of the Time Bar to expand or collapse it. When expanded, the Time Bar displays the Time Bar Slider and its play, next, and previous buttons. When collapsed, it displays only the current time extent labels.

The Time Bar’s mode property supports four options: instant, time-window, cumulative-from-start, and cumulative-from-end. This sample uses the default time-window mode to display precipitation within a six-hour time range.

<!-- time bar component configuration -->
<arcgis-time-bar id="time-bar" show-time-extent show-play show-next
  show-previous format="date-time">
  <arcgis-time-bar-slider auto-destroy-disabled
    slot="time-extent"
    show-min
    show-max
    show-ticks
    popover-display="always"></arcgis-time-bar-slider>
</arcgis-time-bar>

The Time Bar component is integrated within the Map component. When the Time Bar’s timeExtent is adjusted, the Map component’s timeExtent will be updated accordingly, affecting all time-aware layers within the map.

Once the layer is loaded, the fullTimeExtent of the Time Bar is set as shown below. The end time of the layer.timeInfo.fullTimeExtent of the service does not fall on a full hour. Therefore, the TimeExtent.expandTo() method is called to round up the Time Bar’s fullTimeExtent to the nearest hour.

      // Configure the time bar with the full time extent and stops based on the layer's time info
      timeBar.fullTimeExtent = layer.timeInfo.fullTimeExtent.expandTo("hours");
      timeBar.stops = {
        interval: layer.timeInfo.interval,
      };

Time Zone

The Map component’s timeZone property controls how temporal data is displayed. Use the Input Time Zone Calcite component to change the map’s time zone at runtime. The Time Bar updates to display precipitation forecast times in the selected time zone, while the Time Zone Label component shows the active time zone so users know how to interpret the displayed dates.

      // Update the map component's time zone
      timezonePicker.addEventListener("calciteInputTimeZoneChange", () => {
        viewElement.timeZone = timezonePicker.value;
      });