Multiple popup elements

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 blocksCopy

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47
  48
  49
  50
  51
  52
  53
  54
  55
  56
  57
  58
  59
  60
  61
  62
  63
  64
  65
  66
  67
  68
  69
  70
  71
  72
  73
  74
  75
  76
  77
  78
  79
  80
  81
  82
  83
  84
  85
  86
  87
  88
  89
  90
  91
  92
  93
  94
  95
  96
  97
  98
  99
  100
  101
  102
  103
  104
  105
  106
  107
  108
  109
  110
  111
  112
  113
  114
  115
  116
  117
  118
  119
  120
  121
  122
  123
  124
  125
  126
  127
  128
  129
  130
  131
  132
  133
  134
  135
  136
  137
  138
  139
  140
  141
  142
  143
  144
  145
  146
  147
  148
  149
  150
  151
  152
  153
  154
  155
  156
  157
  158
  159
  160
  161
  162
  163
  164
  165
  166
  167
  168
  169
  170
  171
  172
  173
  174
  175
  176
  177
  178
  179
  180
  181
  182
  183
  184
  185
  186
  187
  188
  189
  190
  191
  192
  193
  194
  195
  196
  197
  198
  199
  200
  201
  202
  203
  204
  205
  206
  207
  208
  209
  210
  211
  212
  213
  214
  215
                {
                  // 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 blocksCopy

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47
  48
  49
  50
  51
  52
  53
  54
  55
  56
  57
  58
  59
  60
  61
  62
  63
  64
  65
  66
  67
  68
  69
  70
  71
  72
  73
  74
  75
  76
  77
  78
  79
  80
  81
  82
  83
  84
  85
  86
  87
  88
  89
  90
  91
  92
  93
  94
  95
  96
  97
  98
  99
  100
  101
  102
  103
  104
  105
  106
  107
  108
  109
  110
  111
  112
  113
  114
  115
  116
  117
  118
  119
  120
  121
  122
  123
  124
  125
  126
  127
  128
  129
  130
  131
  132
  133
  134
  135
  136
  137
  138
  139
  140
  141
  142
  143
  144
  145
  146
  147
  148
  149
  150
  151
  152
  153
  154
  155
  156
  157
  158
  159
  160
  161
  162
  163
  164
  165
  166
  167
  168
  169
  170
  171
  172
  173
  174
  175
  176
  177
  178
  179
  180
  181
  182
  183
  184
  185
  186
  187
  188
  189
  190
  191
  192
  193
  194
  195
  196
  197
  198
  199
  200
  201
  202
  203
  204
  205
  206
  207
  208
  209
  210
  211
  212
  213
  214
  215
                {
                  // 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 blocksCopy

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47
  48
  49
  50
  51
  52
  53
  54
  55
  56
  57
  58
  59
  60
  61
  62
  63
  64
  65
  66
  67
  68
  69
  70
  71
  72
  73
  74
  75
  76
  77
  78
  79
  80
  81
  82
  83
  84
  85
  86
  87
  88
  89
  90
  91
  92
  93
  94
  95
  96
  97
  98
  99
  100
  101
  102
  103
  104
  105
  106
  107
  108
  109
  110
  111
  112
  113
  114
  115
  116
  117
  118
  119
  120
  121
  122
  123
  124
  125
  126
  127
  128
  129
  130
  131
  132
  133
  134
  135
  136
  137
  138
  139
  140
  141
  142
  143
  144
  145
  146
  147
  148
  149
  150
  151
  152
  153
  154
  155
  156
  157
  158
  159
  160
  161
  162
  163
  164
  165
  166
  167
  168
  169
  170
  171
  172
  173
  174
  175
  176
  177
  178
  179
  180
  181
  182
  183
  184
  185
  186
  187
  188
  189
  190
  191
  192
  193
  194
  195
  196
  197
  198
  199
  200
  201
  202
  203
  204
  205
  206
  207
  208
  209
  210
  211
  212
  213
  214
  215
                {
                  // 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"
                      }
                    }
                  ]
                }