Building a Mall Map

Step-by-step guide to creating an interactive shopping mall map in Layota.

1. Create the Project

1. Sign in at layota.app
2. Click New Project and name it (e.g., "Central Mall")
3. You're now in the editor

2. Add Levels

A typical mall has multiple floors. Create a level for each:

1. Open the Levels panel
2. Add levels: "Floor 1", "Floor 2", "Parking"
3. Upload floor plan images for each level
4. Reorder by dragging — ground floor at the top

TIP

Use consistent image dimensions across all levels so they align when switching floors.

3. Draw Store Areas

For each level:

1. Select the Area tool
2. Draw a polygon around each store
3. Fill in:
   • Title: Store name (e.g., "Zara", "Starbucks")
   • Key: URL-friendly slug (e.g., zara, starbucks)
   • Description: Store details, hours, phone
   • Tags: Category (e.g., "Fashion", "Food")
   • Images: Upload store photos

4. Place Markers

Add markers for non-store points of interest:

• Entrances / Exits
• Elevators and escalators
• Restrooms
• ATMs
• Information desk
• Parking entrance

5. Set Up Tags

Create tags for common categories:

Tag	Color	Examples
Fashion	#E91E63	Zara, H&M, Nike
Food	#FF9800	Starbucks, McDonald's
Electronics	#2196F3	Apple Store, Samsung
Services	#9E9E9E	ATM, Restrooms, Info

6. Configure Wayfinding

1. Open the Wayfinding panel
2. Draw corridors along walkable paths on each floor
3. Add transition points at elevators and escalators
4. Connect areas to nearby corridor nodes
5. Test routes between different stores

7. Add Search

Quick Search Items help visitors find popular destinations:

• "Food Court"
• "Restrooms"
• "Parking"
• "Cinema"

8. Customize Appearance

• Choose a theme that matches your mall's branding
• Configure which UI controls to show
• Add custom CSS if needed (Pro plan)

9. Localization

If your mall serves international visitors:

1. Add languages (e.g., English, Russian, Arabic)
2. Translate store names and descriptions
3. Set the default language

10. Publish & Embed

1. Click Publish
2. Copy the embed code
3. Paste it into your mall's website

<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>

Bonus: Deep Links

Link directly to a specific store from your mall directory:

https://layota.app/embed/PROJECT_ID?areaId=starbucks&levelId=floor-1

Or use the SDK for interactive features like search, filtering, and route building.