# The popup block

The popup block contains information on how the popup is displayed and which attributes to show.

These are the fields that each popup block can contain:

<table><thead><tr><th width="221">Field name</th><th>Description</th></tr></thead><tbody><tr><td><code>titleAttribute</code></td><td>Optional. The attribute that will be used to title the popup if available</td></tr><tr><td><code>imageAttribute</code></td><td>Optional. The attribute that will be used to populate the popup image if available</td></tr><tr><td><code>popupLayout</code></td><td>Optional. One of either “table” or “list”. The way the popup will show its contents. Defaults to "table"</td></tr><tr><td><code>keyAttributes</code></td><td>Optional. A list of attributes to show in the popup following the order defined here. If it’s not defined, only attributes with a value will show in the popup. If it’s defined, all attributes here will show even if the selected feature doesn’t include them.</td></tr></tbody></table>

{% code title="Example of a popup block" %}

```jsx
"popup": {
  "keyAttributes": [
    "osm_id",
    "barriers",
    "highway",
    "ref",
    "is_in",
    "place",
    "man_made",
    "other_tags"
  ],
  "titleAttribute": "barriers",
  "popupLayout": "list"
}
```

{% endcode %}