Javascript API 4.12 - Is it possible to use the Esri Web Style Symbols in a dropdown menu?

JarellPerez3

I want the user to be able to select the symbol of the features on the map. Currently I just have symbol names, can I replace these with actual symbols? (Circle, Square, Cross, etc.)

RalucaNicola1

I'm not sure I understand your question very well, but assuming you have a style item with myltiple symbols (either published by you or by esri) you could request the symbols in that style and they have thumbnails that you can display in a drop-down list. 

So for example for the icons style: https://www.arcgis.com/home/item.html?id=a91ce080e9414810b71d55edc51b5837 you could make a request to get the item and then request the data associated with it using fetchData().

<SPAN class="keyword token">const</SPAN> portal <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Portal</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"https://www.arcgis.com"</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

portal<SPAN class="punctuation token">.</SPAN><SPAN class="token function">load</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
   <SPAN class="comment token">// Create query parameters for the portal search</SPAN>
   <SPAN class="keyword token">const</SPAN> queryParams <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">PortalQueryParams</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
       query<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"id: a91ce080e9414810b71d55edc51b5837"</SPAN>
   <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

   <SPAN class="comment token">// Get the item based on the queryParams created from portal above</SPAN>
   portal<SPAN class="punctuation token">.</SPAN><SPAN class="token function">queryItems</SPAN><SPAN class="punctuation token">(</SPAN>queryParams<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>items<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
       <SPAN class="keyword token">return</SPAN> items<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><SPAN class="token function">fetchData</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
   <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>
   <SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN>createDropDown<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

I made a live sample here: https://codepen.io/ralucanicola/pen/PoYNrNJ?editors=1000