ValuePicker widget

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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
      // get the raster functions that are available with the image service
      // service has raster functions that only show specified land cover types
      // add the raster function names to combobox items
      let comboboxItems = [];
      layer.rasterFunctionInfos.forEach((rf) => {
        comboboxItems.push({
          value: rf.name,
          label: rf.name
        });
      });

      // create a new value picker with a combobox component
      const rasterFunctionPicker = new ValuePicker({
        visibleElements: {
          playButton: false
        },
        component: {
          type: "combobox", // autocasts to ValuePickerCombobox
          placeholder: "Pick Land Cover Type",
          items: comboboxItems
        },
        values: [comboboxItems[0].label], // set first item in list to be selected initially
        container: "rasterFunctionPickerDiv"
      });

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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
      // watch the values change on the value picker
      // set the ImageryLayer.rasterFunction - this function
      // will process the image to show only the specified land cover type.
      rasterFunctionPicker.watch("values", () => {
        layer.renderingRule = {
          functionName: rasterFunctionPicker.values[0]
        };
      });

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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
      // set dates between 2017 - 2022
      // image service has the land cover data between 2017 - 2022
      const startDate = new Date(2017, 0, 1);
      const endDate = new Date(2022, 0, 1);
      let currentDate = startDate;

      // create a label component showing years between 2017 - 2022
      // this will be used by the value picker to change view.timeExtent
      const labelComponentForDates = [];
      while (currentDate <= endDate) {
        labelComponentForDates.push({
          value: currentDate.getTime(),
          label: "Land cover in " + currentDate.getFullYear()
        });
        currentDate.setFullYear(currentDate.getFullYear() + 1);
      }

      // create new ValuePicker with label component
      const valuePickerTime = new ValuePicker({
        values: [labelComponentForDates[0].value], // set the starting value to the first date in the array
        component: {
          type: "label", // autocasts to ValuePickerLabel
          items: labelComponentForDates
        },
        playRate: 1500,
        loop: true, // animates through the values on a loop when "play" is pressed
        container: "valuePickerTimeDiv"
      });

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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
      // watch the values change on the value picker update the
      // view.timeExtent show to the land cover for the given year
      valuePickerTime.watch("values", (values) => {
        const startDate = new Date(values[0]);
        const endDate = startDate.setFullYear(startDate.getFullYear() + 1);
        view.timeExtent = {
          start: new Date(values[0]),
          end: new Date(endDate)
        };
      });