Format custom pop-ups using HTML in ArcGIS Online Map Viewer Classic

Summary

In ArcGIS Online, pop-ups are used to display an attribute's information of a certain feature. A standard pop-up comprises a default font text, and a single column listing of fields. However, it is possible to customize the text formatting styles. This article provides instructions to customize a pop-up display using HTML in ArcGIS Online Map Viewer Classic.

Procedure

1. Open the map in Map Viewer Classic. Click Details, and click Content.
2. Click the More Options button next to the layer, and click Configure Pop-up.

3. Under the Pop-up Contents section in the Configure Pop-up pane, for Display, select A custom attribute display from the drop-down menu, and click CONFIGURE to open the Custom Attribute Display dialog box.

4. Click the View HTML Source button to switch the view to HTML Source.

5. Specify the HTML code within the Custom Attribute Display dialog box area to customize the style of the pop-up. In the example below, the pop-up is customized to reveal clear lines, wordings are aligned to the left with the first column bolded, and the cells are colored blue.

<table cellpadding="0px" cellspacing="3px">
<tbody>
<tr valign="top">
<td style="width:125px; text-align:left; background-color:#ede8e8; padding:5px"><b>Type of amenity</b></td>
<td style="width:225px; text-align:left; background-color:#ede8e8; padding:5px"><span>{AssetType}</span>
</td>
</tr>
<tr valign="top">
<td style="width:125px; text-align:left; background-color:#ede8e8; padding:5px"><b>Notes</b></td>
<td style="width:225px; text-align:left; background-color:#ede8e8; padding:5px">{Notes}</td>
</tr>
<tr valign="top">
<td style="width:125px; text-align:left; background-color:#ede8e8; padding:5px"><b>Bench length</b></td>
<td style="width:225px; text-align:left; background-color:#ede8e8; padding:5px">{BenchLength}</td>
</tr>
</tbody></table>

6. Click OK to close the Custom Attribute Display dialog box, and click OK again to close the Configure Pop-up pane.

7. Click Save.

The image below displays the standard pop-up.

The customized pop-up is displayed as below.