This question is a continuation of my last one: Query Features by Category and Keyword The app so far has two drop-downs. The user can query by categories and query by keywords. ! DOCTYPE html > html > head > meta charset = "utf-8" / > meta name = "viewport" content = "initial-scale=1,maximum-scale=1,user-scalable=no" / > title > Recycling Map / title > link rel = "stylesheet" href = "https://js.arcgis.com/4.15/esri/themes/light/main.css" / > script src = "https://js.arcgis.com/4.15/" > / script > style > html , body , #viewDiv { height : 100 % ; width : 100 % ; margin : 0 ; padding : 0 ; } #infoDiv { background - color : white ; color : black ; padding : 6px ; width : 440px ; } #titleDiv { padding : 10px ; } #titleText { font - size : 20pt ; font - weight : 60 ; padding - bottom : 10px ; } #results { font - weight : bolder ; padding - top : 10px ; } #category , #keyword { margin - top : 8px ; margin - bottom : 8px ; } / style > script > require ( [ "esri/Map" , "esri/views/MapView" , "esri/layers/FeatureLayer" , "esri/layers/GraphicsLayer" , "esri/geometry/geometryEngine" , "esri/Graphic" ] , function ( Map , MapView , FeatureLayer , GraphicsLayer , geometryEngine , Graphic ) { var catTypeSelect = document . getElementById ( "category" ) ; var keyTypeSelect = document . getElementById ( "keyword" ) ; var filterButton = document . getElementById ( "SelectBtn" ) ; // Recycling Locations View var recycleLayer = new FeatureLayer ( { portalItem : { // autocasts as new PortalItem() id : "227061be60a14cc89946a978b440d227" } , outFields : [ "*" ] , visible : false } ) ; // GraphicsLayer for displaying results var resultsLayer = new GraphicsLayer ( ) ; var map = new Map ( { basemap : "dark-gray" , layers : [ recycleLayer , resultsLayer ] } ) ; var view = new MapView ( { container : "viewDiv" , map : map , center : [ - 87.95 , 41.47 ] , zoom : 10 } ) ; view . ui . add ( "infoDiv" , "top-left" ) ; // 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 ) // return an array of all the values in the // USER_Categ and USER_Keyword fields of the Recycle layer function getValues ( response ) { var features = response . features ; var values = features . map ( function ( feature ) { return { USER_Categ : feature . attributes . USER_Categ , USER_Keywo : feature . attributes . USER_Keywo } } ) ; return values ; } // return an array of unique values in // the keyword and category fields of the Recycle layer function getUniqueValues ( values ) { var uniqueKeyValues = [ ] ; var uniqueCatValues = [ ] ; values . forEach ( function ( item , i ) { var keyVal = item . USER_Keywo . split ( ";" ) ; var catVal = item . USER_Categ . 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 } ; } // Add the unique values to the category type // select element. This will allow the user // to filter categorys by type. function addToSelect ( values ) { values . uCatVals . sort ( ) ; values . uCatVals . forEach ( function ( value ) { var option = document . createElement ( "option" ) ; option . text = value ; catTypeSelect . add ( option ) ; } ) ; values . uKeyVals . sort ( ) ; values . uKeyVals . forEach ( function ( value ) { var option = document . createElement ( "option" ) ; option . text = value ; keyTypeSelect . add ( option ) ; } ) ; return setDefinitionExpression ( ) ; } // set the definition expression on the recycle // layer to reflect the selection of the user function setDefinitionExpression ( ) { var sqlExp = "" ; if ( catTypeSelect . selectedIndex > 0 ) { sqlExp + = "USER_Categ LIKE '%" + catTypeSelect . options [ catTypeSelect . selectedIndex ] . value + "%'" ; } if ( keyTypeSelect . selectedIndex > 0 ) { if ( sqlExp === "" ) { sqlExp + = "USER_Keywo LIKE '%" + keyTypeSelect . options [ keyTypeSelect . selectedIndex ] . value + "%'" ; } else { sqlExp + = " AND USER_Keywo LIKE '%" + keyTypeSelect . options [ keyTypeSelect . selectedIndex ] . value + "%'" ; } } 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 ( ) ; } ) ; // set a new definitionExpression on the recycle layer // catTypeSelect.addEventListener("change", function () { // var type = event.target.value; // setDefinitionExpression(type, "cat"); // }); // set a new definitionExpression on the recycle layer // keyTypeSelect.addEventListener("change", function () { // var type = event.target.value; // setDefinitionExpression(type, "key"); // }); view . ui . add ( "titleDiv" , "top-right" ) ; } ) ; / script > / head > body > div id = "viewDiv" > / div > div id = "infoDiv" class = "esri-widget" > div id = "drop-downs" > Select Category ( leave blank if searching by Keyword ) : select id = "category" class = "esri-widget" > / select > Select Keyword : select id = "keyword" class = "esri-widget" > / select > button id = "SelectBtn" class = "esri-button esri-button--secondary" > Search / button > / div > div id = "results" class = "esri-widget" > / div > / div > div id = "titleDiv" class = "esri-widget" > div id = "titleText" > Green Guide / div > div > Easy Ways To Be More Green / div > / div > / body > / html > Now I'd like to filter the categories and keywords based on two fields in the attribute table, USER_IsRes and USER_IsBus (residential and business). The values are either TRUE or FALSE-- Feature Layer View. I'm able to use a sample and loosely get that to function with the USER_IsRes field. ! DOCTYPE html > html > head > meta charset = "utf-8" / > meta name = "viewport" content = "initial-scale=1,maximum-scale=1,user-scalable=no" / > title > Filter features by attribute - 4.15 / title > link rel = "stylesheet" href = "https://js.arcgis.com/4.15/esri/themes/light/main.css" / > script src = "https://js.arcgis.com/4.15/" > / script > style > html , body , #viewDiv { padding : 0 ; margin : 0 ; height : 100 % ; width : 100 % ; } #res - filter { height : 160px ; width : 100 % ; visibility : hidden ; } . res - item { width : 100 % ; padding : 12px ; text - align : center ; vertical - align : baseline ; cursor : pointer ; height : 40px ; } . res - item : focus { background - color : dimgrey ; } . res - item : hover { background - color : dimgrey ; } #titleDiv { padding : 10px ; } #titleText { font - size : 20pt ; font - weight : 60 ; padding - bottom : 10px ; } / style > script > require ( [ "esri/views/MapView" , "esri/Map" , "esri/layers/FeatureLayer" , "esri/widgets/Expand" ] , function ( MapView , Map , FeatureLayer , Expand ) { let floodLayerView ; // flash flood warnings layer const layer = new FeatureLayer ( { portalItem : { id : "227061be60a14cc89946a978b440d227" } , outFields : [ "USER_IsRes" ] } ) ; const map = new Map ( { basemap : "gray-vector" , layers : [ layer ] } ) ; const view = new MapView ( { map : map , container : "viewDiv" , center : [ - 98 , 40 ] , zoom : 4 } ) ; const resNodes = document . querySelectorAll ( `.res-item` ) ; const resElement = document . getElementById ( "res-filter" ) ; // click event handler for res choices resElement . addEventListener ( "click" , filterByres ) ; // User clicked on Winter, Spring, Summer or Fall // set an attribute filter on flood warnings layer view // to display the warnings issued in that res function filterByres ( event ) { const selectedres = event . target . getAttribute ( "data-res" ) ; floodLayerView . filter = { where : "USER_IsRes = '" + selectedres + "'" , } ; } view . whenLayerView ( layer ) . then ( function ( layerView ) { // flash flood warnings layer loaded // get a reference to the flood warnings layerview floodLayerView = layerView ; // set up UI items resElement . style . visibility = "visible" ; const resExpand = new Expand ( { view : view , content : resElement , expandIconClass : "esri-icon-filter" , group : "top-left" } ) ; //clear the filters when user closes the expand widget resExpand . watch ( "expanded" , function ( ) { if ( ! resExpand . expanded ) { floodLayerView . filter = null ; } } ) ; view . ui . add ( resExpand , "top-left" ) ; view . ui . add ( "titleDiv" , "top-right" ) ; } ) ; } ) ; / script > / head > body > div id = "res-filter" class = "esri-widget" > div class = "res-item visible-res" data - res = "TRUE" > True / div > div class = "res-item visible-res" data - res = "False" > False / div > / div > div id = "viewDiv" > / div > div id = "titleDiv" class = "esri-widget" > div id = "titleText" > Flash Floods by res / div > div > Flash Flood Warnings ( 2002 - 2012 ) / div > / div > / body > / html > But, how do I incorporate the filter (preferably client side since they say it's faster) into the app? Once the user has either a keyword or category selected I want there to be a way to filter with either Residential or Business. In the end, the selection methods should more or less mirror this page: Will County EEC Mobile Site

