Skip to content
MangoMap Help Centre
Esc
↑↓navigate↵open⌘Jpreview
On this page

How to add dynamic content to a custom popup

Choose between equations, charts, conditionals, and interactive buttons in a custom popup, with links to the setup guide for each one.

A custom popup can also calculate values, draw charts, hide sections when conditions fail, and link to feature-specific URLs. Each has a toolbar button in the popup editor; this page helps you choose one, with links to the per-extension setup guides.

Before you start

The four extensions

To pick one, start from what the viewer needs to see or do:

Which dynamic content to add Flowchart: use a conditional to show content or words only for some values, an equation for a number worked out from fields, a chart to compare a few number fields, an interactive button to open a page or start an email, call or text, and plain attribute values for everything else. YES YES YES YES NO NO NO NO What should viewers get? Content or words onlyfor some values? A number workedout from fields? A few number fieldsto compare? A page to open, orsomeone to contact? Conditionalshow or hide a section, or a wordsuch as Open or Closed, by value Equationthe result is always a number;for words, use a conditional Charta bar or pie chart ofthe feature’s number fields Interactive buttona web link, or an email,phone call or text message Attribute values insert the values as text

Each extension has its own toolbar button in the Custom popup editor, except interactive buttons, which you add with Set link. They render when the popup opens and use the feature attributes.

Equations

What it does Displays a computed numeric value inline
Use when You want a value that’s derived from one or more attributes — a ratio, a difference, a sum
Example Density:, then an equation of {population} / {area}, then people/km²

Click Insert equation and type a small expression in the equation editor. The expression supports attribute references ({population}, {area}), arithmetic operators (including modulo and exponentiation), and functions such as round, floor, min, and max. The expression evaluates per feature, so layer-wide aggregations (sum, avg, count) aren’t available here — those live in the Query and Proximity Analysis tools. The result is always a number. To show a word for a value, such as Open or Closed, use a conditional.

For full setup, see How to add a calculated value to a custom popup. For the syntax, see Calculator formula syntax; for worked examples, see How to use operators and functions in equations.

Charts

What it does Renders a chart inside the popup, driven by feature attributes
Use when A feature carries a small set of comparable values — quarterly figures, category breakdowns, before/after pairs
Example A bar chart of q1, q2, q3, q4 revenue per feature

The chart extension opens a configuration modal where you pick the chart type and the attributes that supply the data.

For full setup, see How to add a chart to a custom popup.

Conditionals

What it does Shows or hides a section based on a feature’s attribute values
Use when Some features should display different content, or some sections shouldn’t render when an attribute is empty
Example “Show the ‘Booking link’ section only if bookable is true”

The conditional extension opens a 3-step wizard: define the condition, configure the content for the true and false branches, and review with a sample evaluation.

For full setup, see How to show or hide content based on a feature’s attributes.

Interactive buttons

What it does Renders a clickable button that opens a web page, or starts an email, a phone call, or a text message
Use when You want viewers to take an action — open a deeper page, view in another system, copy a reference
Example “View on Wikipedia” button that opens the right page for each feature using {wikipedia_slug}

The interactive button extension lets you choose a Link type (Web link, Email, Phone, or SMS), set the text and target, and choose whether a web link opens in a new tab. You can style the item as a button with Size, Colour, and Variant controls, or clear Display as button to insert a plain text link instead. Targets accept {field_name} variables for per-feature links.

For full setup, see How to add an interactive button to a custom popup.

How they compose

You can combine these extensions, such as placing a chart inside a conditional or an equation in a button label. A common pattern:

  • A conditional that hides the whole “Statistics” section when there’s no data.
  • Inside the section, a chart of category breakdowns plus a couple of equations comparing the feature to the layer average.
  • Below, an interactive button linking to a deeper data source.

When a popup has several dynamic elements, test each one with a real feature before combining them. The Custom popup editor doesn’t show a live preview with sample data, so the map is where you test it.

Save and verify

After inserting any dynamic content, click Save Changes at the bottom right of the editor. Then open the map and click a feature on the layer to verify the content renders as expected.

If something doesn’t render correctly, check: