I have a code segment for a popups in a Parks layer. I have a bunch of features on a different layer called Recreation that contains the locations of different activities and amenities. There's a matching field which I'm using to filter out Recreation points that don't correspond to a given park. Then I use GroupBy to generate a table that shows how many of each activity are in the park. It works pretty darn good! What I want to do to really make it pop is add icons to this table. The recreation points layer has a field called iconPath that contains a hyperlink to an icon stored on my server. Each distinct RecType is points to one specific icon on the server. As an example, every point where RecType = Basketball has a iconPath = '<file path>/Basketball.png' So my table and count works great, but I really want to add these icons before the activity name.
// TABLE HEADINGS STYLING //
var tStyleH = `<table style="width:100%;">`
var trpt1H = `<tr><td style="width:50%;padding-left:2%;color:#637800"><b>`
var trpt2H = `</b></td><td style="width:50%;padding-left:2%;color:#637800"><b>`
var trpt3H = `</b></td></tr>`
// MAIN TABLE STYLE
var tStyle = `<table style="width:100%;">`
var trpt1 = `<tr><td style="border-bottom: 1px solid #cccccc;border-right: 1px solid #cccccc;width:50%;padding-left:2%"><b>`
var trpt2 = `</b></td><td style="border-bottom: 1px solid #cccccc;border-right: 1px solid #cccccc;width:50%;padding-left:2%">`
var trpt3 = `</td></tr>`
var endTable = `</table>`
// Get Recreation Points
var recPts = FeatureSetByName($map, "Recreation",['RecCategory','RecType','iconPath'],False)
var pName = $feature.Name
// Filter out rec points that are in this park
var filterStatement = "Park = @pName"
var fil = filter(recPts,filterStatement)
// Filter to show only 'Activities'
var filterStatement2 = "RecCategory = 'Activity'"
var fil2 = filter(fil,filterStatement2)
// below is the hypothetical inline url
// var iconUrl = `<img src="${fil2.iconPath}" width="24" height="28" style="margin-right: 10px; display: block; vertical-align: middle;">`
// List out activities within the park and count how many of each occur
var activities = GroupBy(fil2, 'RecType', { name: 'NumTypes', expression: 'RecType', statistic: 'COUNT' })
var RecList = ''
for (var activity in activities){
RecList += `${trpt1}${activity.RecType}${trpt2}${activity.NumTypes}${trpt3}`
}
// BUILD RETURN //
var h = `<h3 style="color:#637800;font-size:20x">Activities</h3>`
var headers = `${trpt1H}Activity Name${trpt2H}Number Available${trpt3H}`
return {
type : 'text',
text : `${h}
${tStyleH}${headers}${endTable}
${tStyle}${RecList}${endTable}`
}
I feel like using GroupBy to get this table constructed is going to prevent me from doing this, but is it possible to access more than one field from that GroupBy feature set?
Solved! Go to Solution.
Give this a try
var activities = GroupBy(fil2, 'RecType', [{ name: 'NumTypes', expression: 'RecType', statistic: 'COUNT' }, {name: 'Icon', expression: 'iconPath', statistic: 'Min' }])
You can use the Min and Max statistics on string fields. In your case, each would give the same result, since the paths are the same for each RecType.
You can try using an array of objects for your statistics, that way you can include the iconPath field. But I don't know if there's a statistics mode that will work for strings. An alternative is to use Distinct to get a list of unique iconPaths with the corresponding RecType, then you can turn that into a dictionary and grab the iconPath as you build the final table.
Give this a try
var activities = GroupBy(fil2, 'RecType', [{ name: 'NumTypes', expression: 'RecType', statistic: 'COUNT' }, {name: 'Icon', expression: 'iconPath', statistic: 'Min' }])
You can use the Min and Max statistics on string fields. In your case, each would give the same result, since the paths are the same for each RecType.
With some tweaking on my styling, this will be perfect! I didn't know you could just do multiple groups within the same groupby function. Thanks Ken, great advice as always!