Popups & Cards
Design the popups and cards that display your map data.
What are popups?
Popups are information panels that appear when a user clicks or taps a marker on the map. They display details about the selected feature.
What are cards?
Cards are list-view items shown alongside the map, one per feature. They provide a scrollable list of your data that stays in sync with the map.
HTML templates
Both popups and cards use HTML templates with token-based placeholders.
Token syntax
Use {{field_slug}} to insert field values into your templates. Every field slug in your dataset is a valid token. The special token {{label}} inserts the feature's label.
<div class="popup">
<h3>{{name}}</h3>
<p>{{description}}</p>
<img src="{{image}}" alt="{{name}}">
<span class="price">{{price}}</span>
</div>
Popup configuration
| Property | Description |
|---|---|
popupHTML |
The HTML template for popups |
popupHTMLMobile |
Separate template for mobile (optional — falls back to popupHTML) |
popupCSS |
Custom CSS scoped to the popup |
popupCSSMobile |
Mobile-specific CSS |
popupTailwindCSS |
Tailwind utility classes for popup styling |
popupWidth |
Fixed popup width (CSS value like 300px) |
Card configuration
| Property | Description |
|---|---|
cardHTML |
The HTML template for cards |
cardHTMLMobile |
Separate template for mobile (optional — falls back to cardHTML) |
cardCSS |
Custom CSS scoped to cards |
cardCSSMobile |
Mobile-specific CSS |
cardTailwindCSS |
Tailwind utility classes for card styling |
Mobile templates
You can provide separate templates for mobile breakpoints. If a mobile template is not set, the desktop template is used automatically.
Tailwind CSS in templates
Mapsemble compiles Tailwind classes used in your templates automatically. You can use any Tailwind utility class directly in your card and popup HTML.
AI template generation
Mapsemble can auto-generate card and popup templates from your field configuration. Enable generateTemplates in the map config to trigger this. This is a one-time generation — the templates are saved and can be edited afterwards.
Remote content
For advanced use cases, popups and cards can load content from an external URL instead of using inline HTML templates.
Display types
Your map can show data in different layouts:
- Cards view — Map and a list of cards side by side (default).
- Map only — Full-screen map with popups on click.
- Table view — Tabular data display.
Pagination
When enabled, cards are paginated. Configure itemsPerPage to control how many cards appear per page (default: 24).
Scroll on hover
Set scrollCardsOnHover to automatically scroll the card list to the corresponding card when hovering over a marker on the map.
Plan availability
Card and popup customization is available on all plans. Custom CSS for popups and cards requires the Enterprise plan.