This sample demonstrates how to specify various types of popup elements within the PopupTemplate's content. There are seven types of popup elements: fields, media, text, attachments, custom, expression, and relationship. These elements can be used on their own or combined within the same template. The order in which the elements are listed within the content determines how they will be displayed within the popup.
In this sample, the popup displays the following content types:
-
Fields in a tabular format using FieldsContent
Use dark colors for code blocks Copy { // Displays a table of fields configured in the fieldInfos. // If no fieldInfos is specifically set in the content, // it defaults to whatever may be set within the popupTemplate. type: "fields", // Autocasts to FieldsContent }, -
A descriptive text using TextContent
Use dark colors for code blocks Copy { // A descriptive text element. This element uses an attribute // from the feature layer which displays a // sentence giving the median household income of the area. // Text elements can only be set within the content and HTML formatting is supported. type: "text", // Autocasts to TextContent text: "The median household income in this area is estimated to be <b>${B19049_001E}</b> (±${B19049_001M}).", }, -
And a media element using MediaContent that holds two charts and an image.
Use dark colors for code blocks Copy { // A media element. This can be either an image or a chart. // You specify these within the mediaInfos. The following creates bar // and pie chart along with an image. // Similar to text elements, media can only be set within the content. type: "media", // Autocasts to MediaContent title: "Median income details for {Name}", mediaInfos: [ // Column chart that uses custom chart colors to represent specified fields. { title: "<b>Income by householder age</b>", type: "column-chart", caption: "Median household income by householder age.", value: { fields: ["B19049_002E", "B19049_003E", "B19049_004E", "B19049_005E"], // Set the colors array to various shades of green since the chart represents income. colors: [ new Color("#598c58"), new Color("#dde8b2"), new Color("#637349"), new Color("#becc97"), ], }, }, // Pie chart that uses the default chart colors to represent specified fields. { title: "<b>Self employment income</b>", type: "pie-chart", caption: "Households with or without self employment-income.", value: { fields: ["B19053_002E", "B19053_003E"], }, }, // Image from the US Census website regarding the national social and economic well-being. { type: "image", caption: "Image showing data measuring the nation's social and economic well-being.", value: { sourceURL: "https://www.census.gov/library/visualizations/2023/comm/well-being/_jcr_content/root/responsivegrid/embeddableimage.coreimg.jpeg/1694484822013/measuring-social-economic-well-being.jpeg", }, }, ], },