Community

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

336
1
08-14-2019 12:23 PM
JarellPerez3
by
New Contributor
‎08-14-2019 12:23 PM

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.)

Tags (1)
0 Kudos
1 Reply
RalucaNicola1
by Esri Contributor
Esri Contributor
‎08-16-2019 02:15 AM

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().

const portal = new Portal({url: "https://www.arcgis.com"});

portal.load().then(function() {
   // Create query parameters for the portal search
   const queryParams = new PortalQueryParams({
       query: "id: a91ce080e9414810b71d55edc51b5837"
   });

   // Get the item based on the queryParams created from portal above
   portal.queryItems(queryParams).then(function(items){
       return items.results[0].fetchData();
   })
   .then(createDropDown);
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

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