Popup tab controls

Look up every control on the Popup tab for vector layers: the four popup types, the title, the custom editor, and the calculator steps.

Popups decide what a viewer sees when they click a feature on the map. This page lists every control on the Popup tab — the four popup types and what each one exposes — with defaults and choices.

The Popup tab is available for vector layers (point, line, polygon). Raster and WMS layers don’t have a Popup tab.

Type

Default	`None`
Choices	`None`, `Default`, `Custom`, `Calculator`
Where	First control on the `Popup` tab

The popup mode for the layer. Each choice replaces the controls below with its own.

In-product descriptions:

None — popup disabled.
Default — “A simple list of all attributes enabled in Format settings.”
Custom — “Create detailed popups with rich text, images, charts, and dynamic content.”
Calculator — “Interactive tool for performing calculations using feature attribute values.”

Title

Default	None — empty field
Where	Below the `Type` dropdown, hidden when `Type` is `None`

The header text shown above the popup body. Supports {field_name} variables for per-feature titles. Variable insertion is available via the button at the right edge of the field.

The title field is shared across Default, Custom, and Calculator — set it once and it applies regardless of which type you pick.

None

No additional controls. Selecting None disables popups entirely on the layer.

Default

No additional controls on the Popup tab. The displayed attribute list, labels, formatting, and visibility are all controlled on the Format tab.

Custom

Selecting Custom reveals a rich-text editor (the popup editor) plus two buttons.

Clears the popup title and replaces the editor content with an auto-generated list of every attribute on the layer. Disabled if the popup is already in its default state. Confirmation dialog warns that customisations will be lost.

Where

Main area below the toolbar

A WYSIWYG editor with the toolbar extensions listed below. Nothing saves until you click Save Changes.

Save Changes button

Where

Below the editor, right-aligned

Saves the title and template to the layer. Label changes to Saved once there are no unsaved changes; re-enables to Save Changes when the editor content changes again.

Custom editor controls

Each control shows its name as a tooltip when you hover over it. Some appear in the toolbar. Others appear inside the editor, in a small menu or on a chip.

Where	Controls
Toolbar	`Font` (`Normal`, `H1`–`H6`), `Text colour`, `Background colour`, `Set link`, `Insert image`, `Insert YouTube video`, `Insert iframe`, `Insert table`, `Insert horizontal rule`, `Insert simple variable`, `Insert equation`, `Insert chart`, `Insert conditional`
Menu on selected text	`Bold`, `Italic`, `Strikethrough`, `Bullet list`, `Ordered list`, `Align left`, `Align centre`, `Align right`, `Justify`
Menu on an empty line	`Heading 1`, `Heading 2`, `Heading 3`, `Bullet list`, `Ordered list`
Menu on a link or button	`Edit`, `Visit`, `Unlink`, `Align left`, `Align centre`, `Align right`, `Justify`
Menu on an image	`Edit image`, `Set auto width`, `Align left`, `Align centre`, `Align right`, `Delete image`
Menu on a table	`Column Operations`, `Row Operations`, `Hide table outline`, `Delete Table`
Buttons on a variable chip	`Edit variable`, `Delete variable`
Buttons on an equation chip	`Edit equation`, `Delete equation`
Menu on a chart	`Configure chart`, `Delete chart`
Buttons on a conditional chip	`Edit conditional`, `Delete conditional`

The menu on a table opens from Table options (⋯) at the top-right corner of the table, or from a right-click in a cell. The buttons on a chip show when you hover over the chip or select it.

Insert simple variable shows only when the layer has attributes. Insert conditional is disabled, with the tooltip No fields available, when the layer has no fields.

Each per-feature how-to in this folder describes the control’s dialog and its per-feature variables.

Set link dialog

Where	`Set link` in the toolbar, or `Edit` in the menu on a link or button
Title	`Add Link`, `Edit Link`, `Add Button`, or `Edit Button`

Creates or edits a link or an interactive button. Link type decides which fields show:

Field	Shown for	Default	Notes
`Link type`	Every link	`Web link`	Choices: `Web link`, `Email`, `Phone`, `SMS`. A disabled `Other` choice shows only when an existing link uses another kind of link.
`URL`	`Web link`	Empty	No spaces outside a variable. A domain without `https://`, such as `example.com`, gets `https://` on save.
`Email address`	`Email`	Empty	One email address, or a variable. Saved as a `mailto:` link.
`Subject`	`Email`	Empty	Plain text and variables. Encoded on save.
`Body`	`Email`	Empty	Plain text over several lines, and variables. Encoded on save.
`Phone number`	`Phone`, `SMS`	Empty	Digits with an optional `+` at the start. Spaces, brackets, dots, and dashes are allowed and removed on save. Saved as a `tel:` (`Phone`) or `sms:` (`SMS`) link.
`Link Text (optional)`	A new link with no text selected	Empty	The text viewers click. When empty, the link itself becomes the text.
`Button Text`	`Display as button` ticked	Empty	The button label. When empty, the label is `Button`. Accepts variables.
`Open in new tab`	`Web link`	Ticked on a new link or button	When cleared, the page replaces the map.
`Display as button`	Every link	Cleared on a new link	Shows `Size`, `Colour`, `Variant`, and a `Preview`.

URL, Email address, Subject, Body, and Phone number each have an Insert simple variable button when the layer has attributes.

Link with another kind of link. When an existing link uses a kind of link the dialog cannot build, Link type shows Other and the link is read-only. Choose another Link type to replace it.

Pasting a complete link. Pasting a link that starts with http://, https://, mailto:, tel:, or sms: into the value field sets Link type to match and removes the prefix. A pasted mailto: link fills Subject and Body from its subject= and body= parts. A body= part on a pasted sms: link is kept but not shown, and is lost when Link type changes.

