ValuePicker widget

This sample demonstrates how the ValuePicker widget can be used to step or play through a list of values.

The imagery layer in this app displays a global map of land use/land cover (between 2017 - 2022) derived from Sentinel-2 imagery at 10m resolution. You can learn more about the data here.

How it works

When the application starts, two ValuePicker widgets are added to the map.

ValuePicker with combobox component

The first value picker widget allows users to change the land cover type displayed in the imagery layer by setting its rasterFunction property. This value picker widget uses combobox component to present a searchable dropdown list of land cover categories as shown below:

Use dark colors for code blocksCopy
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
173
174
175
176
177
178
179
          // 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"
          });

The user's interaction is then handled by monitoring the widget's values property as shown below.

Use dark colors for code blocksCopy
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
173
174
175
176
177
178
179
          // 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.
          reactiveUtils.watch(
            () => rasterFunctionPicker.values,
            (values) => {
              layer.rasterFunction = {
                functionName: rasterFunctionPicker.values[0]
              };
            }
          );

ValuePicker with label component

The second value picker widget allow users to display the land cover by a selected year by setting the MapView's timeExtent. The time value picker widget uses label component to present list of predefined years as shown below:

Use dark colors for code blocksCopy
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
173
174
175
176
177
178
179
          // 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"
          });

The user's interaction is then handled by monitoring the widget's values property as shown below.

Use dark colors for code blocksCopy
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
173
174
175
176
177
178
179
          // watch the values change on the value picker update the
          // view.timeExtent show to the land cover for the given year
          reactiveUtils.watch(
            () => valuePickerTime.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)
              };
            }
          );

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.