Areas

Areas are interactive polygons drawn on the map. They represent stores, rooms, exhibition zones, or any region of interest.

Drawing Areas

1. Select the Area tool in the editor
2. Click on the map to place polygon vertices
3. Close the polygon by clicking the first point or pressing Enter

Editing Areas

Click an area on the canvas to select it. The polygon vertices become visible as draggable handles — drag any vertex to reshape the area. You can also drag the entire area to reposition it on the map.

Hover over an edge between two vertices to reveal a rounding handle — drag it to curve that edge into a smooth arc.

Area Properties

Property	Description
Title	Display name shown on the map and in search
Description	Detailed text shown in the info card
Key (slug)	Human-readable identifier for SDK use
Color	Fill color of the polygon
Fill opacity	Transparency of the fill (0–1)
Stroke width	Border thickness
Hover opacity	Opacity on hover (0–1)
Tags	Categories for filtering
Images	Gallery images shown in the info card
Status	Status type (success, warning, error, info) and custom label
Address	Physical address
Working hours	Schedule with opening/closing times per day
Phone / Email / Website	Contact information
Rating	Numeric rating (e.g. 0–5)
Price	Free-text price (e.g. "$185,000" or "From €50")
Features	List of feature tags (e.g. "Wi-Fi", "Parking")
Occupancy	Crowdedness schedule by time of day
Custom button	Configurable CTA button with icon, label, and URL
Sub-levels	Link to sub-levels for drill-down navigation

Area Key

The key is a slug used in the SDK to reference areas by a readable name instead of UUID:

map.selectArea('coffee-shop')   // by key
map.selectArea('Coffee Shop')   // by title — also works

Images & Gallery

Upload multiple images to an area. The first image is used as the thumbnail. All images are shown in a gallery in the info card.

Display Options

Option	Description
Show tooltip	Show title tooltip on hover
Show image in tooltip	Include thumbnail image in the tooltip
Show card	Show full info card when area is selected
Zoom on select	Automatically zoom into the area when clicked
Hover animation	Animation on hover: highlight, scale, or none
Show schedule hints	Show "Opens soon" / "Closes soon" based on working hours

Drill-Down

Link an area to sub-levels for drill-down navigation. When a user clicks the area, the map navigates to the linked level. This is useful for buildings within a campus or sections within a floor.

Translations

Area titles, descriptions, status labels, and features can be translated into multiple languages. See Localization.