In Map Viewer, the spacing between images displayed in pop-ups is excessively wide, resulting in a poor visual layout. Additionally, there are no configuration options available for users to adjust image margins or control spacing, limiting customization and usability.

対処法

When adding multiple images to a pop-up in ArcGIS Online’s Map Viewer using the Add Content option, users may encounter excessive blank space between images. This affects visual clarity, especially when trying to stack multiple images vertically in a clean layout.

Testing/investigation

• Used Arcade to adjust image positioning.
• Removed <br> tags, which slightly improved spacing (e.g., scroll bar disappeared).
• Confirmed the images themselves were properly cropped, excess space was not from the source images.

Arcade expression used:

//function to place image to side of text

function buildbox(imageURL){

 return '<figure class="table"><table style="width:100%"><tbody><tr><td style="width:100%; text-align:center; vertical-align:middle;"><img src="' + imageURL + '" />' + '</td></tr></tbody></table></figure>'

}

function buildbox2(imageURL2){

return '<figure class="table"><table style="width:100%"><tbody><tr><td style="width:100%; text-align:center; vertical-align:middle;"><img src="' + imageURL2 + '" />' + '</td></tr></tbody></table></figure>'

}

var ViewLocsIMG = "https://live.staticflickr.com/65535/54625405422_6ac36b901e_m.jpg"

var ContactsIMG = "https://live.staticflickr.com/65535/54625405237_8b7b55292c_m.jpg"

var OfficeIMG = "https://live.staticflickr.com/65535/54625031213_ab19f0ceed_m.jpg"

var LogoIMG = "' " + $feature.Images + "'"

var textstring = '<span style="font-size:18px;">' + $feature.PRJDesc + '<br>' +

 '<a href="' + $feature.ViewsURL + '">' + buildbox(ViewLocsIMG) + '</a>' + "<br>" +

 '<a href="' + $feature.ContactURL + '">' + buildbox(ContactsIMG) + '</a>' + "<br>" +

 '<a href="' + $feature.OfficialURL + '">' + buildbox(OfficeIMG) + '</a>' + "<br>" + buildbox2($feature.Images) + '<br></span>'

return {

 type : 'text',

 text : textstring

}

Result:

再現の手順