topic Re: Query Automatically in ArcGIS JavaScript Maps SDK Questions

Query Automatically

JaredPilbeam2 — Sat, 11 Dec 2021 17:46:29 GMT

This app works fine as it is. You select from one or both of the drop-downs and then hit the "Search" button to start the search. But, I've been requested to have the search happen automatically as you select from the drop-down (i.e. without hitting the search button). Basically, I'd like to mimic the search from this website: Will County EEC Mobile Site. What would I have to change to do this?

I've been studying this sample code because the query for the "Well Type" does what I'm wanting: https://developers.arcgis.com/javascript/latest/sample-code/featurelayer-query/index.html. But, I can't grasp it.

Here is the functioning JS. And here is the whole app on Code Pen.

// JavaScript source code
    require([
    "esri/Map",
    "esri/views/MapView",
    "esri/layers/FeatureLayer",
    "esri/layers/GraphicsLayer",
    "esri/widgets/Search",
    "esri/widgets/Home",
    "esri/widgets/Expand"
    
    ], function (
    Map,
    MapView,
    FeatureLayer,
    GraphicsLayer,
    Search,
    Home,
    Expand
    
        ) {
            var catTypeSelect = document.getElementById("category");
            var keyTypeSelect = document.getElementById("keyword");
            var filterButton = document.getElementById("filterBtn");
            var resRb = document.getElementById("ResidentialRB");

            //***popups***
            //popup template
            var template = { //autocasts the new template
        title: "<font size='2.75px'><b>{USER_Name}</b>",
                content: [
                    {
                        // You can also set a descriptive text element
                        type: "text", // TextContentElement
                        text: "<font color='#1c9c52'><b>{Description}</b>"
                    },
                    { //set content elements in the order to display
        type: "fields",
                        fieldInfos: [{
        fieldName: "USER_Addre",
                            label: "Address",
                            visible: true,
                        },
                            {
        fieldName: "USER_City",
                            label: "City",
                            visible: true,
                            },
                            {
                                fieldName: "USER_Zip",
                                label: "Zip Code",
                                visible: true,
                            },
                        {
        fieldName: "USER_Phone",
                            label: " Phone",
                            visible: true,
                        },
                            {
        fieldName: "USER_Link",
                                label: "Website",
                                visible: true,
                            },
                        {
        fieldName: "USER_Notes",
                            label: "Extra Notes",
                            visible: true,
                        },]
                    },
],
            };

            // Recycle Layer
            var recycleLayer = new FeatureLayer({
            portalItem: {
            // autocasts as new PortalItem()
                    id: "b5665da3feab4b6091914cbfe4ab028f"
                },
                popupTemplate: template,
                outFields: ["*"],
                visible: false
            });

             // GraphicsLayer for displaying results
            var resultsLayer = new GraphicsLayer();
            //Set map view
            var map = new Map({
            basemap: "dark-gray",
                layers: [recycleLayer, resultsLayer]
            });

            var view = new MapView({
                container: "viewDiv",
                map: map,
                center: [-88.7, 41.8],
                zoom: 8.7,
                padding: {
                    right: 380,
                },

                //popup
                popup: {
        }
            });
            //widthbreakpoint for sidebar
            view.watch("widthBreakpoint", function (newVal) {
                console.log(newVal);
                if ((newVal === "medium") || newVal === "small") {
                    document.getElementById('sidebar').style.display = 'none';
                }
                else {
                    document.getElementById('sidebar').style.display = 'block';
                }
            });
                        
            //***widgets***

            ////Expand instance and set content property to the div element
            //var bgExpand = new Expand({
            //    view: view,
            //    content: div
            //});

            // // Add the expand instance to the ui
            //view.ui.add(textExpand, "top-right");

            //home widget
            var homeBtn = new Home({
            view: view,
            });
            view.ui.add(homeBtn, "bottom-left");

            //search widget
            const searchWidget = new Search({
                view: view
            });
            //Adds the search widget below other elements in
            //the top left corner of the view
            view.ui.add(searchWidget, {
                position: "bottom-left",
                index: 2
            })

            // query all features from the recycle layer
            view
                .when(function () {
                    return recycleLayer.when(function () {
                        var query = recycleLayer.createQuery();
                        return recycleLayer.queryFeatures(query);
                    });
                })
                .then(getValues)
                .then(getUniqueValues)
                .then(addToSelect)
            // re-query the layer based on the selected Category and re-populate the keyword select
            catTypeSelect.addEventListener("change", function () {
                var sqlExp = "";
                if (catTypeSelect.selectedIndex > 0) {
            sqlExp += "Category LIKE '%" + catTypeSelect.options[catTypeSelect.selectedIndex].value + "%'";
                }
                var query = recycleLayer.createQuery();
                query.where = sqlExp;
                recycleLayer.queryFeatures(query)
                    .then(getValues2)
                    .then(getUniqueValues2)
                    .then(addToSelect2)
            });

            // return an array of all the values in the
            // Category and item_keyword fields of the Recycle layer
            function getValues(response) {
                var features = response.features;
                var values = features.map(function (feature) {
                    return {
            Category: feature.attributes.Category,
            item_keyword: feature.attributes.item_keyword
                    }
                });
                return values;
            }
            // re-query the layer based on the selected Category and re-populate the keyword select
            function getValues2(response) {
                var features = response.features;
                var values = features.map(function (feature) {
                    return feature.attributes.item_keyword
                });
                return values;
            }

            // return an array of unique values in
            // the item_keyword and Category fields of the Recycle layer
            function getUniqueValues(values) {
                var uniqueKeyValues = [];
                var uniqueCatValues = [];

                values.forEach(function (item, i) {
                    var keyVal = item.item_keyword.split(";");
                    var catVal = item.Category.split(";");
                    catVal.map(function (val1) {
                        if (
                            (uniqueCatValues.length < 1 || uniqueCatValues.indexOf(val1) === -1) &&
                            val1 !== ""
                        ) {
            uniqueCatValues.push(val1);
                        }
                    });
                    keyVal.map(function (val2) {
                        if (
                            (uniqueKeyValues.length < 1 || uniqueKeyValues.indexOf(val2) === -1) &&
                            val2 !== ""
                        ) {
            uniqueKeyValues.push(val2);
                        }
                    });
                });
                return {
            uKeyVals: uniqueKeyValues,
                    uCatVals: uniqueCatValues
                };
            }
            // re-query the layer based on the selected Category and re-populate the keyword select
            function getUniqueValues2(values) {
                var uniqueKeyValues = [];

                values.forEach(function (item, i) {
                    var keyVal = item.split(";");
                    keyVal.map(function (val2) {
                        if (
                            (uniqueKeyValues.length < 1 || uniqueKeyValues.indexOf(val2) === -1) &&
                            val2 !== ""
                        ) {
            uniqueKeyValues.push(val2);
                        }
                    });
                });
                return uniqueKeyValues;
            }

            // Add the unique values to the recycle type
            // select element. This will allow the user
            // to filter categories by type.
            function addToSelect(values) {
                var dOpt = document.createElement("option");
                dOpt.value = "";

                dOpt.selected = true;
                dOpt.text = "Select one";
                catTypeSelect.add(dOpt);
                values.uCatVals.sort();
                values.uCatVals.forEach(function (value) {
                    var option = document.createElement("option");
                    option.text = value;
                    catTypeSelect.add(option);
                });

                var dOpt2 = document.createElement("option");
                dOpt2.value = "";

                dOpt2.selected = true;
                dOpt2.text = "Select one";
                keyTypeSelect.add(dOpt2);
                values.uKeyVals.sort();
                values.uKeyVals.forEach(function (value) {
                    var option = document.createElement("option");
                    option.text = value;
                    keyTypeSelect.add(option);
                });

                return setDefinitionExpression();
            }
            // re-query the layer based on the selected Category and re-populate the keyword select
            function addToSelect2(values) {
                while (keyTypeSelect.options.length > 0) {
            keyTypeSelect.remove(0);
                }
                var dOpt2 = document.createElement("option");
                dOpt2.value = "";
                dOpt2.disabled = true;
                dOpt2.selected = true;
                dOpt2.text = "Select one";
                keyTypeSelect.add(dOpt2);
                values.sort();
                values.forEach(function (value) {
                    var option = document.createElement("option");
                    option.text = value;
                    keyTypeSelect.add(option);
                });
                return true
            }

            // set the definition expression on the recycle
            // layer to reflect the selection of the user
            function setDefinitionExpression() {
                var sqlExp = "";
                if (catTypeSelect.selectedIndex > 0) {
            sqlExp += "Category LIKE '%" + catTypeSelect.options[catTypeSelect.selectedIndex].value + "%'";
                }
                if (keyTypeSelect.selectedIndex > 0) {
                    if (sqlExp === "") {
            sqlExp += "item_keyword LIKE '%" + keyTypeSelect.options[keyTypeSelect.selectedIndex].value + "%'";
                    } else {
            sqlExp += " AND item_keyword LIKE '%" + keyTypeSelect.options[keyTypeSelect.selectedIndex].value + "%'";
                    }
                }
                if (resRb.checked) {
                    if (sqlExp !== "") {
            sqlExp += " AND USER_IsRes = 'TRUE'";
                    }

                } else {
                    if (sqlExp !== "") {
            sqlExp += " AND USER_IsBus = 'TRUE'";
                    }
                }
                console.info(sqlExp);
                recycleLayer.definitionExpression = sqlExp;

                if (!recycleLayer.visible) {
            recycleLayer.visible = true;
                }

                return queryForGeometries();
            }

            // Get all the geometries of the recycle layer
            // the createQuery() method creates a query
            // object that respects the definitionExpression
            // of the layer
            function queryForGeometries() {
                var rQuery = recycleLayer.createQuery();

                return recycleLayer.queryFeatures(rQuery).then(function (response) {
            rGeometries = response.features.map(function (feature) {
                return feature.geometry;
            });

                    return rGeometries;
                });
            }

            filterButton.addEventListener("click", function () {
            setDefinitionExpression();
            });
        
        });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Query Automatically

