You are using a browser that is no longer supported. Please use the latest version of Google Chrome, Mozilla Firefox, Apple Safari, or Microsoft Edge. For more information please see the System Requirements.
Skip To ContentArcGIS for DevelopersSign In Dashboard
Loading...

Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

This sample demonstrates how to use TimeSlider widget with minimal configuration. The TimeSlider widget simplifies the process of visualizing temporal data in a JavaScript application.

It uses an instance of FeatureLayer to visualize incremental precipitation forecast for next 72 hours across the contiguous United States with 6-hour interval.

The map displays the Quantitative Precipitation Forecast (QPF) for the next 72 hours across the contiguous United States. Data are updated hourly from the National Digital Forecast Database produced by the National Weather Service. Visit the portal item description page for more information.

There are four different mode options when initializing the TimeSlider widget: instant, time-window, cumulative-from-start, and cumulative-from-end. In this case, the mode is set to time-window, meaning that slider will show precipitation data that falls within a given time range, which is 6 hours in this case.

We are setting the view property on the time slider widget. The TimeSlider widget will update the view's timeExtent whenever the time slider's timeExtent changes. Setting the view property will affect any time-aware layer in the view.

// time slider widget initialization
const timeSlider = new TimeSlider({
  container: "timeSlider",
  mode: "time-window",
  view: view
});
view.ui.add(timeSlider, "manual");

Once the layer view has loaded, the fullTimeExtent and stops properties of the TimeSlider can be set based on the time properties of the layer.

 view.whenLayerView(layer).then(function (lv) {
  // around up the end time to full hour
  var endDate = layer.timeInfo.fullTimeExtent.end;
  if (endDate.getHours() === 4 || endDate.getHours() === 10){
    endDate.setHours(endDate.getHours() + 1);
  }
  endDate.setMinutes(0);
  endDate.setSeconds(0);

  timeSlider.fullTimeExtent = {
    start: layer.timeInfo.fullTimeExtent.start,
    end: endDate
  };
  timeSlider.stops = {
    interval: layer.timeInfo.interval
  };
});

Sample search results

TitleSample
Loading...