TimeSlider widget and time zone

This sample demonstrates how visualize the precipitation forecast for the next 72 hours across the contiguous United States with 6-hour interval using the TimeSlider widget. Users can also change the MapView's timeZone so that the precipitation forecast can be visualized in different time zones. The TimeSlider widget 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 widget**

There are four different mode options when initializing the TimeSlider widget: 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.

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.

1
2
3
4
5
6
7
// 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 of the time slider widget 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 around up the time slider's fullTimeExtent to fit full hours.

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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
      view.whenLayerView(layer).then((lv) => {
        // around up the full time extent to full hour
        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, users use the input time zone component to change the time zone. The dates displayed on the time slider widget 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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
      // calcite input time zone component allows users to pick from one of the IANA
      // time zones without having to add the time zones manually to a drop down
      const timezonePicker = document.getElementById("timezone-picker");
      view.ui.add("timezone-picker", "top-right");

      // Change the map view's time zone when user picks a time zone from the component
      timezonePicker.addEventListener("calciteInputTimeZoneChange", () => {
        view.timeZone = timezonePicker.value;
      });