Skip to main content

Popup

Popups display relevant information when users interact with map features. This keeps your map clean while providing detailed information on demand. You can choose when to show the popup, add content blocks, and control how everything is presented.

Popup displaying feature information

How to configure popups

1
Select your layer and navigate to Layer design Styling Icon, then open the Popup section and enable the toggle.
2
Set Show popup on: On click, Only on hover, or On click and on hover.
3
Under Content, click + Add block to add content blocks. Available block types: Field list, Text, Image, Button, Badge, Divider.
4
For a Field list block: choose Table or List layout, click + Add attribute to select which fields to display, and optionally set Collapse after to limit the number of visible rows.
5
Under Appearance, configure the following options:
  • Layout: choose Popup or Pinned
  • Width: set a fixed width in px, or leave as Auto
  • Max height: set a maximum height in px to enable scrolling for long content
  • Header: choose Standard, Compact, or None
  • Highlight active feature: toggle to highlight the selected feature on the map

HTML mode

For full control over the popup design, switch to HTML mode under Content. This lets you write custom HTML and CSS to create rich, branded popups — with images, styled cards, custom fonts, and dynamic field values.

1
Under Content, click the HTML tab.
2
Click Edit to open the HTML editor and write your custom markup.
3
Use {{field_name}} placeholders to inject feature attribute values dynamically into your HTML.
Custom HTML popup in GOAT

Best practices

  • Choose relevant fields that provide meaningful context to users
  • Use clear, descriptive names instead of technical field names
  • Limit the number of fields to avoid overwhelming users with information
  • Use collapse to keep popups compact when showing many attributes