KenBuja — Wed, 23 Sep 2020 18:18:11 GMT

Simply add the setDefinitionExpression function to the catTypeSelect's change function (line 166)

Re: Query Automatically

JaredPilbeam2 — Wed, 23 Sep 2020 18:36:57 GMT

Ken,

Do you mean line 166 from above?

Re: Query Automatically

KenBuja — Sat, 11 Dec 2021 17:46:32 GMT

Looking at it a bit more closely, I made the following changes. Now it responds when you change either dropdown menu and click either radio button.

// JavaScript source code
require([
  "esri/Map",
  "esri/views/MapView",
  "esri/layers/FeatureLayer",
  "esri/layers/GraphicsLayer",
  "esri/widgets/Search",
  "esri/widgets/Home",
  "esri/widgets/Expand"

], function (
  Map,
  MapView,
  FeatureLayer,
  GraphicsLayer,
  Search,
  Home,
  Expand

) {
  var catTypeSelect = document.getElementById("category");
  var keyTypeSelect = document.getElementById("keyword");
  var filterButton = document.getElementById("filterBtn");
  var resRb = document.getElementById("ResidentialRB");
  var busRb = document.getElementById("BusinessRB");
  //***popups***
  //popup template
  var template = { //autocasts the new template
    title: "<font size='2.75px'><b>{USER_Name}</b>",
    content: [
      {
        // You can also set a descriptive text element
        type: "text", // TextContentElement
        text: "<font color='#1c9c52'><b>{Description}</b>"
      },
      { //set content elements in the order to display
        type: "fields",
        fieldInfos: [{
          fieldName: "USER_Addre",
          label: "Address",
          visible: true,
        },
        {
          fieldName: "USER_City",
          label: "City",
          visible: true,
        },
        {
          fieldName: "USER_Zip",
          label: "Zip Code",
          visible: true,
        },
        {
          fieldName: "USER_Phone",
          label: " Phone",
          visible: true,
        },
        {
          fieldName: "USER_Link",
          label: "Website",
          visible: true,
        },
        {
          fieldName: "USER_Notes",
          label: "Extra Notes",
          visible: true,
        },]
      },
    ],
  };

  // Recycle Layer
  var recycleLayer = new FeatureLayer({
    portalItem: {
      // autocasts as new PortalItem()
      id: "b5665da3feab4b6091914cbfe4ab028f"
    },
    popupTemplate: template,
    outFields: ["*"],
    visible: false
  });

  // GraphicsLayer for displaying results
  var resultsLayer = new GraphicsLayer();
  //Set map view
  var map = new Map({
    basemap: "dark-gray",
    layers: [recycleLayer, resultsLayer]
  });

  var view = new MapView({
    container: "viewDiv",
    map: map,
    center: [-88.7, 41.8],
    zoom: 8.7,
    padding: {
      right: 380,
    },

    //popup
    popup: {
    }
  });
  //widthbreakpoint for sidebar
  view.watch("widthBreakpoint", function (newVal) {
    console.log(newVal);
    if ((newVal === "medium") || newVal === "small") {
      document.getElementById('sidebar').style.display = 'none';
    }
    else {
      document.getElementById('sidebar').style.display = 'block';
    }
  });

  //***widgets***

  ////Expand instance and set content property to the div element
  //var bgExpand = new Expand({
  //    view: view,
  //    content: div
  //});

  // // Add the expand instance to the ui
  //view.ui.add(textExpand, "top-right");

  //home widget
  var homeBtn = new Home({
    view: view,
  });
  view.ui.add(homeBtn, "bottom-left");

  //search widget
  const searchWidget = new Search({
    view: view
  });
  //Adds the search widget below other elements in
  //the top left corner of the view
  view.ui.add(searchWidget, {
    position: "bottom-left",
    index: 2
  })

  // query all features from the recycle layer
  view
    .when(function () {
      return recycleLayer.when(function () {
        var query = recycleLayer.createQuery();
        return recycleLayer.queryFeatures(query);
      });
    })
    .then(getValues)
    .then(getUniqueValues)
    .then(addToSelect);
  // re-query the layer based on the selected Category and re-populate the keyword select
  catTypeSelect.addEventListener("change", function () {
    var sqlExp = "";
    if (catTypeSelect.selectedIndex > 0) {
      sqlExp += "Category LIKE '%" + catTypeSelect.options[catTypeSelect.selectedIndex].value + "%'";
    }
    var query = recycleLayer.createQuery();
    query.where = sqlExp;
    recycleLayer.queryFeatures(query)
      .then(getValues2)
      .then(getUniqueValues2)
      .then(addToSelect2);
    setDefinitionExpression();
  });

  keyTypeSelect.addEventListener("change", setDefinitionExpression);

  resRb.addEventListener("change", setDefinitionExpression);
  busRb.addEventListener('change', setDefinitionExpression);


  // return an array of all the values in the
  // Category and item_keyword fields of the Recycle layer
  function getValues(response) {
    var features = response.features;
    var values = features.map(function (feature) {
      return {
        Category: feature.attributes.Category,
        item_keyword: feature.attributes.item_keyword
      }
    });
    return values;
  }
  // re-query the layer based on the selected Category and re-populate the keyword select
  function getValues2(response) {
    var features = response.features;
    var values = features.map(function (feature) {
      return feature.attributes.item_keyword
    });
    return values;
  }

  // return an array of unique values in
  // the item_keyword and Category fields of the Recycle layer
  function getUniqueValues(values) {
    var uniqueKeyValues = [];
    var uniqueCatValues = [];

    values.forEach(function (item, i) {
      var keyVal = item.item_keyword.split(";");
      var catVal = item.Category.split(";");
      catVal.map(function (val1) {
        if (
          (uniqueCatValues.length < 1 || uniqueCatValues.indexOf(val1) === -1) &&
          val1 !== ""
        ) {
          uniqueCatValues.push(val1);
        }
      });
      keyVal.map(function (val2) {
        if (
          (uniqueKeyValues.length < 1 || uniqueKeyValues.indexOf(val2) === -1) &&
          val2 !== ""
        ) {
          uniqueKeyValues.push(val2);
        }
      });
    });
    return {
      uKeyVals: uniqueKeyValues,
      uCatVals: uniqueCatValues
    };
  }
  // re-query the layer based on the selected Category and re-populate the keyword select
  function getUniqueValues2(values) {
    var uniqueKeyValues = [];

    values.forEach(function (item, i) {
      var keyVal = item.split(";");
      keyVal.map(function (val2) {
        if (
          (uniqueKeyValues.length < 1 || uniqueKeyValues.indexOf(val2) === -1) &&
          val2 !== ""
        ) {
          uniqueKeyValues.push(val2);
        }
      });
    });
    return uniqueKeyValues;
  }

  // Add the unique values to the recycle type
  // select element. This will allow the user
  // to filter categories by type.
  function addToSelect(values) {
    var dOpt = document.createElement("option");
    dOpt.value = "";

    dOpt.selected = true;
    dOpt.text = "Select one";
    catTypeSelect.add(dOpt);
    values.uCatVals.sort();
    values.uCatVals.forEach(function (value) {
      var option = document.createElement("option");
      option.text = value;
      catTypeSelect.add(option);
    });

    var dOpt2 = document.createElement("option");
    dOpt2.value = "";

    dOpt2.selected = true;
    dOpt2.text = "Select one";
    keyTypeSelect.add(dOpt2);
    values.uKeyVals.sort();
    values.uKeyVals.forEach(function (value) {
      var option = document.createElement("option");
      option.text = value;
      keyTypeSelect.add(option);
    });

    return setDefinitionExpression();
  }
  // re-query the layer based on the selected Category and re-populate the keyword select
  function addToSelect2(values) {
    while (keyTypeSelect.options.length > 0) {
      keyTypeSelect.remove(0);
    }
    var dOpt2 = document.createElement("option");
    dOpt2.value = "";
    dOpt2.disabled = true;
    dOpt2.selected = true;
    dOpt2.text = "Select one";
    keyTypeSelect.add(dOpt2);
    values.sort();
    values.forEach(function (value) {
      var option = document.createElement("option");
      option.text = value;
      keyTypeSelect.add(option);
    });
    return true
  }

  // set the definition expression on the recycle
  // layer to reflect the selection of the user
  function setDefinitionExpression() {
    var sqlExp = "";
    if (catTypeSelect.selectedIndex > 0) {
      sqlExp += "Category LIKE '%" + catTypeSelect.options[catTypeSelect.selectedIndex].value + "%'";
    }
    if (keyTypeSelect.selectedIndex > 0) {
      if (sqlExp === "") {
        sqlExp += "item_keyword LIKE '%" + keyTypeSelect.options[keyTypeSelect.selectedIndex].value + "%'";
      } else {
        sqlExp += " AND item_keyword LIKE '%" + keyTypeSelect.options[keyTypeSelect.selectedIndex].value + "%'";
      }
    }
    if (resRb.checked) {
      if (sqlExp !== "") {
        sqlExp += " AND USER_IsRes = 'TRUE'";
      }

    } else {
      if (sqlExp !== "") {
        sqlExp += " AND USER_IsBus = 'TRUE'";
      }
    }
    console.info(sqlExp);
    recycleLayer.definitionExpression = sqlExp;

    if (!recycleLayer.visible) {
      recycleLayer.visible = true;
    }

    return queryForGeometries();
  }

  // Get all the geometries of the recycle layer
  // the createQuery() method creates a query
  // object that respects the definitionExpression
  // of the layer
  function queryForGeometries() {
    console.log('Running query');
    var rQuery = recycleLayer.createQuery();

    return recycleLayer.queryFeatures(rQuery).then(function (response) {
      rGeometries = response.features.map(function (feature) {
        return feature.geometry;
      });

      return rGeometries;
    });
  }

  filterButton.addEventListener("click", function () {
    setDefinitionExpression();
  });

});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