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:
// 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.
// 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:
// 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.
// 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),
};
},
);