Skip to content

Markers

Markers are point-of-interest pins placed on the map. They represent specific locations like entrances, ATMs, restrooms, or elevators.

Placing Markers

  1. Select the Marker tool in the editor
  2. Click on the map to place a pin
  3. Fill in the title and properties
Markers panel listing project markers

Editing Markers

Click a marker to select it, then drag it to reposition it on the map.

Marker Properties

PropertyDescription
TitleDisplay name shown on hover and in search
DescriptionDetailed text shown in the info card
Key (slug)Human-readable identifier for SDK use
TypeVisual style of the pin (see below)
IconBuilt-in icon (curated Lucide set) or custom uploaded icon
ColorPin color
SizePin size in pixels
OpacityTransparency (0–1)
TagsCategories for filtering
ImagesGallery images shown in the info card
StatusStatus type (success, warning, error, info) and custom label
AddressPhysical address
Working hoursSchedule with opening/closing times per day
Phone / Email / WebsiteContact information
RatingNumeric rating (e.g. 0–5)
PriceFree-text price (e.g. "$50" or "From €10")
FeaturesList of feature tags (e.g. "Wi-Fi", "Parking")
OccupancyCrowdedness schedule by time of day
Custom buttonConfigurable CTA button with icon, label, and URL

Marker Key

Use the key to reference markers in the SDK:

typescript
map.selectMarker('main-entrance')  // by key
map.selectMarker('Main Entrance')  // by title

Marker Types

Marker type controls the visual style of the pin:

TypeDescription
ClassicStandard pin marker (default)
PulseAnimated pulsing dot
Drop PinMap-style pin with icon, dot, or plain style
Rounded SquareSquare pin with rounded corners
NumberedPin with a number displayed inside
Label on HoverText label appears on hover

Pin Style (Drop Pin only)

When using the Drop Pin type, you can choose the pin style:

  • Icon — shows the selected icon inside the pin
  • Dot — shows a colored dot
  • Plain — solid pin without inner content

Icon

Each marker can have an icon displayed inside the pin. You can choose from:

  • Built-in icons — a curated set of ~215 icons organized into categories (Food & Drink, Shopping, Navigation, Transport, etc.)
  • Custom icons — upload your own SVG or PNG icons (max 1 MB). Custom icons are stored at the organization level and shared across all projects.

Display Options

OptionDescription
Show tooltipShow title tooltip on hover
Show image in tooltipInclude thumbnail image in the tooltip
Show cardShow full info card when marker is selected
Zoom on selectAutomatically zoom to marker when clicked
Hover animationAnimation on hover: highlight, scale, or none
Show schedule hintsShow "Opens soon" / "Closes soon" based on working hours

Translations

Marker titles, descriptions, status labels, and features can be translated. See Localization.

Layota Documentation