Jared, You just have to add those to the sqlExp. ! DOCTYPE html > html > head > meta charset = "utf-8" / > meta name = "viewport" content = "initial-scale=1,maximum-scale=1,user-scalable=no" / > title > Recycling Map / title > link rel = "stylesheet" href = "https://js.arcgis.com/4.15/esri/themes/light/main.css" / > script src = "https://js.arcgis.com/4.15/" > / script > style > html , body , #viewDiv { height : 100 % ; width : 100 % ; margin : 0 ; padding : 0 ; } #viewDiv { position : absolute ; height : calc ( 100 % - 67px ) ; top : 67px ; } #filterDiv { position : relative ; background - color : white ; color : black ; padding : 6px ; top : 0 ; background : #d4e1c0 ; border - bottom : 1px dotted #91dca1 ; } #category , #keyword { margin - top : 8px ; margin - bottom : 8px ; display : inline - block ; } . drop - downs { width : 100 % ; } . oneline { display : inline - block ; margin - right : 6px ; } #filterBtn { position : fixed ; right : 6px ; top : 6px ; width : 50px ; font : bold 12px Trebuchet MS ; color : #fff ; background - color : # 098941 ; border : 1px solid #1c9c52 ; text - decoration : none ; cursor : pointer ; padding : 2px 4px ; } #filterBtn : hover { background - color : #098dd1 ; border : 1px solid #0ab0ed ; } / style > script > require ( [ "esri/Map" , "esri/views/MapView" , "esri/layers/FeatureLayer" , "esri/layers/GraphicsLayer" , "esri/geometry/geometryEngine" , "esri/Graphic" , ] , function ( Map , MapView , FeatureLayer , GraphicsLayer , geometryEngine , Graphic , ) { var catTypeSelect = document . getElementById ( "category" ) ; var keyTypeSelect = document . getElementById ( "keyword" ) ; var filterButton = document . getElementById ( "filterBtn" ) ; var resRb = document . getElementById ( "ResidentialRB" ) ; // oil and gas wells var recycleLayer = new FeatureLayer ( { portalItem : { // autocasts as new PortalItem() id : "227061be60a14cc89946a978b440d227" } , outFields : [ "*" ] , visible : false } ) ; // GraphicsLayer for displaying results var resultsLayer = new GraphicsLayer ( ) ; var map = new Map ( { basemap : "dark-gray" , layers : [ recycleLayer , resultsLayer ] } ) ; var view = new MapView ( { container : "viewDiv" , map : map , center : [ - 87.95 , 41.47 ] , zoom : 10 } ) ; // query all features from the wells layer view . when ( function ( ) { return recycleLayer . when ( function ( ) { var query = recycleLayer . createQuery ( ) ; return recycleLayer . queryFeatures ( query ) ; } ) ; } ) . then ( getValues ) . then ( getUniqueValues ) . then ( addToSelect ) // return an array of all the values in the // STATUS2 field of the wells layer function getValues ( response ) { var features = response . features ; var values = features . map ( function ( feature ) { return { USER_Categ : feature . attributes . USER_Categ , USER_Keywo : feature . attributes . USER_Keywo } } ) ; return values ; } // return an array of unique values in // the STATUS2 field of the wells layer function getUniqueValues ( values ) { var uniqueKeyValues = [ ] ; var uniqueCatValues = [ ] ; values . forEach ( function ( item , i ) { var keyVal = item . USER_Keywo . split ( ";" ) ; var catVal = item . USER_Categ . 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 } ; } // Add the unique values to the wells type // select element. This will allow the user // to filter wells by type. function addToSelect ( values ) { values . uCatVals . sort ( ) ; values . uCatVals . forEach ( function ( value ) { var option = document . createElement ( "option" ) ; option . text = value ; catTypeSelect . add ( option ) ; } ) ; values . uKeyVals . sort ( ) ; values . uKeyVals . forEach ( function ( value ) { var option = document . createElement ( "option" ) ; option . text = value ; keyTypeSelect . add ( option ) ; } ) ; return setDefinitionExpression ( ) ; } // set the definition expression on the recycle // layer to reflect the selection of the user function setDefinitionExpression ( ) { var sqlExp = "" ; if ( catTypeSelect . selectedIndex > 0 ) { sqlExp + = "USER_Categ LIKE '%" + catTypeSelect . options [ catTypeSelect . selectedIndex ] . value + "%'" ; } if ( keyTypeSelect . selectedIndex > 0 ) { if ( sqlExp === "" ) { sqlExp + = "USER_Keywo LIKE '%" + keyTypeSelect . options [ keyTypeSelect . selectedIndex ] . value + "%'" ; } else { sqlExp + = " AND USER_Keywo 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 ( ) ; } ) ; } ) ; / script > / head > body > div id = "viewDiv" > / div > div id = "filterDiv" > div class = "drop-downs" > div class = "oneline" > Select Category : / div > select id = "category" class = "oneline" > / select > div class = "oneline" > Select Keyword : / div > select id = "keyword" class = "oneline" > / select > div > input id = "ResidentialRB" name = "resorbus" type = "radio" value = "Residential" checked = "checked" > label for = "ResidentialRB" > Residential / label > input id = "BusinessRB" name = "resorbus" type = "radio" value = "Business" > label for = "BusinessRB" > Business / label > / div > button id = "filterBtn" > Filter / button > / div > / div > / body > / html >

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; } } }

Filter Features By Two Fields

JaredPilbeam2

