Neda,
So this seems like what you are after 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>Interactive web map <SPAN class="keyword token">for</SPAN> CSULB Trees dataset<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> <SPAN class="punctuation token">}</SPAN> table<SPAN class="punctuation token">,</SPAN> th<SPAN class="punctuation token">,</SPAN> td <SPAN class="punctuation token">{</SPAN> border<SPAN class="punctuation token">:</SPAN> 1px solid black<SPAN class="punctuation token">;</SPAN> border<SPAN class="operator token">-</SPAN>collapse<SPAN class="punctuation token">:</SPAN> collapse<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>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.3%2Fesri%2Fcss%2Fmain.css" target="_blank">https://js.arcgis.com/4.3/esri/css/main.css</A><SPAN>"</SPAN></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"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fjs.arcgis.com%2F4.3%2Fesri%2Fthemes%2Flight%2Fmain.css" target="_blank">https://js.arcgis.com/4.3/esri/themes/light/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.3%2F" target="_blank">https://js.arcgis.com/4.3/</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="keyword token">var</SPAN> searchResults<SPAN class="punctuation 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/geometry/Extent"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/renderers/SimpleRenderer"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/symbols/PictureMarkerSymbol"</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/Search"</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/ScaleBar"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/widgets/Home"</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> Extent<SPAN class="punctuation token">,</SPAN> SimpleRenderer<SPAN class="punctuation token">,</SPAN> PictureMarkerSymbol<SPAN class="punctuation token">,</SPAN> FeatureLayer<SPAN class="punctuation token">,</SPAN> Search<SPAN class="punctuation token">,</SPAN> Legend<SPAN class="punctuation token">,</SPAN> ScaleBar<SPAN class="punctuation token">,</SPAN> Home<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">var</SPAN> map <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> basemap<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"gray"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> initialExtent <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Extent</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> xmin<SPAN class="punctuation token">:</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">118.13</SPAN><SPAN class="punctuation token">,</SPAN> xmax<SPAN class="punctuation token">:</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">118.1</SPAN><SPAN class="punctuation token">,</SPAN> ymin<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">33.77</SPAN><SPAN class="punctuation token">,</SPAN> ymax<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">33.79</SPAN> <SPAN class="comment token">//spatialReference: 102100</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> zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">15</SPAN><SPAN class="punctuation token">,</SPAN> center<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="operator token">-</SPAN><SPAN class="number token">118.114090</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">33.783823</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> extent<SPAN class="punctuation token">:</SPAN> initialExtent <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> treeRenderer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleRenderer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">PictureMarkerSymbol</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fwww.clker.com%2Fcliparts%2Fe%2Fd%2F8%2Ff%2F1206581914343605633nicubunu_RPG_map_symbols_tree_8.svg.hi.png" target="_blank">http://www.clker.com/cliparts/e/d/8/f/1206581914343605633nicubunu_RPG_map_symbols_tree_8.svg.hi.png</A><SPAN>"</SPAN></SPAN><SPAN class="punctuation token">,</SPAN> width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">9</SPAN><SPAN class="punctuation token">,</SPAN> height<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">9</SPAN><SPAN class="punctuation token">,</SPAN> angle<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> campus <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"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fservices3.arcgis.com%2Fvq5vGR4r1YX7ueLg%2Farcgis%2Frest%2Fservices%2FCampusTreeLayers%2FFeatureServer%2F1%3Ftoken%3DR1VkseUaX5VeH-vBErTZrlB5cmP-sbvkiphjqt_QYJa6Vf2-5vtfczfMBZGc9qO2yu4lq1UclgeUo2fwnCytdDGlO658prv_BClf2E9tQaUuF8kfOJmsz66WSPyMn93DUz11f_gLn7O8EbtItskZPytYN6Q6LSzQ6Z2oYc6va9o8TjRcFgQRfMYT9VPjzKjBwIFMzhVpZw57KldjDdiNHAX4g2EvQ3-vJTBBZdVJ7H0" target="_blank">http://services3.arcgis.com/vq5vGR4r1YX7ueLg/arcgis/rest/services/CampusTreeLayers/FeatureServer/1?token=R1VkseUaX5VeH-vBErTZrlB5cmP-sbvkiphjqt_QYJa6Vf2-5vtfczfMBZGc9qO2yu4lq1UclgeUo2fwnCytdDGlO658prv_BClf2E9tQaUuF8kfOJmsz66WSPyMn93DUz11f_gLn7O8EbtItskZPytYN6Q6LSzQ6Z2oYc6va9o8TjRcFgQRfMYT9VPjzKjBwIFMzhVpZw57KldjDdiNHAX4g2EvQ3-vJTBBZdVJ7H0</A><SPAN>."</SPAN></SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>campus<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> tree <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"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fservices3.arcgis.com%2Fvq5vGR4r1YX7ueLg%2Farcgis%2Frest%2Fservices%2FCampusTreeLayers%2FFeatureServer%2F0%3Ftoken%3DR1VkseUaX5VeH-vBErTZrlB5cmP-sbvkiphjqt_QYJa6Vf2-5vtfczfMBZGc9qO2yu4lq1UclgeUo2fwnCytdDGlO658prv_BClf2E9tQaUuF8kfOJmsz66WSPyMn93DUz11f_gLn7O8EbtItskZPytYN6Q6LSzQ6Z2oYc6va9o8TjRcFgQRfMYT9VPjzKjBwIFMzhVpZw57KldjDdiNHAX4g2EvQ3-vJTBBZdVJ7H0" target="_blank">http://services3.arcgis.com/vq5vGR4r1YX7ueLg/arcgis/rest/services/CampusTreeLayers/FeatureServer/0?token=R1VkseUaX5VeH-vBErTZrlB5cmP-sbvkiphjqt_QYJa6Vf2-5vtfczfMBZGc9qO2yu4lq1UclgeUo2fwnCytdDGlO658prv_BClf2E9tQaUuF8kfOJmsz66WSPyMn93DUz11f_gLn7O8EbtItskZPytYN6Q6LSzQ6Z2oYc6va9o8TjRcFgQRfMYT9VPjzKjBwIFMzhVpZw57KldjDdiNHAX4g2EvQ3-vJTBBZdVJ7H0</A><SPAN>."</SPAN></SPAN><SPAN class="punctuation token">,</SPAN> outFields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"*"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> renderer<SPAN class="punctuation token">:</SPAN> treeRenderer <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>tree<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> search <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> sources<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN> autoselect<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN> popupOpenOnSelect<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN> featureLayer<SPAN class="punctuation token">:</SPAN> tree<SPAN class="punctuation token">,</SPAN> searchFields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"objectid"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"common_name"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> displayField<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"objectid"</SPAN><SPAN class="punctuation token">,</SPAN> exactMatch<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN> outFields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"objectid"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"common_name"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Tree FS"</SPAN><SPAN class="punctuation token">,</SPAN> placeholder<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Object ID or Tree Name"</SPAN><SPAN class="punctuation token">,</SPAN> maxResults<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">6</SPAN><SPAN class="punctuation token">,</SPAN> maxSuggestions<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">6</SPAN><SPAN class="punctuation token">,</SPAN> minSuggestCharacters<SPAN class="punctuation 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="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>search<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"top-right"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> search<SPAN class="punctuation token">.</SPAN>viewModel<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"search-complete"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> searchResults <SPAN class="operator token">=</SPAN> event<SPAN class="punctuation token">.</SPAN>results<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>results<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">'title'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>visibility <SPAN class="operator token">=</SPAN> <SPAN class="string token">"visible"</SPAN><SPAN class="punctuation token">;</SPAN> pagenum <SPAN class="operator token">=</SPAN> searchResults<SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token">/</SPAN> <SPAN class="number token">10</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="operator token">!</SPAN>Number<SPAN class="punctuation token">.</SPAN><SPAN class="token function">isInteger</SPAN><SPAN class="punctuation token">(</SPAN>pagenum<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> pagenum<SPAN class="operator token">++</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> pagehtml <SPAN class="operator token">=</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">for</SPAN> <SPAN class="punctuation token">(</SPAN>x <SPAN class="operator token">=</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">;</SPAN> x <SPAN class="operator token"><=</SPAN> pagenum<SPAN class="punctuation token">;</SPAN> x<SPAN class="operator token">++</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> pagehtml <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">"<a id='page"</SPAN> <SPAN class="operator token">+</SPAN> x <SPAN class="operator token">+</SPAN><SPAN class="string token">"' href='#' style='margin-right:5px;' onClick='gotoresultspage(this.innerHTML)'>"</SPAN> <SPAN class="operator token">+</SPAN> x <SPAN class="operator token">+</SPAN> <SPAN class="string token">"</a>"</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> pagehtml <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">"<div id='resultstable'></div>"</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">'title'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>innerHTML <SPAN class="operator token">=</SPAN> pagehtml<SPAN class="punctuation token">;</SPAN> gotopage <SPAN class="operator token">=</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="token function">gotoresultspage</SPAN><SPAN class="punctuation token">(</SPAN>gotopage<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> 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> <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> scaleBar <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">ScaleBar</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> view<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">,</SPAN> unit<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"non-metric"</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>scaleBar<SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> position<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"bottom-left"</SPAN> <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="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>homeBtn<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"top-left"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="token function">gotoresultspage</SPAN><SPAN class="punctuation token">(</SPAN>gotopage<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">var</SPAN> table <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">"resultstable"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> tableCode <SPAN class="operator token">=</SPAN> <SPAN class="string token">"<table style='width:100%'>"</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> en <SPAN class="operator token">=</SPAN> gotopage <SPAN class="operator token">*</SPAN> <SPAN class="number token">10</SPAN><SPAN class="punctuation token">,</SPAN> bn <SPAN class="operator token">=</SPAN> en <SPAN class="operator token">-</SPAN> <SPAN class="number token">10</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">for</SPAN> <SPAN class="punctuation token">(</SPAN>x <SPAN class="operator token">=</SPAN> bn<SPAN class="punctuation token">;</SPAN> x <SPAN class="operator token"><</SPAN> en<SPAN class="punctuation token">;</SPAN> x<SPAN class="operator token">++</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="operator token">!</SPAN>searchResults<SPAN class="punctuation token">[</SPAN>x<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> objid <SPAN class="operator token">=</SPAN> commonname <SPAN class="operator token">=</SPAN> <SPAN class="string token">" "</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="keyword token">else</SPAN><SPAN class="punctuation token">{</SPAN> commonname <SPAN class="operator token">=</SPAN> searchResults<SPAN class="punctuation token">[</SPAN>x<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>feature<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>common_name<SPAN class="punctuation token">;</SPAN> objid <SPAN class="operator token">=</SPAN> searchResults<SPAN class="punctuation token">[</SPAN>x<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>name<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> tableCode <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">"<tr><td>"</SPAN> <SPAN class="operator token">+</SPAN> objid <SPAN class="operator token">+</SPAN> <SPAN class="string token">"</td><td>"</SPAN> <SPAN class="operator token">+</SPAN> commonname <SPAN class="operator token">+</SPAN> <SPAN class="string token">"</td></tr>"</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> tableCode <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">"</table>"</SPAN><SPAN class="punctuation token">;</SPAN> table<SPAN class="punctuation token">.</SPAN>innerHTML <SPAN class="operator token">=</SPAN> tableCode<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">"title"</SPAN> style<SPAN class="operator token">=</SPAN><SPAN class="string token">"visibility:hidden; margin-left:auto; margin-right:auto; position:absolute; z-index:10; width:300px; height:230px; background-color:#ffffff; text-align:center; float:center;"</SPAN><SPAN class="operator token">></SPAN>title<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewDiv"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><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>
Yes Robert, Thank you very much.
Hi Robert,
I am trying to link the template to the search table, can you please tell me what is the best way to do that? I couldn't find any properties. this is my first project that using javascript and API.
What is the "template"? What do you mean link them?
I have a template which you can find in my code, and I mean when clicking on one of the search results in the search table, how it can show this template?
Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
