Info Cards, Popups & Media
Attach rich metadata, photo galleries, and actionable buttons to any marker or zone. Configure popovers, side drawers, centered modals, and full-screen views.
5 Presentation Modes
Every marker and clickable shape on your map can display an interactive info card. Choose from 5 presentation modes to suit your project—from quick hover summaries to expansive side drawers and immersive full-screen tours:
Floating popup anchored directly to the marker or shape centroid. Features smart viewport collision detection so it never clips off-screen. Ideal for quick details, room numbers, and price tags.
Slides in smoothly from the edge of the screen. Perfect for store directories, booth profiles, and extensive descriptions without obscuring the center of the map.
Focused dialog box with a subtle backdrop blur and dimmed overlay. Great for reservation forms, video embeds, and detailed product showcases.
Two-column layout displaying scrollable structured information on the left and a full-height image gallery on the right. Perfect for real estate listings, campus tours, and museum exhibits.
On mobile phones, cards automatically adapt into an iOS-style gesture drawer with touch drag handles and snap points (70% preview and 100% full height), ensuring a fluid mobile experience.
Global Default vs. Per-Item Customization
Modular Content Sections
Each card consists of 6 modular content blocks. You can independently show, hide, customize typography, and reorder each section:
Custom font family, size, weight, color, alignment, and multi-line break preservation.
Rich text with bold, italics, links, and lists. Includes automatic 3-line clamping with a collapsible "View more / View less" button.
Key-value pairs paired with icons (phone, email, hours, price). Supports Stack, Inline, or Value-only layouts with dividers.
Color-coded badge pills matching your map categories, with optional full-width stacking and "+X more tags" expansion.
Call-to-action buttons for external URLs (website, booking, directions). Configurable in Stack, Row, or 2-column Grid layouts.
Header image carousel with customizable aspect ratio, image fit, and a full-screen zoom lightbox viewer.
Multi-Language Info Cards
Live In-Card Reordering
In the map editor, hovering over any section inside an info card reveals a quick-action toolbar. You can click Edit to jump to its properties, use the / arrow buttons to move sections up or down, or click Hide to toggle visibility instantly.
Media Library & Image Galleries
Enhance your locations with rich photos, architectural renderings, and floor plan details:
Attach multiple images to any marker or shape. Easily reorder images or select any photo as the primary cover image displayed at the top of the card.
Choose the perfect frame ratio for your content: UltraWide (21:9), Wide (16:9), Compact (2:1), Landscape (3:2), Standard (4:3), Square (1:1), Portrait (4:5), or Tall (3:4), with Cover or Contain fitting modes.
Visitors can click any image to open a full-resolution fullscreen lightbox with smooth keyboard, swipe, and zoom navigation.
Upload in batches up to 20 files at once. Supported formats include SVG, JPEG, PNG, WEBP, AVIF, BMP with real-time storage quota tracking.
Card Styling & Global Defaults
Every aspect of the card shell can be tailored to match your brand:
- Background: Solid colors with opacity control, transparent cards, or smooth linear gradients.
- Borders: Solid, dashed, or dotted SVG borders with custom stroke widths and color or gradient fills.
- Corner Radius & Shadows: Smooth rounded corners (0px to 24px+) and soft ambient drop shadows.
Once you craft the perfect card appearance, click "Save as default" at the bottom of the style panel. Layerpin will confirm and apply this style across all existing and newly created markers and shapes automatically.
You can still customize individual hotspots whenever a featured exhibit, sponsor booth, or key landmark needs unique colors or a dedicated layout.