This question is a continuation of my last one: Query Features by Category and Keyword

The app so far has two drop-downs. The user can query by categories and query by keywords.

<SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN>DOCTYPE html<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>html<SPAN class="operator token">></SPAN>

<SPAN class="operator token"><</SPAN>head<SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>meta charset<SPAN class="operator token">=</SPAN><SPAN class="string token">"utf-8"</SPAN> <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>meta name<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewport"</SPAN> content<SPAN class="operator token">=</SPAN><SPAN class="string token">"initial-scale=1,maximum-scale=1,user-scalable=no"</SPAN> <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>title<SPAN class="operator token">></SPAN>Recycling Map<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>title<SPAN class="operator token">></SPAN>

    <SPAN class="operator token"><</SPAN>link rel<SPAN class="operator token">=</SPAN><SPAN class="string token">"stylesheet"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token">"https://js.arcgis.com/4.15/esri/themes/light/main.css"</SPAN> <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>script src<SPAN class="operator token">=</SPAN><SPAN class="string token">"https://js.arcgis.com/4.15/"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>

    <SPAN class="operator token"><</SPAN>style<SPAN class="operator token">></SPAN>
        html<SPAN class="punctuation token">,</SPAN>
        body<SPAN class="punctuation token">,</SPAN>
        #viewDiv <SPAN class="punctuation token">{</SPAN>
            height<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
            width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
            margin<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
            padding<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN>

        #infoDiv <SPAN class="punctuation token">{</SPAN>
            background<SPAN class="operator token">-</SPAN>color<SPAN class="punctuation token">:</SPAN> white<SPAN class="punctuation token">;</SPAN>
            color<SPAN class="punctuation token">:</SPAN> black<SPAN class="punctuation token">;</SPAN>
            padding<SPAN class="punctuation token">:</SPAN> 6px<SPAN class="punctuation token">;</SPAN>
            width<SPAN class="punctuation token">:</SPAN> 440px<SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN>

        #titleDiv <SPAN class="punctuation token">{</SPAN>
            padding<SPAN class="punctuation token">:</SPAN> 10px<SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN>

        #titleText <SPAN class="punctuation token">{</SPAN>
            font<SPAN class="operator token">-</SPAN>size<SPAN class="punctuation token">:</SPAN> 20pt<SPAN class="punctuation token">;</SPAN>
            font<SPAN class="operator token">-</SPAN>weight<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">60</SPAN><SPAN class="punctuation token">;</SPAN>
            padding<SPAN class="operator token">-</SPAN>bottom<SPAN class="punctuation token">:</SPAN> 10px<SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN>

        #results <SPAN class="punctuation token">{</SPAN>
            font<SPAN class="operator token">-</SPAN>weight<SPAN class="punctuation token">:</SPAN> bolder<SPAN class="punctuation token">;</SPAN>
            padding<SPAN class="operator token">-</SPAN>top<SPAN class="punctuation token">:</SPAN> 10px<SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN>

        #category<SPAN class="punctuation token">,</SPAN>
        #keyword <SPAN class="punctuation token">{</SPAN>
            margin<SPAN class="operator token">-</SPAN>top<SPAN class="punctuation token">:</SPAN> 8px<SPAN class="punctuation token">;</SPAN>
            margin<SPAN class="operator token">-</SPAN>bottom<SPAN class="punctuation token">:</SPAN> 8px<SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN>

    <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>style<SPAN class="operator token">></SPAN>

    <SPAN class="operator token"><</SPAN>script<SPAN class="operator token">></SPAN>
        <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
            <SPAN class="string token">"esri/Map"</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="string token">"esri/views/MapView"</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="string token">"esri/layers/FeatureLayer"</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="string token">"esri/layers/GraphicsLayer"</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="string token">"esri/geometry/geometryEngine"</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="string token">"esri/Graphic"</SPAN>

        <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>
            Map<SPAN class="punctuation token">,</SPAN>
            MapView<SPAN class="punctuation token">,</SPAN>
            FeatureLayer<SPAN class="punctuation token">,</SPAN>
            GraphicsLayer<SPAN class="punctuation token">,</SPAN>
            geometryEngine<SPAN class="punctuation token">,</SPAN>
            Graphic
        <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>

            <SPAN class="keyword token">var</SPAN> catTypeSelect <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"category"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">var</SPAN> keyTypeSelect <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"keyword"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">var</SPAN> filterButton <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"SelectBtn"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

            <SPAN class="comment token">// Recycling Locations View</SPAN>
            <SPAN class="keyword token">var</SPAN> recycleLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
                portalItem<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                    <SPAN class="comment token">// autocasts as new PortalItem()</SPAN>
                    id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"227061be60a14cc89946a978b440d227"</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                outFields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"*"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                visible<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>



            <SPAN class="comment token">// GraphicsLayer for displaying results</SPAN>
            <SPAN class="keyword token">var</SPAN> resultsLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">GraphicsLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

            <SPAN class="keyword token">var</SPAN> map <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
                basemap<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"dark-gray"</SPAN><SPAN class="punctuation token">,</SPAN>
                layers<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>recycleLayer<SPAN class="punctuation token">,</SPAN> resultsLayer<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> view <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MapView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
                container<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"viewDiv"</SPAN><SPAN class="punctuation token">,</SPAN>
                map<SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">,</SPAN>
                center<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="operator token">-</SPAN><SPAN class="number token">87.95</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">41.47</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">10</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"infoDiv"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"top-left"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

            <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="comment token">// return an array of all the values in the</SPAN>
            <SPAN class="comment token">// USER_Categ and USER_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>
                        USER_Categ<SPAN class="punctuation token">:</SPAN> feature<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>USER_Categ<SPAN class="punctuation token">,</SPAN>
                        USER_Keywo<SPAN class="punctuation token">:</SPAN> feature<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>USER_Keywo
                    <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 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>USER_Keywo<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>USER_Categ<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">// Add the unique values to the category type</SPAN>
            <SPAN class="comment token">// select element. This will allow the user</SPAN>
            <SPAN class="comment token">// to filter categorys 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>
                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>

                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">// 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">"USER_Categ 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">"USER_Keywo 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 USER_Keywo 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>
                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>
                <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="comment token">// set a new definitionExpression on the recycle layer</SPAN>
            <SPAN class="comment token">// catTypeSelect.addEventListener("change", function () {</SPAN>
            <SPAN class="comment token">//   var type = event.target.value;</SPAN>
            <SPAN class="comment token">//   setDefinitionExpression(type, "cat");</SPAN>
            <SPAN class="comment token">// });</SPAN>

            <SPAN class="comment token">// set a new definitionExpression on the recycle layer</SPAN>
            <SPAN class="comment token">// keyTypeSelect.addEventListener("change", function () {</SPAN>
            <SPAN class="comment token">//   var type = event.target.value;</SPAN>
            <SPAN class="comment token">//   setDefinitionExpression(type, "key");</SPAN>
            <SPAN class="comment token">// });</SPAN>
            view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"titleDiv"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"top-right"</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="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>head<SPAN class="operator token">></SPAN>

