displaying a query on a feature/graphic layer

deleted-user-wcpelUUf_XXx

Im having a problem displaying a query.

i tried it both on a graphic layer and a feature layer

the code is the same for both except the layer is different type and the apply is accordingly different

feature layer code:

https://codepen.io/segev-salman/pen/MdrBGq?editors=1000

graphic layer code:

https://codepen.io/segev-salman/pen/xNpzKr

on change a query happens and displayed with a different renderer.

RobertScheitlin__GISP

Here is the featurelayer sample fixed:

<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>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>title<SPAN class="operator token">></SPAN>query<SPAN class="operator token">-</SPAN>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://www.w3schools.com/w3css/4/w3.css"</SPAN><SPAN class="operator token">></SPAN>

  <SPAN class="operator token"><</SPAN>style<SPAN class="operator token">></SPAN>
    #selectPanel <SPAN class="punctuation token">{</SPAN>
      padding<SPAN class="punctuation token">:</SPAN> 30px<SPAN class="punctuation token">;</SPAN>
      background<SPAN class="operator token">-</SPAN>color<SPAN class="punctuation token">:</SPAN> <SPAN class="token function">rgba</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0.8</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>

    <SPAN class="punctuation token">.</SPAN>esri<SPAN class="operator token">-</SPAN>button <SPAN class="punctuation token">{</SPAN>
      margin<SPAN class="punctuation token">:</SPAN> 2px<SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation 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>
  <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>style<SPAN class="operator token">></SPAN>

  <SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN><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.11/esri/css/main.css"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token">--</SPAN><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.11/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.11/"</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>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/widgets/Expand"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">'dojo/dom'</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">'dojo/on'</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/tasks/support/Query"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/layers/GraphicsLayer"</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>Expand<SPAN class="punctuation token">,</SPAN>dom<SPAN class="punctuation token">,</SPAN> on<SPAN class="punctuation token">,</SPAN>Query<SPAN class="punctuation token">,</SPAN>GraphicsLayer<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
      
      <SPAN class="keyword token">var</SPAN> TF <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>
        url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"https://services3.arcgis.com/1pxU2hJU9ZszJDcX/ArcGIS/rest/services/Young_Adult_Treatment_Facilities/FeatureServer/0"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      
      <SPAN class="keyword token">var</SPAN> newRend<SPAN class="punctuation token">,</SPAN> layer<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">"gray"</SPAN><SPAN class="punctuation token">,</SPAN>
        layers<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>TF<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">102.370576</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">40.172530</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
        zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">5</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      
<SPAN class="comment token">///renderers      </SPAN>
    <SPAN class="keyword token">var</SPAN> origRend <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
          type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple"</SPAN><SPAN class="punctuation token">,</SPAN>
          symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
            type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-marker"</SPAN><SPAN class="punctuation token">,</SPAN>
            style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"circle"</SPAN><SPAN class="punctuation token">,</SPAN>
            color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">197</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
            size<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">7</SPAN><SPAN class="punctuation token">,</SPAN>
            outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
              color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
              width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.75</SPAN>
             <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="keyword token">var</SPAN> maleRend <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
          type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple"</SPAN><SPAN class="punctuation token">,</SPAN>
          symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
            type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-marker"</SPAN><SPAN class="punctuation token">,</SPAN>
            style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"circle"</SPAN><SPAN class="punctuation token">,</SPAN>
            color<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"#FF0800"</SPAN><SPAN class="punctuation token">,</SPAN>
            size<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">7</SPAN><SPAN class="punctuation token">,</SPAN>
            outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
              color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
              width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.75</SPAN>
             <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="keyword token">var</SPAN> childRend <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
          type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple"</SPAN><SPAN class="punctuation token">,</SPAN>
          symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
            type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-marker"</SPAN><SPAN class="punctuation token">,</SPAN>
            style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"circle"</SPAN><SPAN class="punctuation token">,</SPAN>
            color<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"#ffcd00"</SPAN><SPAN class="punctuation token">,</SPAN>
            size<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">7</SPAN><SPAN class="punctuation token">,</SPAN>
            outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
              color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
              width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.75</SPAN>
             <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="keyword token">var</SPAN> femRend <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
          type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple"</SPAN><SPAN class="punctuation token">,</SPAN>
          symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
            type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-marker"</SPAN><SPAN class="punctuation token">,</SPAN>
            style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"circle"</SPAN><SPAN class="punctuation token">,</SPAN>
            color<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"#AF1668"</SPAN><SPAN class="punctuation token">,</SPAN>
            size<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">7</SPAN><SPAN class="punctuation token">,</SPAN>
            outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
              color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
              width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.75</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 resaults and add them to a G-layer</SPAN>
      <SPAN class="keyword token">function</SPAN> <SPAN class="token function">succ</SPAN><SPAN class="punctuation token">(</SPAN>featureSet<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>layer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
          map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">remove</SPAN><SPAN class="punctuation token">(</SPAN>layer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</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>
          objectIdField<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"ObjectId"</SPAN><SPAN class="punctuation token">,</SPAN>
          source<SPAN class="punctuation token">:</SPAN> featureSet<SPAN class="punctuation token">.</SPAN>features
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>
        map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">remove</SPAN><SPAN class="punctuation token">(</SPAN>TF<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        layer<SPAN class="punctuation token">.</SPAN>renderer <SPAN class="operator token">=</SPAN> newRend<SPAN class="punctuation token">;</SPAN>
        map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</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">function</SPAN> <SPAN class="token function">fail</SPAN><SPAN class="punctuation token">(</SPAN>error<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">error</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'An error ocurred in the query: '</SPAN><SPAN class="punctuation token">,</SPAN> error<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>

      <SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN>dom<SPAN class="punctuation token">.</SPAN><SPAN class="token function">byId</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'select'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'change'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>e<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="keyword token">var</SPAN> select <SPAN class="operator token">=</SPAN> e<SPAN class="punctuation token">.</SPAN>target<SPAN class="punctuation token">.</SPAN>value<SPAN class="punctuation token">;</SPAN>         
        <SPAN class="keyword token">var</SPAN> tableC<SPAN class="punctuation token">;</SPAN>                 
        <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>select <SPAN class="operator token">==</SPAN> <SPAN class="string token">"male"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          tableC <SPAN class="operator token">=</SPAN> <SPAN class="string token">"male"</SPAN><SPAN class="punctuation token">,</SPAN>
          newRend <SPAN class="operator token">=</SPAN> maleRend
          <SPAN class="punctuation token">}</SPAN>
        <SPAN class="keyword token">else</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>select <SPAN class="operator token">==</SPAN> <SPAN class="string token">"fem"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          tableC <SPAN class="operator token">=</SPAN> <SPAN class="string token">"fem"</SPAN><SPAN class="punctuation token">,</SPAN>
          newRend <SPAN class="operator token">=</SPAN> femRend            
          <SPAN class="punctuation token">}</SPAN>     
        <SPAN class="keyword token">else</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>select <SPAN class="operator token">==</SPAN> <SPAN class="string token">"chld"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          tableC <SPAN class="operator token">=</SPAN> <SPAN class="string token">"chld"</SPAN><SPAN class="punctuation token">,</SPAN>
          newRend <SPAN class="operator token">=</SPAN> childRend          
          <SPAN class="punctuation token">}</SPAN>          
        <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
        tableC <SPAN class="operator token">=</SPAN> <SPAN class="string token">"1"</SPAN><SPAN class="punctuation token">,</SPAN>          
        newRend <SPAN class="operator token">=</SPAN> origRend          
        <SPAN class="punctuation token">}</SPAN>                       
          <SPAN class="keyword token">var</SPAN> query <SPAN class="operator token">=</SPAN> TF<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createQuery</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>     
          query<SPAN class="punctuation token">.</SPAN>returnGeometry <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN>
          query<SPAN class="punctuation token">.</SPAN>outFields <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"*"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
          query<SPAN class="punctuation token">.</SPAN>where <SPAN class="operator token">=</SPAN> tableC <SPAN class="operator token">+</SPAN> <SPAN class="string token">" =  1"</SPAN><SPAN class="punctuation token">;</SPAN> 
          TF<SPAN class="punctuation token">.</SPAN><SPAN class="token function">queryFeatures</SPAN><SPAN class="punctuation token">(</SPAN>query<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN>succ<SPAN class="punctuation token">,</SPAN> fail<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><SPAN class="string token">"selectPanel"</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">"selectPanel"</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>h2<SPAN class="operator token">></SPAN>Facilities <SPAN class="keyword token">for</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>h2<SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>select id<SPAN class="operator token">=</SPAN><SPAN class="string token">"select"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"esri-select"</SPAN> <SPAN class="operator token">></SPAN>
      <SPAN class="operator token"><</SPAN>option value<SPAN class="operator token">=</SPAN><SPAN class="string token">"All"</SPAN><SPAN class="operator token">></SPAN>All<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>option<SPAN class="operator token">></SPAN>      
      <SPAN class="operator token"><</SPAN>option value<SPAN class="operator token">=</SPAN><SPAN class="string token">"male"</SPAN><SPAN class="operator token">></SPAN>Male<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>option<SPAN class="operator token">></SPAN>
      <SPAN class="operator token"><</SPAN>option value<SPAN class="operator token">=</SPAN><SPAN class="string token">"fem"</SPAN><SPAN class="operator token">></SPAN>Female<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>option<SPAN class="operator token">></SPAN>
      <SPAN class="operator token"><</SPAN>option value<SPAN class="operator token">=</SPAN><SPAN class="string token">"chld"</SPAN><SPAN class="operator token">></SPAN>Child<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>option<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><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>