I am trying to setup a popup such that I would like it to show more addresses (if greater than 2) as a clickable, like a clickable text (view more addresses). Below code is an attempt which opens up a new blank browser window in Experience Builder. Since the map is embedded in an Experience Builder app.
Purpose:
The popup should initially show only two addresses followed by a clickable text. If the user clicks on that text only then more addresses will show.
Desired output:
Current code:
/ Create a variable that is the FeatureSet of intersecting feature attributes
var Address = FeatureSetByName($map, "ADDRESS")
var intersectLayer = Intersects(Address, $feature)
// This variable will be used to track the number of addresses shown
var addressCount = 0;
var showAllAddresses = true;
var popup = '<h3>Property Summary</h3>';
for (var f in intersectLayer){
if (addressCount < 2) {
popup += `<b>Address:</b> ${f.FullAddress} <br><br>`;
addressCount++;
} else {
//popup += '<em>More addresses...</em>';
popup += '<em><a href="javascript:toggleAddresses()">View more addresses...</a></em>';
break; // Exit the loop after showing two addresses
}
}
// Function to toggle the display of all addresses
function toggleAddresses() {
showAllAddresses = true;
// Rebuild the popup content with all addresses
popup = '<h3>Property Summary</h3>';
for (var f in intersectLayer){
popup += `<b>Address:</b> ${f.FullAddress} <br><br>`;
}
}
As far as I know, you don't have that control over popups in a webmap in ArcGIS Online. You'd have to create your own site using Javascript do to something like that.
Sounds good Ken, good to know, it would be great if ESRI adds JS and react capabilities in map viewer (and other apps) itself rather than creating an entire site using ArcGIS SDK for JS for minor changes. Like they can simply add a toggle to modify code option in the app itself.