Selected email address. When the selected text is an email address, the dialog opens with Link type set to Email and the address filled in.

Save button. The label is Add Link, Update Link, Add Button, or Update Button. While the value field is empty, it is Remove Link or Remove Button, and clicking it removes the link or button.

Validation messages:

Message	Cause
`This link type is not supported.`	The value starts with a kind of link that popups do not support, such as `ftp:` or `javascript:`.
`Web links cannot contain spaces.`	A `Web link` value has a space outside a variable.
`Enter a valid email address.`	The `Email address` value is not one email address and has no variable.
`Enter a valid phone number.`	The `Phone number` value has other characters, or has no digits and no variable.
`Enter a value.`	The value field holds only spaces.

Variables in links. When the popup opens, each {field_name} in a link or button target takes the feature’s raw value, not the value as formatted on the Format tab. Values in Subject, Body, and an sms: message are encoded. Values in a Phone or SMS link keep only the digits and a + at the start. An attribute that is not set leaves the {field_name} text in the link.

Embed URL dialog

Where Insert iframe in the toolbar

Inserts a web page (an iframe) or, for an .mp4 or .webm file, a video player.

Field	Default	Notes
`Embed URL`	Empty	An `https://` address on another site, or full `<iframe>` code. From code, only the `src` address and the `height` are kept. Accepts `{field_name}` variables.
`Insert simple variable`	—	Adds a `{field_name}` at the cursor in `Embed URL`. Shown when the layer has attributes.
`Height (pixels)`	`300`	A whole number above 0. Pasted code with a `height` sets it. The width always fills the popup.
`Embed`	—	Inserts the embed after the selected embed, or at the cursor. Disabled while `Embed URL` is empty. `Enter` in `Embed URL` does the same.

An address whose path ends in .mp4 or .webm inserts a video player with controls that does not start on its own. Any other address inserts a web page.

In the editor, an embed whose address has a variable, or is not allowed, shows as a dashed box with Embed: and the address.

Validation messages:

Message	Cause
`Use an HTTPS embed URL from an external site`	The address is not `https://`, or is a MangoMap page or a page on the map’s own site.
`Use valid HTTPS iframe embed code`	Pasted `<iframe>` code has no `https://` address on another site.
`Height must be a positive number of pixels`	`Height (pixels)` is empty, 0, or not a whole number.
`Video is not available in this editor`	A video file address in an editor that has no video player.
`Failed to construct 'URL': Invalid URL`	The address is not a full web address, such as `example.com` or a variable on its own (`{dashboard_url}`).

YouTube URL dialog

Where Insert YouTube video in the toolbar

Field	Default	Notes
`YouTube URL`	Empty	A YouTube `watch?v=` or `/embed/` link. A link is saved as YouTube’s embed address. For a different video per feature, type `https://www.youtube.com/embed/{video_id}`.
`Insert Video`	—	Inserts the player. Disabled while the field is empty. `Enter` in the field does the same.

A value that is not a YouTube link inserts nothing, with no message. https://www.youtube.com/watch?v={video_id} inserts an empty player.

Allowed embed URLs at render time

After the variables are filled in, each iframe and video address is checked:

Address	Iframe	Video
`https://` on another site	Shown	Shown
`https://` on the map’s own site, `mangomap.com`, or an address under them	Removed	Shown
`http://`, a relative path, `//host`, `javascript:`, `data:`, `blob:`, or `about:`	Removed	Removed
An empty variable, or a `{` or `}` left in the address	Removed	Removed

A removed embed leaves no message in the popup. Every iframe fills the popup’s width, with the saved height or 300 pixels. A video player always shows its controls and never starts on its own.

Allowed link targets at render time

After the variables are filled in, each link and button target is checked. These targets are allowed:

Target	Example
Web address	`https://example.com/{slug}`, `http://example.com`
Domain without `https://`	`example.com`, opened as `https://example.com`
Email link	`mailto:central+sg-0001@example.com`
Phone link	`tel:+6549570006`
Text message link	`sms:+6549570006`
Path on the same site	A target that starts with `/`, `#`, or `?`

With any other target, a text link shows as plain text and a button does nothing.

Email, phone, and text message links and buttons open in the viewer’s app and ignore Open in new tab. A web button opens in a new tab only when Open in new tab is ticked.

Calculator

Selecting Calculator reveals a 3-step vertical wizard. Click any step heading to open it.

Step 1 — Title, Description & Button Text

Three fields:

Description & Instructions — a rich-text editor.
Button Text — single-line text input. Default: Calculate.
Next button — advances to Step 2 and saves Step 1’s changes.

Step 2 — Input Fields

Lists the form fields the calculator presents to viewers. Each row contains:

A monospace chip showing the field’s variable ID ({form_1}, {form_2}, …).

Empty labels show the helper Label is required.

A delete (bin) button. Disabled when there’s only one field left.

Header controls:

Add Field button — appends a new field with auto-incrementing ID.

Validation: the Next button is disabled until every field has a non-empty label. Inline error message: All field labels must be filled before proceeding.

Every calculator field is a numeric input — formulas require numeric values, so text and select-list inputs aren’t supported. The field rows don’t expose a type selector or a “required” toggle.

Step 3 — Calculation Formula

A formula editor that accepts:

Layer attribute references — {field_name}.
User input references — {form_1}, {form_2}, … (matching Step 2’s field IDs).
Equations, inserted with Insert equation.

The formula evaluates per feature, so layer-wide aggregations (sum, avg, etc.) aren’t available here. They’re a Query and Proximity Analysis report feature.

Two buttons: Back (returns to Step 2) and Save (commits the calculator config).

For the full formula syntax reference, see Calculator formula syntax.