AnsweredAssumed Answered

How to extract legend symbols for use in other widgets

Question asked by franklin.alexander on Jan 17, 2018
Latest reply on Jan 30, 2018 by franklin.alexander

I have an application that uses the 'Near Me' widget to query a database and return a list of seabird rehabbers based on the distance from an address, or from any location set from a mouse click on map. The query result (rehabbers list) then appears in a panel in the widget beneath the search box and zoom slider. It shows the name of the rehabber and distance from the address/point.  I also have a legend that symbolizes the rehabbers by permit type (there are two symbols). 

 

I don't like having to toggle between the legend and 'Near Me' widget, so I as able to place the legend inside the 'Near Me' widget just above the list of rehabbers. I think this is a step in the right direction, but I would also like to place a symbol beside each list item so people using the app can easily see what permit type the rehabber has. I can list the permit type in the table as well, but then you have to go into the details panel of the rehabber to view the permit type which can be a little inconvenient. I have looked, but haven't been able to find a method to extract the correct symbol from the legend in order to show it in a div beside the rehabber name. The feature layer with the symbology is published on REST services, so it can't be that hard to access the symbol, just haven't been able to figure it out yet. If anyone knows of a method that does this, or maybe can point me in the right direction on how to approach the scripting that would be great. I know where the script goes and generally how to set it up so that the symbol will appear next to the rehabber name in the feature list, it's just the specific code/method to access the correct legend symbol that is escaping me :-) 

 

There are actually several places in the 'Near Me' widget item-list.js file where I need to add code, but I am pretty sure the specific code I need for extracting the legend symbol should go here (where I have the question mark):

 

_setItemLegend: function (templateDiv, value) {
    var divItemLegend = query(".esriCTItemLegend", templateDiv)[0];
    if (divItemLegend) {
         var value = code/method to get legend image?
         domAttr.set(divItemLegend, "innerHTML", value);
         domAttr.set(divItemLegend, "Legend", value);
     }
},

 

 

Thanks for any ideas!! 

Outcomes