Quick Start

Get your first interactive map live in under 10 minutes.

1. Create an Account

Sign up at layota.app. The free plan lets you create draft projects to explore the editor. Upgrade to Lite or higher to publish.

After signing in you land on the dashboard — projects, members, usage, and analytics all live here:

2. Create a Project

Click New Project, give it a name (e.g., "My Mall"), and you'll land in the editor.

3. Add a Level

Go to Levels and create your first floor. Upload a floor plan image as the background.

4. Draw Areas

Switch to the Areas tool. Click on the map to draw polygons around stores, rooms, or zones. Fill in titles and descriptions.

5. Place Markers

Switch to the Markers tool. Click to place pins for entrances, elevators, ATMs, and other points of interest.

6. Preview & Publish

Use the preview (the eye icon in the top bar) to check your map on desktop, tablet, and mobile screen sizes:

When everything looks right, click Publish in the top right. Your map is now live.

7. Embed on Your Website

Copy the embed code from the project dashboard and paste it into your HTML:

<script src="https://layota.app/embed.js"></script>
<layota-map
  src="https://layota.app/embed/YOUR_PROJECT_ID"
  style="width: 100%; height: 600px;"
></layota-map>

Or use a plain iframe:

<iframe
  src="https://layota.app/embed/YOUR_PROJECT_ID"
  width="100%"
  height="600"
  frameborder="0"
></iframe>

See Embed on Website for all embedding options.

8. Control with the SDK (Optional)

For programmatic control, install the JavaScript SDK:

npm install @layota/map-sdk

import { LayotaMap } from '@layota/map-sdk'

const map = new LayotaMap({
  container: '#map',
  projectId: 'YOUR_PROJECT_ID',
})

await map.ready()
map.selectArea('coffee-shop').focusOn('coffee-shop')

Next Steps

• Projects — project settings, statuses, and publishing
• Levels — multi-floor configuration
• Embed on Website — advanced embed options
• JavaScript SDK — full SDK reference