Value Picker component | Sample | ArcGIS Maps SDK for JavaScript

This sample demonstrates how the Value Picker (Legacy) component can be used to step through or automatically play through a list of values. When the application starts, two Value Picker components are added on the map.

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.

Value Picker with label component

The first Value Picker component allows users to display land cover for a selected year by setting the map component’s timeExtent. The time value picker component uses the label component to present a 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);
      }

      // set label component and values on the Value Picker
      const timeValuePicker = document.getElementById("timeValuePicker");
      timeValuePicker.values = [labelComponentForDates[0].value];
      timeValuePicker.component = {
        type: "label", // autocasts to ValuePickerLabel
        items: labelComponentForDates,
      };

The user’s interaction is then handled by listening for the arcgisPropertyChange event whenever the component’s values property changes, as shown below.

      // Listen to arcgisPropertyChange event to know when the values change on the value picker
      // update the viewElement.timeExtent show to the land cover for the given year
      timeValuePicker.addEventListener("arcgisPropertyChange", (event) => {
        const startDate = new Date(timeValuePicker.values[0]);
        const endDate = startDate.setFullYear(startDate.getFullYear() + 1);
        viewElement.timeExtent = {
          start: new Date(timeValuePicker.values[0]),
          end: new Date(endDate),
        };
      });

Value Picker with combobox component

The second value picker component allows users to change the land cover type displayed in the imagery layer by setting its rasterFunction property. This value picker component uses the 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,
        });
      });

      const rasterFunctionPicker = document.getElementById("rasterFunctionPicker");
      rasterFunctionPicker.component = {
        type: "combobox", // autocasts to ValuePickerCombobox
        placeholder: "Pick Land Cover Type",
        items: comboboxItems,
      };
      rasterFunctionPicker.values = [comboboxItems[0].label];

The user’s interaction is then handled by listening for the arcgisPropertyChange event whenever the component’s values property changes, as shown below.

      // Listen to arcgisPropertyChange event to know when 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.addEventListener("arcgisPropertyChange", (event) => {
        layer.rasterFunction = {
          functionName: rasterFunctionPicker.values[0],
        };
      });