TimeSlider component

This sample demonstrates how to visualize the precipitation forecast for the next 72 hours across the contiguous United States over 6-hour interval using the TimeSlider component. Users can also change the MapView's timeZone so that the precipitation forecast can be visualized in different time zones. The TimeSlider component simplifies the process of visualizing temporal data in a JavaScript application. In this case, users can visualize when precipitation is forecasted to fall in 6 hour intervals. The temporal data visualization can also be displayed in different time zones when the user changes the MapView's time zone from the input time zone calcite component. Viewing this temporal data can be useful if users need to know when precipitation will be falling in their area in their local time.

The TimeZoneLabel widget displays the time zone of the MapView so users are aware of which time zone the dates are being displayed in.

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

TimeSlider component

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

The TimeSlider component is integrated within the arcgis-map element, linking it to the map. Whenever the TimeSlider's timeExtent is adjusted, the view's timeExtent will be updated accordingly, affecting all time-aware layers within the view.

Once the layer view has loaded, the fullTimeExtent of the time slider component is set as shown below. The end time of the layer.timeInfo.fullTimeExtent for the service does not make full hour. So the TimeExtent.expandTo() method is called to round up the time slider's fullTimeExtent to the nearest hour.

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
          const timeSlider = document.querySelector("arcgis-time-slider");
          timeSlider.fullTimeExtent = layer.timeInfo.fullTimeExtent.expandTo("hours");
          timeSlider.stops = {
            interval: layer.timeInfo.interval
          };

Changing MapView timeZone

Users can change the MapView's timeZone by setting the timeZone property at runtime. In this sample, use the input time zone component to change the time zone. The dates displayed on the time slider component and the time slider's temporal visualization will change to honor the chosen time zone.

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
          const timezonePicker = document.getElementById("timezone-picker");
          timezonePicker.addEventListener("calciteInputTimeZoneChange", () => {
            view.timeZone = timezonePicker.value;
          });