I'm having trouble adding a loading icon to this app. I want it to appear when the user makes a query. In the map, the points change to whatever category or item_keyword the user selects from the two drop-downs. As it stands, after making a selection the user can't tell when the process completes. I'm able to display a loading icon for the map view as this example demonstrates, but I'm not sure how to do it on a query. Here's the section of my app dealing with queries: // 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 ) ; // 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 ( ) ; } ) ; } ) ;

No there isn't. Just simply add the domClass.add('loadingDiv', 'visible'); before recycleLayer . queryFeatures ( query ) ... and remove it in the addToSelect2 method as I mentioned before.

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Loading icon on query

JaredPilbeam2

I'm having trouble adding a loading icon to this app. I want it to appear when the user makes a query. In the map, the points change to whatever category or item_keyword the user selects from the two drop-downs. As it stands, after making a selection the user can't tell when the process completes.

I'm able to display a loading icon for the map view as this example demonstrates, but I'm not sure how to do it on a query.

Here's the section of my app dealing with queries:

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

    keyTypeSelect<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addEventListener</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"change"</SPAN><SPAN class="punctuation token">,</SPAN> setDefinitionExpression<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

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

    <SPAN class="comment token">// return an array of unique values in</SPAN>
    <SPAN class="comment token">// the item_keyword and Category fields of the Recycle layer</SPAN>
    <SPAN class="keyword token">function</SPAN> <SPAN class="token function">getUniqueValues</SPAN><SPAN class="punctuation token">(</SPAN>values<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="keyword token">var</SPAN> uniqueKeyValues <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">var</SPAN> uniqueCatValues <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>

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

        values<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>item<SPAN class="punctuation token">,</SPAN> i<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="keyword token">var</SPAN> keyVal <SPAN class="operator token">=</SPAN> item<SPAN class="punctuation token">.</SPAN><SPAN class="token function">split</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">";"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            keyVal<SPAN class="punctuation token">.</SPAN><SPAN class="token function">map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>val2<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>
                    <SPAN class="punctuation token">(</SPAN>uniqueKeyValues<SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token"><</SPAN> <SPAN class="number token">1</SPAN> <SPAN class="operator token">||</SPAN>
                        uniqueKeyValues<SPAN class="punctuation token">.</SPAN><SPAN class="token function">indexOf</SPAN><SPAN class="punctuation token">(</SPAN>val2<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">===</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">&&</SPAN>
                    val2 <SPAN class="operator token">!==</SPAN> <SPAN class="string token">""</SPAN>
                <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                    uniqueKeyValues<SPAN class="punctuation token">.</SPAN><SPAN class="token function">push</SPAN><SPAN class="punctuation token">(</SPAN>val2<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="punctuation token">}</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">return</SPAN> uniqueKeyValues<SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>

    <SPAN class="comment token">// Add the unique values to the recycle type</SPAN>
    <SPAN class="comment token">// select element. This will allow the user</SPAN>
    <SPAN class="comment token">// to filter categories by type.</SPAN>
    <SPAN class="keyword token">function</SPAN> <SPAN class="token function">addToSelect</SPAN><SPAN class="punctuation token">(</SPAN>values<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="keyword token">var</SPAN> dOpt <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createElement</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"option"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        dOpt<SPAN class="punctuation token">.</SPAN>value <SPAN class="operator token">=</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">;</SPAN>

        dOpt<SPAN class="punctuation token">.</SPAN>selected <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN>
        dOpt<SPAN class="punctuation token">.</SPAN>text <SPAN class="operator token">=</SPAN> <SPAN class="string token">"Select one"</SPAN><SPAN class="punctuation token">;</SPAN>
        catTypeSelect<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>dOpt<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        values<SPAN class="punctuation token">.</SPAN>uCatVals<SPAN class="punctuation token">.</SPAN><SPAN class="token function">sort</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        values<SPAN class="punctuation token">.</SPAN>uCatVals<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>value<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="keyword token">var</SPAN> option <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createElement</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"option"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            option<SPAN class="punctuation token">.</SPAN>text <SPAN class="operator token">=</SPAN> value<SPAN class="punctuation token">;</SPAN>
            catTypeSelect<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>option<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        <SPAN class="keyword token">var</SPAN> dOpt2 <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createElement</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"option"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        dOpt2<SPAN class="punctuation token">.</SPAN>value <SPAN class="operator token">=</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">;</SPAN>

        dOpt2<SPAN class="punctuation token">.</SPAN>selected <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN>
        dOpt2<SPAN class="punctuation token">.</SPAN>text <SPAN class="operator token">=</SPAN> <SPAN class="string token">"Select one"</SPAN><SPAN class="punctuation token">;</SPAN>
        keyTypeSelect<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>dOpt2<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        values<SPAN class="punctuation token">.</SPAN>uKeyVals<SPAN class="punctuation token">.</SPAN><SPAN class="token function">sort</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        values<SPAN class="punctuation token">.</SPAN>uKeyVals<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>value<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="keyword token">var</SPAN> option <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createElement</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"option"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            option<SPAN class="punctuation token">.</SPAN>text <SPAN class="operator token">=</SPAN> value<SPAN class="punctuation token">;</SPAN>
            keyTypeSelect<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>option<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

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

    <SPAN class="comment token">// set the definition expression on the recycle</SPAN>
    <SPAN class="comment token">// layer to reflect the selection of the user</SPAN>
    <SPAN class="keyword token">function</SPAN> <SPAN class="token function">setDefinitionExpression</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="keyword token">var</SPAN> sqlExp <SPAN class="operator token">=</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>catTypeSelect<SPAN class="punctuation token">.</SPAN>selectedIndex <SPAN class="operator token">></SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            sqlExp <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN>
                <SPAN class="string token">"Category LIKE '%"</SPAN> <SPAN class="operator token">+</SPAN>
                catTypeSelect<SPAN class="punctuation token">.</SPAN>options<SPAN class="punctuation token">[</SPAN>catTypeSelect<SPAN class="punctuation token">.</SPAN>selectedIndex<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>value <SPAN class="operator token">+</SPAN>
                <SPAN class="string token">"%'"</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN>
        <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>keyTypeSelect<SPAN class="punctuation token">.</SPAN>selectedIndex <SPAN class="operator token">></SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>sqlExp <SPAN class="operator token">===</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                sqlExp <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN>
                    <SPAN class="string token">"item_keyword LIKE '%"</SPAN> <SPAN class="operator token">+</SPAN>
                    keyTypeSelect<SPAN class="punctuation token">.</SPAN>options<SPAN class="punctuation token">[</SPAN>keyTypeSelect<SPAN class="punctuation token">.</SPAN>selectedIndex<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>value <SPAN class="operator token">+</SPAN>
                    <SPAN class="string token">"%'"</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
                sqlExp <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN>
                    <SPAN class="string token">" AND item_keyword LIKE '%"</SPAN> <SPAN class="operator token">+</SPAN>
                    keyTypeSelect<SPAN class="punctuation token">.</SPAN>options<SPAN class="punctuation token">[</SPAN>keyTypeSelect<SPAN class="punctuation token">.</SPAN>selectedIndex<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>value <SPAN class="operator token">+</SPAN>
                    <SPAN class="string token">"%'"</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN>
        <SPAN class="punctuation token">}</SPAN>
        <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>resRb<SPAN class="punctuation token">.</SPAN>checked<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>sqlExp <SPAN class="operator token">!==</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                sqlExp <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">" AND USER_IsRes = 'TRUE'"</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN>
        <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>sqlExp <SPAN class="operator token">!==</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                sqlExp <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">" AND USER_IsBus = 'TRUE'"</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN>
        <SPAN class="punctuation token">}</SPAN>
        console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">info</SPAN><SPAN class="punctuation token">(</SPAN>sqlExp<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        recycleLayer<SPAN class="punctuation token">.</SPAN>definitionExpression <SPAN class="operator token">=</SPAN> sqlExp<SPAN class="punctuation token">;</SPAN>

        <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="operator token">!</SPAN>recycleLayer<SPAN class="punctuation token">.</SPAN>visible<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            recycleLayer<SPAN class="punctuation token">.</SPAN>visible <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN>

        <SPAN class="keyword token">return</SPAN> <SPAN class="token function">queryForGeometries</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>

    <SPAN class="comment token">// Get all the geometries of the recycle layer</SPAN>
    <SPAN class="comment token">// the createQuery() method creates a query</SPAN>
    <SPAN class="comment token">// object that respects the definitionExpression</SPAN>
    <SPAN class="comment token">// of the layer</SPAN>
    <SPAN class="keyword token">function</SPAN> <SPAN class="token function">queryForGeometries</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"Running query"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">var</SPAN> rQuery <SPAN class="operator token">=</SPAN> recycleLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createQuery</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        <SPAN class="keyword token">return</SPAN> recycleLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">queryFeatures</SPAN><SPAN class="punctuation token">(</SPAN>rQuery<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            rGeometries <SPAN class="operator token">=</SPAN> response<SPAN class="punctuation token">.</SPAN>features<SPAN class="punctuation token">.</SPAN><SPAN class="token function">map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>feature<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                <SPAN class="keyword token">return</SPAN> feature<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

            <SPAN class="keyword token">return</SPAN> rGeometries<SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>

    filterButton<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addEventListener</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"click"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="token function">setDefinitionExpression</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Trouver plus de publications taguées avec

Accepted answers

rscheitlin

No there isn't. Just simply add the

domClass.add('loadingDiv', 'visible');

before

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; recycleLayer
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">.</SPAN><SPAN class="" style="color: #d74444; border: 0px; font-weight: inherit; font-size: 14px;">queryFeatures</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">(</SPAN>query<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">)
...</SPAN>

and remove it in the addToSelect2 method as I mentioned before.

All comments

JaredPilbeam2

Robert,

Sorry to drag you back into this one. I was wondering how to get the loading div to show when you query both the Category and item_keyword? Right now, the div shows for the Category only.

JaredPilbeam2

Thanks!

For posterity:

        <SPAN class="keyword token">var</SPAN> query <SPAN class="operator token">=</SPAN> recycleLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createQuery</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        query<SPAN class="punctuation token">.</SPAN>where <SPAN class="operator token">=</SPAN> sqlExp<SPAN class="punctuation token">;</SPAN>
        domClass<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'loadingDiv'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'visible'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">//add loadingDiv here</SPAN>
        recycleLayer
            <SPAN class="punctuation token">.</SPAN><SPAN class="token function">queryFeatures</SPAN><SPAN class="punctuation token">(</SPAN>query<SPAN class="punctuation token">)</SPAN>
            <SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN>getValues2<SPAN class="punctuation token">)</SPAN>
            <SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN>getUniqueValues2<SPAN class="punctuation token">)</SPAN>
            <SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN>addToSelect2<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

select
    <SPAN class="keyword token">function</SPAN> <SPAN class="token function">addToSelect2</SPAN><SPAN class="punctuation token">(</SPAN>values<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="keyword token">while</SPAN> <SPAN class="punctuation token">(</SPAN>keyTypeSelect<SPAN class="punctuation token">.</SPAN>options<SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token">></SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            keyTypeSelect<SPAN class="punctuation token">.</SPAN><SPAN class="token function">remove</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            domClass<SPAN class="punctuation token">.</SPAN><SPAN class="token function">remove</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'loadingDiv'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'visible'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">//remove loadingDiv here</SPAN>
        <SPAN class="punctuation token">}</SPAN>‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

rscheitlin

No there isn't. Just simply add the

domClass.add('loadingDiv', 'visible');

before

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; recycleLayer
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">.</SPAN><SPAN class="" style="color: #d74444; border: 0px; font-weight: inherit; font-size: 14px;">queryFeatures</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">(</SPAN>query<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">)
...</SPAN>

and remove it in the addToSelect2 method as I mentioned before.

JaredPilbeam2

Thanks Robert,

It's apparently a pretty simple operation, but where exactly to put this stuff is not really popping out at me. Is there not an example somewhere?

rscheitlin

Jared,

You show the div when you right before you execute the query.

domClass.add('loadingDiv', 'visible'); and then in your results function (the last one addToSelect2) you hide it.

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.