Pull multiple attributes from multiple overlapping layers in single popup

[Ed_]

I have three layers, two of them are polygons (parcels and buildings) and one of them is a point. I would like the parcel's popup to return multiple attributes/columns from the building layer as well as the point layer.

Based on the code below, I am able to show a single corresponding attribute from the building layer when a parcel is clicked.

But now I want to return more attributes from the building layer as well. 

How can I do this?

Like let's say I also want return values from the columns `LenFt` and `ID` then how can I do that?

Side question: Also is there a way to add contextual text before the attribute value in the Arcade code?

Like let's say I want to add bold `Area:`, `Length:` and `ID:` before each of the returned attribute value.

Attributes of interest from the building layer:

Code:

// Create a variable that the FeatureSet of intersecting feature attributes  
var building = FeatureSetByName($map, "BuildingFootprints_Clip")

var intersectLayer = Intersects(building, $feature)  

for (var f in intersectLayer){ 
	
	var popup = f.AREAFT
	
	}  
 
 return popup

[Ed_]

@KenBuja  the 

 <b. </b>

formatting is not working any clues?

Whereas I would like the input to look to something like this:

Area: 6682

Lentgh: 6682

ID: 0

[KenBuja]

Are you putting this in Arcade element?

 

 

 

[Ed_ · Accepted solution]

Happy Friday Ken, so, I should put the entire code in Arcade element and not in expressions? 

[KenBuja]

If you want to include HTML code, you'll have to use an Arcade element.

[Ed_]

Oh I see thanks Ken, then can I use Arcade element in the text box similar to how you embed Arcade Expressions in the text box?

[KenBuja]

What is the final goal? What do you want your popup to look like?

[Ed_]

A regular popup with attributes from multiple intersected layers in a single popup. And then separate each layer,'s attribute with a bold subheading or something. So I don't know what would be a better method an Arcade element or embedding Arcade Expressions in a text box.

[KenBuja]

You could do a combination of text boxes and Arcade elements. The only drawback is you'll have a space between them. You can use the text box with expressions if you want to use the same HTML formatting for everything in an expression. If you want to have an expression to have different HTML formats in the same output, you'd have to use an Arcade element.

[Ed_]

So Ken, I was able to get the text bolded as shown below:

But the attributes are not appearing in the next line. I also tried using /n but that did not work either.

Code for that:

// Create a variable that the FeatureSet of intersecting feature attributes  
var building = FeatureSetByName($map, "BuildingFootprints_Clip")

var intersectLayer = Intersects(building, $feature)  

var popup;

for (var f in intersectLayer){ 
  var popup = `<b>Area:</b> ${f.AREAFT} 

  
  <b>Length:</b> ${f.LENFT} 
  
  
  <b>ID:</b> ${f.ID}
`
}  



return {
  
  type : 'text',
  text : popup
}

Also you will notice in another code below that I have tried to add two headings  one before the attributes and the another heading for the next layer's attributes. But, for some reason the output only shows the Points heading and nothing else.

Code for that:

// Create a variable that the FeatureSet of intersecting feature attributes  
var building = FeatureSetByName($map, "BuildingFootprints_Clip")

var intersectLayer = Intersects(building, $feature)  

var popup;

for (var f in intersectLayer){ 
  var popup = `<b>Area:</b> ${f.AREAFT} 

  
  <b>Length:</b> ${f.LENFT} 
  
  
  <b>ID:</b> ${f.ID}
`
}  



return {
  
  type : 'text',
  text : '<h2>Building</h2>',

  type : 'text',
  text : popup,

  type : 'text',
  text : '<h2>Points</h2>',
}

// Now bring in the attributes from the next intersected layer with Parcel

I know I can use the the Text box  to add the headings but like you said then there would be a space between the text box heading and the Arcade Element which may or may not be ideal.

[Ed_]

Ken, I got the line breaks fixed by adding <br> next to each attribute but I am still stuck with adding the headings. Also as you can see the line breaks don't look ideal as the line breaks are too closely spaced. And I am not sure how to increase/adjust the line spacing.

<b>Area:</b> ${f.AREAFT} <br>