Hi Friends, am trying to display the results in datagrid after performing query tasks on layers. Anyone help me with this..
I found some samples but it is in 3.25.... and in that one the table is visible from starting.. I think we can get it when we perform query..
https://developers.arcgis.com/javascript/3/sandbox/sandbox.html?sample=find_map_datagrid
RAJ,
So you just need to combine the two samples like this then:
<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>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>QueryTask <SPAN class="operator token">-</SPAN> <SPAN class="number token">4.8</SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>title<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> overflow<SPAN class="punctuation token">:</SPAN> hidden<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> #viewDiv<SPAN class="punctuation token">.</SPAN>withGrid <SPAN class="punctuation token">{</SPAN> height<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">65</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">.</SPAN>esri<SPAN class="operator token">-</SPAN>widget <SPAN class="punctuation token">{</SPAN> padding<SPAN class="operator token">-</SPAN>left<SPAN class="punctuation token">:</SPAN> 8px<SPAN class="punctuation token">;</SPAN> padding<SPAN class="operator token">-</SPAN>right<SPAN class="punctuation token">:</SPAN> 4px<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> #paneDiv <SPAN class="punctuation token">{</SPAN> position<SPAN class="punctuation token">:</SPAN> absolute<SPAN class="punctuation token">;</SPAN> top<SPAN class="punctuation token">:</SPAN> 10px<SPAN class="punctuation token">;</SPAN> left<SPAN class="punctuation token">:</SPAN> 62px<SPAN class="punctuation token">;</SPAN> padding<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN> 12px <SPAN class="number token">0</SPAN> 12px<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">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0.5</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> color<SPAN class="punctuation token">:</SPAN> white<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> #gridDisplay <SPAN class="punctuation token">{</SPAN> position<SPAN class="punctuation token">:</SPAN> absolute<SPAN class="punctuation token">;</SPAN> bottom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> left<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">35</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN> background<SPAN class="operator token">-</SPAN>color<SPAN class="punctuation token">:</SPAN> white<SPAN class="punctuation token">;</SPAN> border<SPAN class="operator token">-</SPAN>color<SPAN class="punctuation token">:</SPAN> grey<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> font<SPAN class="operator token">-</SPAN>family<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Avenir Next W00"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"Helvetica Neue"</SPAN><SPAN class="punctuation token">,</SPAN> Helvetica<SPAN class="punctuation token">,</SPAN> Arial<SPAN class="punctuation token">,</SPAN> sans<SPAN class="operator token">-</SPAN>serif<SPAN class="punctuation token">;</SPAN> font<SPAN class="operator token">-</SPAN>size<SPAN class="punctuation token">:</SPAN> 14px<SPAN class="punctuation token">;</SPAN> display<SPAN class="punctuation token">:</SPAN> none<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> #gridDisplay <SPAN class="punctuation token">{</SPAN> z<SPAN class="operator token">-</SPAN>index<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">80</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">.</SPAN>info <SPAN class="punctuation token">{</SPAN> line<SPAN class="operator token">-</SPAN>height<SPAN class="punctuation token">:</SPAN> 20px<SPAN class="punctuation token">;</SPAN> padding<SPAN class="operator token">-</SPAN>left<SPAN class="punctuation token">:</SPAN> 5px <SPAN class="operator token">!</SPAN> important<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">.</SPAN>dgrid<SPAN class="operator token">-</SPAN>header<SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">.</SPAN>dgrid<SPAN class="operator token">-</SPAN>header<SPAN class="operator token">-</SPAN>row <SPAN class="punctuation token">{</SPAN> background<SPAN class="operator token">-</SPAN>color<SPAN class="punctuation token">:</SPAN> #eee<SPAN class="punctuation token">;</SPAN> color<SPAN class="punctuation token">:</SPAN> #57585A<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">.</SPAN>dgrid<SPAN class="operator token">-</SPAN>row<SPAN class="operator token">-</SPAN>even <SPAN class="punctuation token">{</SPAN> background<SPAN class="operator token">-</SPAN>color<SPAN class="punctuation token">:</SPAN> #F7F8F8<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">.</SPAN>dgrid<SPAN class="operator token">-</SPAN>row<SPAN class="operator token">-</SPAN>odd <SPAN class="punctuation token">{</SPAN> background<SPAN class="operator token">-</SPAN>color<SPAN class="punctuation token">:</SPAN> #EFEFEF<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">.</SPAN>dgrid<SPAN class="operator token">-</SPAN>selected <SPAN class="punctuation token">{</SPAN> background<SPAN class="punctuation token">:</SPAN> #B4DAF5<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">.</SPAN>dgrid<SPAN class="operator token">-</SPAN>row <SPAN class="punctuation token">{</SPAN> border<SPAN class="punctuation token">:</SPAN> none <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>link rel<SPAN class="operator token">=</SPAN><SPAN class="string token">"stylesheet"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fjs.arcgis.com%2F4.8%2Fesri%2Fcss%2Fmain.css" target="_blank">https://js.arcgis.com/4.8/esri/css/main.css</A><SPAN>"</SPAN></SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>script src<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fjs.arcgis.com%2F4.8%2F" target="_blank">https://js.arcgis.com/4.8/</A><SPAN>"</SPAN></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/widgets/Home"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/widgets/Legend"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/widgets/Search"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/layers/GraphicsLayer"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/tasks/QueryTask"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/tasks/support/Query"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dojo/_base/array"</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">"dgrid/OnDemandGrid"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dgrid/extensions/ColumnHider"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dojo/store/Memory"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dstore/legacy/StoreAdapter"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dgrid/Selection"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dojo/_base/declare"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dojo/dom-class"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dojo/domReady!"</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> Home<SPAN class="punctuation token">,</SPAN> Legend<SPAN class="punctuation token">,</SPAN> Search<SPAN class="punctuation token">,</SPAN> GraphicsLayer<SPAN class="punctuation token">,</SPAN> QueryTask<SPAN class="punctuation token">,</SPAN> Query<SPAN class="punctuation token">,</SPAN> arrayUtils<SPAN class="punctuation token">,</SPAN> dom<SPAN class="punctuation token">,</SPAN> on<SPAN class="punctuation token">,</SPAN> OnDemandGrid<SPAN class="punctuation token">,</SPAN> ColumnHider<SPAN class="punctuation token">,</SPAN> Memory<SPAN class="punctuation token">,</SPAN> StoreAdapter<SPAN class="punctuation token">,</SPAN> Selection<SPAN class="punctuation token">,</SPAN> declare<SPAN class="punctuation token">,</SPAN> domClass <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">let</SPAN> map<SPAN class="punctuation token">,</SPAN> view<SPAN class="punctuation token">,</SPAN> grid<SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">let</SPAN> RUrl <SPAN class="operator token">=</SPAN> <SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fservices.arcgis.com%2FV6ZHFr6zdgNZuVG0%2Farcgis%2Frest%2Fservices%2FProminent_Peaks_US%2FFeatureServer%2F0" target="_blank">https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Prominent_Peaks_US/FeatureServer/0</A><SPAN>"</SPAN></SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">let</SPAN> FUrl <SPAN class="operator token">=</SPAN> <SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fservices.arcgis.com%2FV6ZHFr6zdgNZuVG0%2FArcGIS%2Frest%2Fservices%2F2015_06_26_active_fires_USA_contiguous_and_Hawaii_24h%2FFeatureServer%2F0" target="_blank">https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/2015_06_26_active_fires_USA_contiguous_and_Hawaii_24h/FeatureServer/0</A><SPAN>"</SPAN></SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">let</SPAN> gridFields <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"__OBJECTID"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"RANK"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"MTN_PEAK"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"STATE"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"ELEV_ft"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"ELEV_m"</SPAN> <SPAN class="punctuation token">,</SPAN><SPAN class="string token">"PROMINENCE_ft"</SPAN> <SPAN class="punctuation token">,</SPAN><SPAN class="string token">"PROMINENCE_m"</SPAN> <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// create a new datastore for the on demandgrid</SPAN> <SPAN class="comment token">// will be used to display attributes of selected features</SPAN> <SPAN class="keyword token">let</SPAN> dataStore <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">StoreAdapter</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> objectStore<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Memory</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> idProperty<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"__OBJECTID"</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">const</SPAN> gridDis <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">"gridDisplay"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// Define the popup content for each result</SPAN> <SPAN class="keyword token">const</SPAN> popupTemplate <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// autocasts as new PopupTemplate()</SPAN> title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"{MTN_PEAK}, {STATE}"</SPAN><SPAN class="punctuation token">,</SPAN> fieldInfos<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN> fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"ELEV_ft"</SPAN><SPAN class="punctuation token">,</SPAN> label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Elevation (feet)"</SPAN><SPAN class="punctuation token">,</SPAN> format<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> places<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> digitSeperator<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"ELEV_m"</SPAN><SPAN class="punctuation token">,</SPAN> label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Elevation (meters)"</SPAN><SPAN class="punctuation token">,</SPAN> format<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> places<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> digitSeperator<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"PROMINENCE_ft"</SPAN><SPAN class="punctuation token">,</SPAN> label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Prominence (feet)"</SPAN><SPAN class="punctuation token">,</SPAN> format<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> places<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> digitSeperator<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"PROMINENCE_m"</SPAN><SPAN class="punctuation token">,</SPAN> label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Prominence (meters)"</SPAN><SPAN class="punctuation token">,</SPAN> format<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> places<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> digitSeperator<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"ISOLATION_mi"</SPAN><SPAN class="punctuation token">,</SPAN> label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Isolation (miles)"</SPAN><SPAN class="punctuation token">,</SPAN> format<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> places<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> digitSeperator<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"ISOLATION_km"</SPAN><SPAN class="punctuation token">,</SPAN> label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Isolation (km)"</SPAN><SPAN class="punctuation token">,</SPAN> format<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> places<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> digitSeperator<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> content<SPAN class="punctuation token">:</SPAN> <SPAN class="string token"><SPAN>"<b><a href='</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FTopographic_prominence" target="_blank">https://en.wikipedia.org/wiki/Topographic_prominence</A><SPAN>'>Prominence:</a>"</SPAN></SPAN> <SPAN class="operator token">+</SPAN> <SPAN class="string token">"</b> {PROMINENCE_ft} ft ({PROMINENCE_m} m)"</SPAN> <SPAN class="operator token">+</SPAN> <SPAN class="string token">"<br><b>Prominence Rank:</b> {RANK}"</SPAN> <SPAN class="operator token">+</SPAN> <SPAN class="string token">"<br><b>Elevation:</b> {ELEV_ft} ft ({ELEV_m} m)"</SPAN> <SPAN class="operator token">+</SPAN> <SPAN class="string token"><SPAN>"<br><b><a href='</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FTopographic_isolation" target="_blank">https://en.wikipedia.org/wiki/Topographic_isolation</A><SPAN>'>Isolation:</a>"</SPAN></SPAN> <SPAN class="operator token">+</SPAN> <SPAN class="string token">"</b> {ISOLATION_mi} mi ({ISOLATION_km} km)"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// Define the popup content for each result</SPAN> <SPAN class="keyword token">const</SPAN> popupTemplate2 <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// autocasts as new PopupTemplate()</SPAN> title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"{TRACK}"</SPAN><SPAN class="punctuation token">,</SPAN> fieldInfos<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN> fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"TRACK"</SPAN><SPAN class="punctuation token">,</SPAN> label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Track"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"BRIGHT_T31"</SPAN><SPAN class="punctuation token">,</SPAN> label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Brightness"</SPAN><SPAN class="punctuation token">,</SPAN> format<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> places<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> digitSeperator<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"CONFIDENCE"</SPAN><SPAN class="punctuation token">,</SPAN> label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Confidence"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"SCAN"</SPAN><SPAN class="punctuation token">,</SPAN> label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Scan"</SPAN><SPAN class="punctuation token">,</SPAN> format<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> places<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> digitSeperator<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> content<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Brightness: {BRIGHT_T31}"</SPAN> <SPAN class="operator token">+</SPAN> <SPAN class="string token">"<br><b>Prominence Rank:</b> {RANK}"</SPAN> <SPAN class="operator token">+</SPAN> <SPAN class="string token">"<br><b>Confidence:</b> {CONFIDENCE}"</SPAN> <SPAN class="operator token">+</SPAN> <SPAN class="string token">"<br><b>Scan: {SCAN}"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">let</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">let</SPAN> resultsLayer2 <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">let</SPAN> qTask <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">QueryTask</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> url<SPAN class="punctuation token">:</SPAN> RUrl <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">let</SPAN> qTask2 <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">QueryTask</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> url<SPAN class="punctuation token">:</SPAN> FUrl <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">let</SPAN> params <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> returnGeometry<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</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">"streets"</SPAN><SPAN class="punctuation token">,</SPAN> layers<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>resultsLayer<SPAN class="punctuation token">,</SPAN> resultsLayer2<SPAN class="punctuation token">]</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</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> zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">11</SPAN><SPAN class="punctuation token">,</SPAN> popup<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> dockEnabled<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN> dockOptions<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> position<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"top-right"</SPAN><SPAN class="punctuation token">,</SPAN> breakpoint<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="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="token function">createGrid</SPAN><SPAN class="punctuation token">(</SPAN>fields<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">var</SPAN> columns <SPAN class="operator token">=</SPAN> fields<SPAN class="punctuation token">.</SPAN><SPAN class="token function">filter</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>field<SPAN class="punctuation token">,</SPAN> i<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>gridFields<SPAN class="punctuation token">.</SPAN><SPAN class="token function">indexOf</SPAN><SPAN class="punctuation token">(</SPAN>field<SPAN class="punctuation token">.</SPAN>name<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="punctuation token">{</SPAN> <SPAN class="keyword token">return</SPAN> field<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">map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>field<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>field<SPAN class="punctuation token">.</SPAN>name <SPAN class="operator token">===</SPAN> <SPAN class="string token">"__OBJECTID"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">return</SPAN> <SPAN class="punctuation token">{</SPAN> field<SPAN class="punctuation token">:</SPAN> field<SPAN class="punctuation token">.</SPAN>name<SPAN class="punctuation token">,</SPAN> label<SPAN class="punctuation token">:</SPAN> field<SPAN class="punctuation token">.</SPAN>name<SPAN class="punctuation token">,</SPAN> sortable<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN> hidden<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">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">return</SPAN> <SPAN class="punctuation token">{</SPAN> field<SPAN class="punctuation token">:</SPAN> field<SPAN class="punctuation token">.</SPAN>name<SPAN class="punctuation token">,</SPAN> label<SPAN class="punctuation token">:</SPAN> field<SPAN class="punctuation token">.</SPAN>alias<SPAN class="punctuation token">,</SPAN> sortable<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</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">// create a new onDemandGrid with its selection and columnhider</SPAN> <SPAN class="comment token">// extensions. Set the columns of the grid to display attributes</SPAN> <SPAN class="comment token">// the hurricanes cvslayer</SPAN> grid <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">declare</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>OnDemandGrid<SPAN class="punctuation token">,</SPAN> Selection<SPAN class="punctuation token">,</SPAN> ColumnHider<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> columns<SPAN class="punctuation token">:</SPAN> columns <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"grid"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// add a row-click listener on the grid. This will be used</SPAN> <SPAN class="comment token">// to highlight the corresponding feature on the view</SPAN> grid<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"dgrid-select"</SPAN><SPAN class="punctuation token">,</SPAN> selectFeatureFromGrid<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">selectFeatureFromGrid</SPAN><SPAN class="punctuation token">(</SPAN>event<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">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> 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">"optionsDiv"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"bottom-right"</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">"doBtn"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"click"</SPAN><SPAN class="punctuation token">,</SPAN> doQuery<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">"clrBtn"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"click"</SPAN><SPAN class="punctuation token">,</SPAN> doClear<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">const</SPAN> attributeName <SPAN class="operator token">=</SPAN> dom<SPAN class="punctuation token">.</SPAN><SPAN class="token function">byId</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"attSelect"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">const</SPAN> expressionSign <SPAN class="operator token">=</SPAN> dom<SPAN class="punctuation token">.</SPAN><SPAN class="token function">byId</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"signSelect"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">const</SPAN> value <SPAN class="operator token">=</SPAN> dom<SPAN class="punctuation token">.</SPAN><SPAN class="token function">byId</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"valSelect"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">const</SPAN> wlayer <SPAN class="operator token">=</SPAN> dom<SPAN class="punctuation token">.</SPAN><SPAN class="token function">byId</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"lyrSelect"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="token function">doClear</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>grid<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> dataStore<SPAN class="punctuation token">.</SPAN>objectStore<SPAN class="punctuation token">.</SPAN>data <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN> grid<SPAN class="punctuation token">.</SPAN><SPAN class="keyword token">set</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"collection"</SPAN><SPAN class="punctuation token">,</SPAN> dataStore<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> resultsLayer2<SPAN class="punctuation token">.</SPAN><SPAN class="token function">removeAll</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> gridDis<SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>display <SPAN class="operator token">=</SPAN> <SPAN class="string token">'none'</SPAN><SPAN class="punctuation token">;</SPAN> domClass<SPAN class="punctuation token">.</SPAN><SPAN class="token function">remove</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"viewDiv"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'withGrid'</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">doQuery</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="token function">doClear</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// Clear the results from a previous query</SPAN> resultsLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">removeAll</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> resultsLayer2<SPAN class="punctuation token">.</SPAN><SPAN class="token function">removeAll</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> params<SPAN class="punctuation token">.</SPAN>where <SPAN class="operator token">=</SPAN> attributeName<SPAN class="punctuation token">.</SPAN>value <SPAN class="operator token">+</SPAN> expressionSign<SPAN class="punctuation token">.</SPAN>value <SPAN class="operator token">+</SPAN> value<SPAN class="punctuation token">.</SPAN>value<SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>wlayer<SPAN class="punctuation token">.</SPAN>value <SPAN class="operator token">===</SPAN> <SPAN class="string token">'peaks'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> params<SPAN class="punctuation token">.</SPAN>outFields <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"RANK"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"MTN_PEAK"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"STATE"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"ELEV_ft"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"ELEV_m"</SPAN> <SPAN class="punctuation token">,</SPAN><SPAN class="string token">"PROMINENCE_ft"</SPAN> <SPAN class="punctuation token">,</SPAN><SPAN class="string token">"PROMINENCE_m"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN> gridFields <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"__OBJECTID"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"RANK"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"MTN_PEAK"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"STATE"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"ELEV_ft"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"ELEV_m"</SPAN> <SPAN class="punctuation token">,</SPAN><SPAN class="string token">"PROMINENCE_ft"</SPAN> <SPAN class="punctuation token">,</SPAN><SPAN class="string token">"PROMINENCE_m"</SPAN> <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN> qTask<SPAN class="punctuation token">.</SPAN><SPAN class="token function">execute</SPAN><SPAN class="punctuation token">(</SPAN>params<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN>getResults<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">.</SPAN><SPAN class="keyword token">catch</SPAN><SPAN class="punctuation token">(</SPAN>promiseRejected<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="keyword token">else</SPAN> <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>wlayer<SPAN class="punctuation token">.</SPAN>value <SPAN class="operator token">===</SPAN> <SPAN class="string token">'fires'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> params<SPAN class="punctuation token">.</SPAN>outFields <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"BRIGHTNESS"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"SCAN"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"TRACK"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"ACQ_DATE"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"ACQ_TIME"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"SATELLITE"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"CONFIDENCE"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"VERSION"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN> gridFields <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"__OBJECTID"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"BRIGHTNESS"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"SCAN"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"TRACK"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"ACQ_DATE"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"ACQ_TIME"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"SATELLITE"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"CONFIDENCE"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"VERSION"</SPAN> <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN> params<SPAN class="punctuation token">.</SPAN>where <SPAN class="operator token">=</SPAN> <SPAN class="string token">'BRIGHTNESS > 320'</SPAN><SPAN class="punctuation token">;</SPAN> qTask2<SPAN class="punctuation token">.</SPAN><SPAN class="token function">execute</SPAN><SPAN class="punctuation token">(</SPAN>params<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN>getResults<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">.</SPAN><SPAN class="keyword token">catch</SPAN><SPAN class="punctuation token">(</SPAN>promiseRejected<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">getResults</SPAN><SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">let</SPAN> graphics <SPAN class="operator token">=</SPAN> response<SPAN class="punctuation token">.</SPAN>features<SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>graphics<SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token">></SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> gridDis<SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>display <SPAN class="operator token">=</SPAN> <SPAN class="string token">'block'</SPAN><SPAN class="punctuation token">;</SPAN> domClass<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"viewDiv"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'withGrid'</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">"featureCount"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>innerHTML <SPAN class="operator token">=</SPAN> <SPAN class="string token">"<b>Showing attributes for "</SPAN> <SPAN class="operator token">+</SPAN> graphics<SPAN class="punctuation token">.</SPAN>length<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toString</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">+</SPAN> <SPAN class="string token">" features </b>"</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN> gridDis<SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>display <SPAN class="operator token">=</SPAN> <SPAN class="string token">'none'</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="token function">createGrid</SPAN><SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">.</SPAN>fields<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// get the attributes to display in the grid</SPAN> <SPAN class="keyword token">var</SPAN> data <SPAN class="operator token">=</SPAN> graphics<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> i<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">return</SPAN> Object<SPAN class="punctuation token">.</SPAN><SPAN class="token function">keys</SPAN><SPAN class="punctuation token">(</SPAN>feature<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">.</SPAN><SPAN class="token function">filter</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>key<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// get fields that exist in the grid</SPAN> <SPAN class="keyword token">return</SPAN> <SPAN class="punctuation token">(</SPAN>gridFields<SPAN class="punctuation token">.</SPAN><SPAN class="token function">indexOf</SPAN><SPAN class="punctuation token">(</SPAN>key<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="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="comment token">// need to create key value pairs from the feature</SPAN> <SPAN class="comment token">// attributes so that info can be displayed in the grid</SPAN> <SPAN class="punctuation token">.</SPAN><SPAN class="token function">reduce</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">(</SPAN>obj<SPAN class="punctuation token">,</SPAN> key<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN> obj<SPAN class="punctuation token">[</SPAN>key<SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">=</SPAN> feature<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">[</SPAN>key<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">return</SPAN> obj<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="punctuation token">;</SPAN> <SPAN class="comment token">// set the datastore for the grid using the</SPAN> <SPAN class="comment token">// attributes we got for the query results</SPAN> dataStore<SPAN class="punctuation token">.</SPAN>objectStore<SPAN class="punctuation token">.</SPAN>data <SPAN class="operator token">=</SPAN> data<SPAN class="punctuation token">;</SPAN> grid<SPAN class="punctuation token">.</SPAN><SPAN class="keyword token">set</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"collection"</SPAN><SPAN class="punctuation token">,</SPAN> dataStore<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> RResults <SPAN class="operator token">=</SPAN> arrayUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">map</SPAN><SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">.</SPAN>features<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> feature<SPAN class="punctuation token">.</SPAN>symbol <SPAN class="operator 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> color<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"red"</SPAN><SPAN class="punctuation token">,</SPAN> size<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">5</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="string token">"black"</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>wlayer<SPAN class="punctuation token">.</SPAN>value <SPAN class="operator token">===</SPAN> <SPAN class="string token">'peaks'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> feature<SPAN class="punctuation token">.</SPAN>popupTemplate <SPAN class="operator token">=</SPAN> popupTemplate<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="keyword token">else</SPAN> <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>wlayer<SPAN class="punctuation token">.</SPAN>value <SPAN class="operator token">===</SPAN> <SPAN class="string token">'fires'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> feature<SPAN class="punctuation token">.</SPAN>popupTemplate <SPAN class="operator token">=</SPAN> popupTemplate2<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">return</SPAN> feature<SPAN class="punctuation 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>wlayer<SPAN class="punctuation token">.</SPAN>value <SPAN class="operator token">===</SPAN> <SPAN class="string token">'peaks'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> resultsLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addMany</SPAN><SPAN class="punctuation token">(</SPAN>RResults<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="keyword token">else</SPAN> <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>wlayer<SPAN class="punctuation token">.</SPAN>value <SPAN class="operator token">===</SPAN> <SPAN class="string token">'fires'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> resultsLayer2<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addMany</SPAN><SPAN class="punctuation token">(</SPAN>RResults<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">goTo</SPAN><SPAN class="punctuation token">(</SPAN>RResults<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">promiseRejected</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">"Promise rejected: "</SPAN><SPAN class="punctuation token">,</SPAN> error<SPAN class="punctuation token">.</SPAN>message<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">var</SPAN> homeBtn <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Home</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> view<SPAN class="punctuation token">:</SPAN> view <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"homeDiv"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> legend <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Legend</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> view<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">,</SPAN> layerInfos<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN> url<SPAN class="punctuation token">:</SPAN> RUrl <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> legend<SPAN class="punctuation token">.</SPAN><SPAN class="token function">startup</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>legend<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"bottom-left"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> searchWidget <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Search</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> view<SPAN class="punctuation token">:</SPAN> view <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>searchWidget<SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> position<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="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>div <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"esri-widget"</SPAN> id<SPAN class="operator token">=</SPAN><SPAN class="string token">"optionsDiv"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>h2<SPAN class="operator token">></SPAN>Prominent Peaks <SPAN class="keyword token">in</SPAN> the U<SPAN class="punctuation token">.</SPAN>S<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 <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"esri-widget"</SPAN> id<SPAN class="operator token">=</SPAN><SPAN class="string token">"lyrSelect"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>option value<SPAN class="operator token">=</SPAN><SPAN class="string token">"fires"</SPAN><SPAN class="operator token">></SPAN>US Fires<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">"peaks"</SPAN> selected<SPAN class="operator token">></SPAN>US Peaks<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>select <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"esri-widget"</SPAN> id<SPAN class="operator token">=</SPAN><SPAN class="string token">"attSelect"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>option value<SPAN class="operator token">=</SPAN><SPAN class="string token">"ELEV_ft"</SPAN><SPAN class="operator token">></SPAN>Elevation<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">"PROMINENCE_ft"</SPAN> selected<SPAN class="operator token">></SPAN>Prominence<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>select <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"esri-widget"</SPAN> id<SPAN class="operator token">=</SPAN><SPAN class="string token">"signSelect"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>option value<SPAN class="operator token">=</SPAN><SPAN class="string token">">"</SPAN><SPAN class="operator token">></SPAN>is greater than<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">"<"</SPAN><SPAN class="operator token">></SPAN>is less than<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">"="</SPAN><SPAN class="operator token">></SPAN>is equal to<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>select <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"esri-widget"</SPAN> id<SPAN class="operator token">=</SPAN><SPAN class="string token">"valSelect"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>option value<SPAN class="operator token">=</SPAN><SPAN class="string token">"1000"</SPAN><SPAN class="operator token">></SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">000</SPAN> ft<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">"5000"</SPAN><SPAN class="operator token">></SPAN><SPAN class="number token">5</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">000</SPAN> ft<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">"10000"</SPAN><SPAN class="operator token">></SPAN><SPAN class="number token">10</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">000</SPAN> ft<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">"15000"</SPAN><SPAN class="operator token">></SPAN><SPAN class="number token">15</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">000</SPAN> ft<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">"20000"</SPAN><SPAN class="operator token">></SPAN><SPAN class="number token">20</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">000</SPAN> ft<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>br<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>br<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>button <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"esri-widget"</SPAN> id<SPAN class="operator token">=</SPAN><SPAN class="string token">"doBtn"</SPAN><SPAN class="operator token">></SPAN>Do Query<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>button<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>button <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"esri-widget"</SPAN> id<SPAN class="operator token">=</SPAN><SPAN class="string token">"clrBtn"</SPAN><SPAN class="operator token">></SPAN>Clear<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>button<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>br<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>br<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">"gridDisplay"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>span <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"info"</SPAN> id<SPAN class="operator token">=</SPAN><SPAN class="string token">"featureCount"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"grid"</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><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></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
Have you seen this sample? https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=highlight-features-by-geometry
Hello Robert, I checked this sample. Its helpful but in this sample user use polygon to perform query. I have to use only simple query task..
like
if(wlayer.value === 'city'){ qTask.execute(params) .then(getResults) .catch(promiseRejected); }else if(wlayer.value === 'road'){ qTask2.execute(params) .then(getResults) .catch(promiseRejected);
Right now results only popups on the map one by one..I am looking to get query task results as data grid below the map, after user perform a query. am using same code you already help me previously...
Error in Query Task with MapView
Thanks for the Solution...It was exactly am looking for but I have one question can we highlight result we select from the query result..
i tried to using this
view = new MapView({ container: "viewDiv", map: map, highlightOptions: { color: "red", fillOpacity: 0.4 } });
how can we highlight the selected results on map and grid at the same time..
Yes results are added perfectly as am trying.. Thanks a lot for that.. but you ask me to refer one sample previously
https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=highlight-features-by-geometry
In this sample after performing query task, when we click on any record in grid it highlights that specific record on map with specific color.. I have already attach an image for about my question..
i tried this
highlightOptions: { color: "red", fillOpacity: 0.4 }
how can I do that in the code which you just provide to me...??
It is as simple as adding another graphic after you query for the ObjectId of the row you clicked on. If you need more help with that code then you should start a new question.
Thanks for suggestion.
I'll try it first..if having problem with that still then, post another question..
Thanks
Signed in members can post, follow updates, and more. New here? Register a free account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