<SPAN class="operator token"><</SPAN>body<SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewDiv"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"infoDiv"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"esri-widget"</SPAN><SPAN class="operator token">></SPAN>
        <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"drop-downs"</SPAN><SPAN class="operator token">></SPAN>
            Select Category <SPAN class="punctuation token">(</SPAN>leave blank <SPAN class="keyword token">if</SPAN> searching by Keyword<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">:</SPAN>
            <SPAN class="operator token"><</SPAN>select id<SPAN class="operator token">=</SPAN><SPAN class="string token">"category"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"esri-widget"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>select<SPAN class="operator token">></SPAN>
            Select Keyword<SPAN class="punctuation token">:</SPAN>
            <SPAN class="operator token"><</SPAN>select id<SPAN class="operator token">=</SPAN><SPAN class="string token">"keyword"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"esri-widget"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>select<SPAN class="operator token">></SPAN>
            <SPAN class="operator token"><</SPAN>button id<SPAN class="operator token">=</SPAN><SPAN class="string token">"SelectBtn"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"esri-button esri-button--secondary"</SPAN><SPAN class="operator token">></SPAN>Search<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>button<SPAN class="operator token">></SPAN>
        <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
        <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"results"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"esri-widget"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"titleDiv"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"esri-widget"</SPAN><SPAN class="operator token">></SPAN>
        <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"titleText"</SPAN><SPAN class="operator token">></SPAN>Green Guide<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
        <SPAN class="operator token"><</SPAN>div<SPAN class="operator token">></SPAN>Easy Ways To Be More Green<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>body<SPAN class="operator token">></SPAN>

<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>html<SPAN class="operator 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>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Now I'd like to filter the categories and keywords based on two fields in the attribute table, USER_IsRes and USER_IsBus (residential and business). The values are either TRUE or FALSE-- Feature Layer View. I'm able to use a sample and loosely get that to function with the USER_IsRes field.

<SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN>DOCTYPE html<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>html<SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>head<SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>meta charset<SPAN class="operator token">=</SPAN><SPAN class="string token">"utf-8"</SPAN> <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>meta
      name<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewport"</SPAN>
      content<SPAN class="operator token">=</SPAN><SPAN class="string token">"initial-scale=1,maximum-scale=1,user-scalable=no"</SPAN>
    <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>title<SPAN class="operator token">></SPAN>Filter features by attribute <SPAN class="operator token">-</SPAN> <SPAN class="number token">4.15</SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>title<SPAN class="operator token">></SPAN>

    <SPAN class="operator token"><</SPAN>link
      rel<SPAN class="operator token">=</SPAN><SPAN class="string token">"stylesheet"</SPAN>
      href<SPAN class="operator token">=</SPAN><SPAN class="string token">"https://js.arcgis.com/4.15/esri/themes/light/main.css"</SPAN>
    <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>script src<SPAN class="operator token">=</SPAN><SPAN class="string token">"https://js.arcgis.com/4.15/"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>

    <SPAN class="operator token"><</SPAN>style<SPAN class="operator token">></SPAN>
      html<SPAN class="punctuation token">,</SPAN>
      body<SPAN class="punctuation token">,</SPAN>
      #viewDiv <SPAN class="punctuation token">{</SPAN>
        padding<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
        margin<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
        height<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
        width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="punctuation token">}</SPAN>

      #res<SPAN class="operator token">-</SPAN>filter <SPAN class="punctuation token">{</SPAN>
        height<SPAN class="punctuation token">:</SPAN> 160px<SPAN class="punctuation token">;</SPAN>
        width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
        visibility<SPAN class="punctuation token">:</SPAN> hidden<SPAN class="punctuation token">;</SPAN>
      <SPAN class="punctuation token">}</SPAN>

      <SPAN class="punctuation token">.</SPAN>res<SPAN class="operator token">-</SPAN>item <SPAN class="punctuation token">{</SPAN>
        width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
        padding<SPAN class="punctuation token">:</SPAN> 12px<SPAN class="punctuation token">;</SPAN>
        text<SPAN class="operator token">-</SPAN>align<SPAN class="punctuation token">:</SPAN> center<SPAN class="punctuation token">;</SPAN>
        vertical<SPAN class="operator token">-</SPAN>align<SPAN class="punctuation token">:</SPAN> baseline<SPAN class="punctuation token">;</SPAN>
        cursor<SPAN class="punctuation token">:</SPAN> pointer<SPAN class="punctuation token">;</SPAN>
        height<SPAN class="punctuation token">:</SPAN> 40px<SPAN class="punctuation token">;</SPAN>
      <SPAN class="punctuation token">}</SPAN>

      <SPAN class="punctuation token">.</SPAN>res<SPAN class="operator token">-</SPAN>item<SPAN class="punctuation token">:</SPAN>focus <SPAN class="punctuation token">{</SPAN>
        background<SPAN class="operator token">-</SPAN>color<SPAN class="punctuation token">:</SPAN> dimgrey<SPAN class="punctuation token">;</SPAN>
      <SPAN class="punctuation token">}</SPAN>

      <SPAN class="punctuation token">.</SPAN>res<SPAN class="operator token">-</SPAN>item<SPAN class="punctuation token">:</SPAN>hover <SPAN class="punctuation token">{</SPAN>
        background<SPAN class="operator token">-</SPAN>color<SPAN class="punctuation token">:</SPAN> dimgrey<SPAN class="punctuation token">;</SPAN>
      <SPAN class="punctuation token">}</SPAN>

      #titleDiv <SPAN class="punctuation token">{</SPAN>
        padding<SPAN class="punctuation token">:</SPAN> 10px<SPAN class="punctuation token">;</SPAN>
      <SPAN class="punctuation token">}</SPAN>

      #titleText <SPAN class="punctuation token">{</SPAN>
        font<SPAN class="operator token">-</SPAN>size<SPAN class="punctuation token">:</SPAN> 20pt<SPAN class="punctuation token">;</SPAN>
        font<SPAN class="operator token">-</SPAN>weight<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">60</SPAN><SPAN class="punctuation token">;</SPAN>
        padding<SPAN class="operator token">-</SPAN>bottom<SPAN class="punctuation token">:</SPAN> 10px<SPAN class="punctuation token">;</SPAN>
      <SPAN class="punctuation token">}</SPAN>
    <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>style<SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>script<SPAN class="operator token">></SPAN>
      <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
        <SPAN class="string token">"esri/views/MapView"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"esri/Map"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"esri/layers/FeatureLayer"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"esri/widgets/Expand"</SPAN>
      <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>MapView<SPAN class="punctuation token">,</SPAN> Map<SPAN class="punctuation token">,</SPAN> FeatureLayer<SPAN class="punctuation token">,</SPAN> Expand<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>

         <SPAN class="keyword token">let</SPAN> floodLayerView<SPAN class="punctuation token">;</SPAN>

        <SPAN class="comment token">// flash flood warnings layer</SPAN>
        <SPAN class="keyword token">const</SPAN> layer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
          portalItem<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
          id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"227061be60a14cc89946a978b440d227"</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
            outFields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"USER_IsRes"</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">const</SPAN> map <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
          basemap<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"gray-vector"</SPAN><SPAN class="punctuation token">,</SPAN>
          layers<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>layer<SPAN class="punctuation token">]</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        <SPAN class="keyword token">const</SPAN> view <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MapView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
          map<SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">,</SPAN>
          container<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"viewDiv"</SPAN><SPAN class="punctuation token">,</SPAN>
          center<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="operator token">-</SPAN><SPAN class="number token">98</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">40</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
          zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">4</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        <SPAN class="keyword token">const</SPAN> resNodes <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">querySelectorAll</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="template-string token"><SPAN class="string token">`.res-item`</SPAN></SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">const</SPAN> resElement <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"res-filter"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        <SPAN class="comment token">// click event handler for res choices</SPAN>
        resElement<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> filterByres<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        <SPAN class="comment token">// User clicked on Winter, Spring, Summer or Fall</SPAN>
        <SPAN class="comment token">// set an attribute filter on flood warnings layer view</SPAN>
        <SPAN class="comment token">// to display the warnings issued in that res</SPAN>
        <SPAN class="keyword token">function</SPAN> <SPAN class="token function">filterByres</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="keyword token">const</SPAN> selectedres <SPAN class="operator token">=</SPAN> event<SPAN class="punctuation token">.</SPAN>target<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getAttribute</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"data-res"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          floodLayerView<SPAN class="punctuation token">.</SPAN>filter <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
              where<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"USER_IsRes = '"</SPAN> <SPAN class="operator token">+</SPAN> selectedres <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="punctuation token">}</SPAN>

        view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">whenLayerView</SPAN><SPAN class="punctuation token">(</SPAN>layer<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>layerView<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="comment token">// flash flood warnings layer loaded</SPAN>
          <SPAN class="comment token">// get a reference to the flood warnings layerview</SPAN>
          floodLayerView <SPAN class="operator token">=</SPAN> layerView<SPAN class="punctuation token">;</SPAN>

          <SPAN class="comment token">// set up UI items</SPAN>
          resElement<SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>visibility <SPAN class="operator token">=</SPAN> <SPAN class="string token">"visible"</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="keyword token">const</SPAN> resExpand <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Expand</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
            view<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">,</SPAN>
            content<SPAN class="punctuation token">:</SPAN> resElement<SPAN class="punctuation token">,</SPAN>
            expandIconClass<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"esri-icon-filter"</SPAN><SPAN class="punctuation token">,</SPAN>
            group<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"top-left"</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="comment token">//clear the filters when user closes the expand widget</SPAN>
          resExpand<SPAN class="punctuation token">.</SPAN><SPAN class="token function">watch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"expanded"</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">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="operator token">!</SPAN>resExpand<SPAN class="punctuation token">.</SPAN>expanded<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
              floodLayerView<SPAN class="punctuation token">.</SPAN>filter <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">null</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>
          view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>resExpand<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"top-left"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"titleDiv"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"top-right"</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="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>head<SPAN class="operator token">></SPAN>

  <SPAN class="operator token"><</SPAN>body<SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"res-filter"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"esri-widget"</SPAN><SPAN class="operator token">></SPAN>
      <SPAN class="operator token"><</SPAN>div <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"res-item visible-res"</SPAN> data<SPAN class="operator token">-</SPAN>res<SPAN class="operator token">=</SPAN><SPAN class="string token">"TRUE"</SPAN><SPAN class="operator token">></SPAN>True<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
      <SPAN class="operator token"><</SPAN>div <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"res-item visible-res"</SPAN> data<SPAN class="operator token">-</SPAN>res<SPAN class="operator token">=</SPAN><SPAN class="string token">"False"</SPAN><SPAN class="operator token">></SPAN>False<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewDiv"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"titleDiv"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"esri-widget"</SPAN><SPAN class="operator token">></SPAN>
      <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"titleText"</SPAN><SPAN class="operator token">></SPAN>Flash Floods by res<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
      <SPAN class="operator token"><</SPAN>div<SPAN class="operator token">></SPAN>Flash Flood Warnings <SPAN class="punctuation token">(</SPAN><SPAN class="number token">2002</SPAN> <SPAN class="operator token">-</SPAN> <SPAN class="number token">2012</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>body<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>html<SPAN class="operator 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>

But, how do I incorporate the filter (preferably client side since they say it's faster) into the app? Once the user has either a keyword or category selected I want there to be a way to filter with either Residential or Business.

In the end, the selection methods should more or less mirror this page: Will County EEC Mobile Site

Finde mehr Beiträge mit dem Tag

Accepted answers

rscheitlin

Jared,

You just have to add those to the sqlExp.

<SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN>DOCTYPE html<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>html<SPAN class="operator token">></SPAN>

<SPAN class="operator token"><</SPAN>head<SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>meta charset<SPAN class="operator token">=</SPAN><SPAN class="string token">"utf-8"</SPAN> <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>meta name<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewport"</SPAN> content<SPAN class="operator token">=</SPAN><SPAN class="string token">"initial-scale=1,maximum-scale=1,user-scalable=no"</SPAN> <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>title<SPAN class="operator token">></SPAN>Recycling Map<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>title<SPAN class="operator token">></SPAN>

  <SPAN class="operator token"><</SPAN>link rel<SPAN class="operator token">=</SPAN><SPAN class="string token">"stylesheet"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token">"https://js.arcgis.com/4.15/esri/themes/light/main.css"</SPAN> <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>script src<SPAN class="operator token">=</SPAN><SPAN class="string token">"https://js.arcgis.com/4.15/"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>

  <SPAN class="operator token"><</SPAN>style<SPAN class="operator token">></SPAN>
    html<SPAN class="punctuation token">,</SPAN>
    body<SPAN class="punctuation token">,</SPAN>
    #viewDiv <SPAN class="punctuation token">{</SPAN>
      height<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
      width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
      margin<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
      padding<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>

    #viewDiv <SPAN class="punctuation token">{</SPAN>
      position<SPAN class="punctuation token">:</SPAN> absolute<SPAN class="punctuation token">;</SPAN>
      height<SPAN class="punctuation token">:</SPAN> <SPAN class="token function">calc</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN> <SPAN class="operator token">-</SPAN> 67px<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      top<SPAN class="punctuation token">:</SPAN> 67px<SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>

    #filterDiv <SPAN class="punctuation token">{</SPAN>
      position<SPAN class="punctuation token">:</SPAN> relative<SPAN class="punctuation token">;</SPAN>
      background<SPAN class="operator token">-</SPAN>color<SPAN class="punctuation token">:</SPAN> white<SPAN class="punctuation token">;</SPAN>
      color<SPAN class="punctuation token">:</SPAN> black<SPAN class="punctuation token">;</SPAN>
      padding<SPAN class="punctuation token">:</SPAN> 6px<SPAN class="punctuation token">;</SPAN>
      top<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
      background<SPAN class="punctuation token">:</SPAN> #d4e1c0<SPAN class="punctuation token">;</SPAN>
      border<SPAN class="operator token">-</SPAN>bottom<SPAN class="punctuation token">:</SPAN> 1px dotted #91dca1<SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>

    #category<SPAN class="punctuation token">,</SPAN>
    #keyword <SPAN class="punctuation token">{</SPAN>
      margin<SPAN class="operator token">-</SPAN>top<SPAN class="punctuation token">:</SPAN> 8px<SPAN class="punctuation token">;</SPAN>
      margin<SPAN class="operator token">-</SPAN>bottom<SPAN class="punctuation token">:</SPAN> 8px<SPAN class="punctuation token">;</SPAN>
      display<SPAN class="punctuation token">:</SPAN> inline<SPAN class="operator token">-</SPAN>block<SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>

    <SPAN class="punctuation token">.</SPAN>drop<SPAN class="operator token">-</SPAN>downs <SPAN class="punctuation token">{</SPAN>
      width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>

    <SPAN class="punctuation token">.</SPAN>oneline <SPAN class="punctuation token">{</SPAN>
      display<SPAN class="punctuation token">:</SPAN> inline<SPAN class="operator token">-</SPAN>block<SPAN class="punctuation token">;</SPAN>
      margin<SPAN class="operator token">-</SPAN>right<SPAN class="punctuation token">:</SPAN> 6px<SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>

    #filterBtn <SPAN class="punctuation token">{</SPAN>
      position<SPAN class="punctuation token">:</SPAN> fixed<SPAN class="punctuation token">;</SPAN>
      right<SPAN class="punctuation token">:</SPAN> 6px<SPAN class="punctuation token">;</SPAN>
      top<SPAN class="punctuation token">:</SPAN> 6px<SPAN class="punctuation token">;</SPAN>
      width<SPAN class="punctuation token">:</SPAN> 50px<SPAN class="punctuation token">;</SPAN>
      font<SPAN class="punctuation token">:</SPAN> bold 12px Trebuchet MS<SPAN class="punctuation token">;</SPAN>
      color<SPAN class="punctuation token">:</SPAN> #fff<SPAN class="punctuation token">;</SPAN>
      background<SPAN class="operator token">-</SPAN>color<SPAN class="punctuation token">:</SPAN> #<SPAN class="number token">098941</SPAN><SPAN class="punctuation token">;</SPAN>
      border<SPAN class="punctuation token">:</SPAN> 1px solid #1c9c52<SPAN class="punctuation token">;</SPAN>
      text<SPAN class="operator token">-</SPAN>decoration<SPAN class="punctuation token">:</SPAN> none<SPAN class="punctuation token">;</SPAN>
      cursor<SPAN class="punctuation token">:</SPAN> pointer<SPAN class="punctuation token">;</SPAN>
      padding<SPAN class="punctuation token">:</SPAN> 2px 4px<SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>

    #filterBtn<SPAN class="punctuation token">:</SPAN>hover <SPAN class="punctuation token">{</SPAN>
      background<SPAN class="operator token">-</SPAN>color<SPAN class="punctuation token">:</SPAN> #098dd1<SPAN class="punctuation token">;</SPAN>
      border<SPAN class="punctuation token">:</SPAN> 1px solid #0ab0ed<SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>
  <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>style<SPAN class="operator token">></SPAN>

  <SPAN class="operator token"><</SPAN>script<SPAN class="operator token">></SPAN>
    <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
      <SPAN class="string token">"esri/Map"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/views/MapView"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/layers/FeatureLayer"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/layers/GraphicsLayer"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/geometry/geometryEngine"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/Graphic"</SPAN><SPAN class="punctuation token">,</SPAN>

    <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>
      Map<SPAN class="punctuation token">,</SPAN>
      MapView<SPAN class="punctuation token">,</SPAN>
      FeatureLayer<SPAN class="punctuation token">,</SPAN>
      GraphicsLayer<SPAN class="punctuation token">,</SPAN>
      geometryEngine<SPAN class="punctuation token">,</SPAN>
      Graphic<SPAN class="punctuation token">,</SPAN>
    <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>


      <SPAN class="keyword token">var</SPAN> catTypeSelect <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"category"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="keyword token">var</SPAN> keyTypeSelect <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"keyword"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="keyword token">var</SPAN> filterButton <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"filterBtn"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="keyword token">var</SPAN> resRb <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"ResidentialRB"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

      <SPAN class="comment token">// oil and gas wells</SPAN>
      <SPAN class="keyword token">var</SPAN> recycleLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
        portalItem<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="comment token">// autocasts as new PortalItem()</SPAN>
          id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"227061be60a14cc89946a978b440d227"</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
        outFields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"*"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
        visible<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>



      <SPAN class="comment token">// GraphicsLayer for displaying results</SPAN>
      <SPAN class="keyword token">var</SPAN> resultsLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">GraphicsLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

      <SPAN class="keyword token">var</SPAN> map <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
        basemap<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"dark-gray"</SPAN><SPAN class="punctuation token">,</SPAN>
        layers<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>recycleLayer<SPAN class="punctuation token">,</SPAN> resultsLayer<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> view <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MapView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
        container<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"viewDiv"</SPAN><SPAN class="punctuation token">,</SPAN>
        map<SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">,</SPAN>
        center<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="operator token">-</SPAN><SPAN class="number token">87.95</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">41.47</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
        zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">10</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

      <SPAN class="comment token">// query all features from the wells 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="comment token">// return an array of all the values in the</SPAN>
      <SPAN class="comment token">// STATUS2 field of the wells 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>
            USER_Categ<SPAN class="punctuation token">:</SPAN> feature<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>USER_Categ<SPAN class="punctuation token">,</SPAN>
            USER_Keywo<SPAN class="punctuation token">:</SPAN> feature<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>USER_Keywo
          <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 STATUS2 field of the wells 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>USER_Keywo<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>USER_Categ<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">// Add the unique values to the wells type</SPAN>
      <SPAN class="comment token">// select element. This will allow the user</SPAN>
      <SPAN class="comment token">// to filter wells 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>
        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>

        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">// 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">"USER_Categ 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">"USER_Keywo 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 USER_Keywo 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>
        <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="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>head<SPAN class="operator token">></SPAN>

<SPAN class="operator token"><</SPAN>body<SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewDiv"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"filterDiv"</SPAN><SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>div <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"drop-downs"</SPAN><SPAN class="operator token">></SPAN>
      <SPAN class="operator token"><</SPAN>div <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"oneline"</SPAN><SPAN class="operator token">></SPAN>Select Category<SPAN class="punctuation token">:</SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
      <SPAN class="operator token"><</SPAN>select id<SPAN class="operator token">=</SPAN><SPAN class="string token">"category"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"oneline"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>select<SPAN class="operator token">></SPAN>
      <SPAN class="operator token"><</SPAN>div <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"oneline"</SPAN><SPAN class="operator token">></SPAN>Select Keyword<SPAN class="punctuation token">:</SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
      <SPAN class="operator token"><</SPAN>select id<SPAN class="operator token">=</SPAN><SPAN class="string token">"keyword"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"oneline"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>select<SPAN class="operator token">></SPAN>
      <SPAN class="operator token"><</SPAN>div<SPAN class="operator token">></SPAN>
        <SPAN class="operator token"><</SPAN>input id<SPAN class="operator token">=</SPAN><SPAN class="string token">"ResidentialRB"</SPAN> name<SPAN class="operator token">=</SPAN><SPAN class="string token">"resorbus"</SPAN> type<SPAN class="operator token">=</SPAN><SPAN class="string token">"radio"</SPAN> value<SPAN class="operator token">=</SPAN><SPAN class="string token">"Residential"</SPAN> checked<SPAN class="operator token">=</SPAN><SPAN class="string token">"checked"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>label
          <SPAN class="keyword token">for</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"ResidentialRB"</SPAN><SPAN class="operator token">></SPAN>Residential<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>label<SPAN class="operator token">></SPAN>
        <SPAN class="operator token"><</SPAN>input id<SPAN class="operator token">=</SPAN><SPAN class="string token">"BusinessRB"</SPAN> name<SPAN class="operator token">=</SPAN><SPAN class="string token">"resorbus"</SPAN> type<SPAN class="operator token">=</SPAN><SPAN class="string token">"radio"</SPAN> value<SPAN class="operator token">=</SPAN><SPAN class="string token">"Business"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>label <SPAN class="keyword token">for</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"BusinessRB"</SPAN><SPAN class="operator token">></SPAN>Business<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>label<SPAN class="operator token">></SPAN>
      <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
      <SPAN class="operator token"><</SPAN>button id<SPAN class="operator token">=</SPAN><SPAN class="string token">"filterBtn"</SPAN><SPAN class="operator token">></SPAN>Filter<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>button<SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>body<SPAN class="operator token">></SPAN>

<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>html<SPAN class="operator 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>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

All comments

Gianna_BBSRC

Hi Jared,

What you can do is add a checkbox in your HTML:

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>label</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>isResLabel<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
   <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>input</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>isResInput<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">type</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>checkbox<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">checked</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>yes<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="punctuation token">/></SPAN></SPAN>
   <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>span</SPAN> <SPAN class="attr-name token">class</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>isResToggle<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>span</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>label</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

and then add a listener function which changes the definition expression on the layer:

<SPAN class="comment token">// click event handler for res choice</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>
    document
        <SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'isResInput'</SPAN><SPAN class="punctuation token">)</SPAN>
        <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> updateIsRes<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">function</SPAN> <SPAN class="token function">updateIsRes</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
    <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>checked<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        recycleLayer<SPAN class="punctuation token">.</SPAN>definitionExpression <SPAN class="operator token">=</SPAN> <SPAN class="string token">"USER_IsRes = 'TRUE'"</SPAN>
    <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
        recycleLayer<SPAN class="punctuation token">.</SPAN>definitionExpression <SPAN class="operator token">=</SPAN> <SPAN class="string token">"USER_IsRes = 'FALSE'"</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>

I'd suggest you have one checkbox for residential and one for business and the user can toggle to their hearts delight:

Hope this helps.

Cheers,

Gianna

JaredPilbeam2

Robert,

You make it seem so easy! Thanks for the constant help.

rscheitlin

Jared,

You just have to add those to the sqlExp.

<SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN>DOCTYPE html<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>html<SPAN class="operator token">></SPAN>

<SPAN class="operator token"><</SPAN>head<SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>meta charset<SPAN class="operator token">=</SPAN><SPAN class="string token">"utf-8"</SPAN> <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>meta name<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewport"</SPAN> content<SPAN class="operator token">=</SPAN><SPAN class="string token">"initial-scale=1,maximum-scale=1,user-scalable=no"</SPAN> <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>title<SPAN class="operator token">></SPAN>Recycling Map<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>title<SPAN class="operator token">></SPAN>

  <SPAN class="operator token"><</SPAN>link rel<SPAN class="operator token">=</SPAN><SPAN class="string token">"stylesheet"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token">"https://js.arcgis.com/4.15/esri/themes/light/main.css"</SPAN> <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>script src<SPAN class="operator token">=</SPAN><SPAN class="string token">"https://js.arcgis.com/4.15/"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>

  <SPAN class="operator token"><</SPAN>style<SPAN class="operator token">></SPAN>
    html<SPAN class="punctuation token">,</SPAN>
    body<SPAN class="punctuation token">,</SPAN>
    #viewDiv <SPAN class="punctuation token">{</SPAN>
      height<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
      width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
      margin<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
      padding<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>

    #viewDiv <SPAN class="punctuation token">{</SPAN>
      position<SPAN class="punctuation token">:</SPAN> absolute<SPAN class="punctuation token">;</SPAN>
      height<SPAN class="punctuation token">:</SPAN> <SPAN class="token function">calc</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN> <SPAN class="operator token">-</SPAN> 67px<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      top<SPAN class="punctuation token">:</SPAN> 67px<SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>

    #filterDiv <SPAN class="punctuation token">{</SPAN>
      position<SPAN class="punctuation token">:</SPAN> relative<SPAN class="punctuation token">;</SPAN>
      background<SPAN class="operator token">-</SPAN>color<SPAN class="punctuation token">:</SPAN> white<SPAN class="punctuation token">;</SPAN>
      color<SPAN class="punctuation token">:</SPAN> black<SPAN class="punctuation token">;</SPAN>
      padding<SPAN class="punctuation token">:</SPAN> 6px<SPAN class="punctuation token">;</SPAN>
      top<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
      background<SPAN class="punctuation token">:</SPAN> #d4e1c0<SPAN class="punctuation token">;</SPAN>
      border<SPAN class="operator token">-</SPAN>bottom<SPAN class="punctuation token">:</SPAN> 1px dotted #91dca1<SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>

    #category<SPAN class="punctuation token">,</SPAN>
    #keyword <SPAN class="punctuation token">{</SPAN>
      margin<SPAN class="operator token">-</SPAN>top<SPAN class="punctuation token">:</SPAN> 8px<SPAN class="punctuation token">;</SPAN>
      margin<SPAN class="operator token">-</SPAN>bottom<SPAN class="punctuation token">:</SPAN> 8px<SPAN class="punctuation token">;</SPAN>
      display<SPAN class="punctuation token">:</SPAN> inline<SPAN class="operator token">-</SPAN>block<SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>

    <SPAN class="punctuation token">.</SPAN>drop<SPAN class="operator token">-</SPAN>downs <SPAN class="punctuation token">{</SPAN>
      width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>

    <SPAN class="punctuation token">.</SPAN>oneline <SPAN class="punctuation token">{</SPAN>
      display<SPAN class="punctuation token">:</SPAN> inline<SPAN class="operator token">-</SPAN>block<SPAN class="punctuation token">;</SPAN>
      margin<SPAN class="operator token">-</SPAN>right<SPAN class="punctuation token">:</SPAN> 6px<SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>

    #filterBtn <SPAN class="punctuation token">{</SPAN>
      position<SPAN class="punctuation token">:</SPAN> fixed<SPAN class="punctuation token">;</SPAN>
      right<SPAN class="punctuation token">:</SPAN> 6px<SPAN class="punctuation token">;</SPAN>
      top<SPAN class="punctuation token">:</SPAN> 6px<SPAN class="punctuation token">;</SPAN>
      width<SPAN class="punctuation token">:</SPAN> 50px<SPAN class="punctuation token">;</SPAN>
      font<SPAN class="punctuation token">:</SPAN> bold 12px Trebuchet MS<SPAN class="punctuation token">;</SPAN>
      color<SPAN class="punctuation token">:</SPAN> #fff<SPAN class="punctuation token">;</SPAN>
      background<SPAN class="operator token">-</SPAN>color<SPAN class="punctuation token">:</SPAN> #<SPAN class="number token">098941</SPAN><SPAN class="punctuation token">;</SPAN>
      border<SPAN class="punctuation token">:</SPAN> 1px solid #1c9c52<SPAN class="punctuation token">;</SPAN>
      text<SPAN class="operator token">-</SPAN>decoration<SPAN class="punctuation token">:</SPAN> none<SPAN class="punctuation token">;</SPAN>
      cursor<SPAN class="punctuation token">:</SPAN> pointer<SPAN class="punctuation token">;</SPAN>
      padding<SPAN class="punctuation token">:</SPAN> 2px 4px<SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>

    #filterBtn<SPAN class="punctuation token">:</SPAN>hover <SPAN class="punctuation token">{</SPAN>
      background<SPAN class="operator token">-</SPAN>color<SPAN class="punctuation token">:</SPAN> #098dd1<SPAN class="punctuation token">;</SPAN>
      border<SPAN class="punctuation token">:</SPAN> 1px solid #0ab0ed<SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>
  <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>style<SPAN class="operator token">></SPAN>

  <SPAN class="operator token"><</SPAN>script<SPAN class="operator token">></SPAN>
    <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
      <SPAN class="string token">"esri/Map"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/views/MapView"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/layers/FeatureLayer"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/layers/GraphicsLayer"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/geometry/geometryEngine"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/Graphic"</SPAN><SPAN class="punctuation token">,</SPAN>

    <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>
      Map<SPAN class="punctuation token">,</SPAN>
      MapView<SPAN class="punctuation token">,</SPAN>
      FeatureLayer<SPAN class="punctuation token">,</SPAN>
      GraphicsLayer<SPAN class="punctuation token">,</SPAN>
      geometryEngine<SPAN class="punctuation token">,</SPAN>
      Graphic<SPAN class="punctuation token">,</SPAN>
    <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>


      <SPAN class="keyword token">var</SPAN> catTypeSelect <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"category"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="keyword token">var</SPAN> keyTypeSelect <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"keyword"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="keyword token">var</SPAN> filterButton <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"filterBtn"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="keyword token">var</SPAN> resRb <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"ResidentialRB"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

      <SPAN class="comment token">// oil and gas wells</SPAN>
      <SPAN class="keyword token">var</SPAN> recycleLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
        portalItem<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="comment token">// autocasts as new PortalItem()</SPAN>
          id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"227061be60a14cc89946a978b440d227"</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
        outFields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"*"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
        visible<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>



      <SPAN class="comment token">// GraphicsLayer for displaying results</SPAN>
      <SPAN class="keyword token">var</SPAN> resultsLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">GraphicsLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

      <SPAN class="keyword token">var</SPAN> map <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
        basemap<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"dark-gray"</SPAN><SPAN class="punctuation token">,</SPAN>
        layers<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>recycleLayer<SPAN class="punctuation token">,</SPAN> resultsLayer<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> view <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MapView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
        container<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"viewDiv"</SPAN><SPAN class="punctuation token">,</SPAN>
        map<SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">,</SPAN>
        center<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="operator token">-</SPAN><SPAN class="number token">87.95</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">41.47</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
        zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">10</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

      <SPAN class="comment token">// query all features from the wells 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="comment token">// return an array of all the values in the</SPAN>
      <SPAN class="comment token">// STATUS2 field of the wells 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>
            USER_Categ<SPAN class="punctuation token">:</SPAN> feature<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>USER_Categ<SPAN class="punctuation token">,</SPAN>
            USER_Keywo<SPAN class="punctuation token">:</SPAN> feature<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>USER_Keywo
          <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 STATUS2 field of the wells 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>USER_Keywo<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>USER_Categ<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">// Add the unique values to the wells type</SPAN>
      <SPAN class="comment token">// select element. This will allow the user</SPAN>
      <SPAN class="comment token">// to filter wells 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>
        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>

        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">// 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">"USER_Categ 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">"USER_Keywo 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 USER_Keywo 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>
        <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="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>head<SPAN class="operator token">></SPAN>

<SPAN class="operator token"><</SPAN>body<SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewDiv"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"filterDiv"</SPAN><SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>div <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"drop-downs"</SPAN><SPAN class="operator token">></SPAN>
      <SPAN class="operator token"><</SPAN>div <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"oneline"</SPAN><SPAN class="operator token">></SPAN>Select Category<SPAN class="punctuation token">:</SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
      <SPAN class="operator token"><</SPAN>select id<SPAN class="operator token">=</SPAN><SPAN class="string token">"category"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"oneline"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>select<SPAN class="operator token">></SPAN>
      <SPAN class="operator token"><</SPAN>div <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"oneline"</SPAN><SPAN class="operator token">></SPAN>Select Keyword<SPAN class="punctuation token">:</SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
      <SPAN class="operator token"><</SPAN>select id<SPAN class="operator token">=</SPAN><SPAN class="string token">"keyword"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"oneline"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>select<SPAN class="operator token">></SPAN>
      <SPAN class="operator token"><</SPAN>div<SPAN class="operator token">></SPAN>
        <SPAN class="operator token"><</SPAN>input id<SPAN class="operator token">=</SPAN><SPAN class="string token">"ResidentialRB"</SPAN> name<SPAN class="operator token">=</SPAN><SPAN class="string token">"resorbus"</SPAN> type<SPAN class="operator token">=</SPAN><SPAN class="string token">"radio"</SPAN> value<SPAN class="operator token">=</SPAN><SPAN class="string token">"Residential"</SPAN> checked<SPAN class="operator token">=</SPAN><SPAN class="string token">"checked"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>label
          <SPAN class="keyword token">for</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"ResidentialRB"</SPAN><SPAN class="operator token">></SPAN>Residential<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>label<SPAN class="operator token">></SPAN>
        <SPAN class="operator token"><</SPAN>input id<SPAN class="operator token">=</SPAN><SPAN class="string token">"BusinessRB"</SPAN> name<SPAN class="operator token">=</SPAN><SPAN class="string token">"resorbus"</SPAN> type<SPAN class="operator token">=</SPAN><SPAN class="string token">"radio"</SPAN> value<SPAN class="operator token">=</SPAN><SPAN class="string token">"Business"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>label <SPAN class="keyword token">for</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"BusinessRB"</SPAN><SPAN class="operator token">></SPAN>Business<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>label<SPAN class="operator token">></SPAN>
      <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
      <SPAN class="operator token"><</SPAN>button id<SPAN class="operator token">=</SPAN><SPAN class="string token">"filterBtn"</SPAN><SPAN class="operator token">></SPAN>Filter<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>button<SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>body<SPAN class="operator token">></SPAN>

<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>html<SPAN class="operator 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>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

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