Embed on Website

There are three ways to add a Layota map to your website:

Method	Best for
Web Component	Clean HTML tag, events support, no build step
iframe	Simplest possible embed
JavaScript SDK	Full programmatic control, routing, data access

Web Component

The recommended way to embed a map. Drop in a script tag and use <layota-map> as a regular HTML element.

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

Attributes

Attribute	Description
src	Embed URL (required)
theme	light, dark, blue, auto — override project theme
lang	Language code (e.g., en, ru)
loader	current, stacked-squares, floor-plan, tile-shimmer, pin-drop, sliding-bar — loading animation shown until the map data arrives. Set it to match your project's loader so the right animation appears instantly (the project's own setting is only known after the data request completes). Omit it to show nothing during the initial request.
custom-loader-uri	URL of your own image/GIF to show as the loader. Hosted by you, so it appears instantly. Overrides loader. Must be an http(s) URL.
forward-query	When present, forwards deep-link params (areaId, markerId, levelId, lang, theme) from the host page's URL into the map. Use for QR codes that point to your page with ?areaId=…. Explicit theme/lang attributes take precedence.

<layota-map
  src="https://layota.app/embed/YOUR_PROJECT_ID"
  theme="dark"
  lang="en"
  loader="sliding-bar"
  style="width: 100%; height: 600px;"
></layota-map>

Use your own loader image instead of a built-in animation:

<layota-map
  src="https://layota.app/embed/YOUR_PROJECT_ID"
  custom-loader-uri="https://cdn.example.com/my-loader.gif"
  style="width: 100%; height: 600px;"
></layota-map>

Attributes are reactive and apply without a reload: changing theme, lang, or forward-query updates the map live. Only src (a different project) reloads the iframe; loader / custom-loader-uri affect just the initial load.

With forward-query, the map also follows the host page's URL as the visitor navigates (back/forward). For programmatic SPA navigation (history.pushState), dispatch a popstate event or update an attribute on the element to trigger the update.

Events

The web component dispatches CustomEvents that you can listen to. Events are only fired when analytics is enabled for the project and the specific event is turned on in project settings.

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

<script src="https://layota.app/embed.js"></script>
<script>
  const map = document.getElementById('map')

  map.addEventListener('areaClick', (e) => {
    console.log('Clicked area:', e.detail)
  })

  map.addEventListener('markerClick', (e) => {
    console.log('Clicked marker:', e.detail)
  })

  map.addEventListener('floorChange', (e) => {
    console.log('Floor changed:', e.detail)
  })
</script>

Available Events

Event	Description
areaClick	User clicked an area
areaHover	User hovered over an area
areaFocus	Area was focused
areaBookmark	User bookmarked an area
markerClick	User clicked a marker
markerHover	User hovered over a marker
markerInfoOpen	Marker info card opened
floorChange	Floor switched
floorZoomFocus	Floor zoom/focus changed
floorLoad	Floor finished loading
routeRequest	Wayfinding route was requested
searchQuery	User searched
searchResultClick	User clicked a search result
searchNoResults	Search returned no results
zoomChange	Zoom level changed
panMove	Map was panned
componentLoaded	Map component finished loading
componentUnmounted	Map component was destroyed
interactionTime	Total interaction time tracked

iframe

The simplest embed — one HTML tag, no JavaScript needed.

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

URL Parameters

https://layota.app/embed/PROJECT_ID?theme=dark&lang=en&levelId=floor-2&areaId=cafe

Parameter	Type	Description
theme	string	light, dark, blue, auto
lang	string	Language code (e.g., en, ru)
loader	string	Loading animation shown until data arrives: current, stacked-squares, floor-plan, tile-shimmer, pin-drop, sliding-bar
customLoaderUri	string	URL of your own image/GIF to show as the loader (overrides loader); must be http(s)
levelId	string	Level to show on load (id, key, or name)
areaId	string	Area to select on load (id, key, or title)
markerId	string	Marker to select on load (id, key, or title)
apiKey	string	API key for domain-restricted projects

Responsive Sizing

<div style="position: relative; width: 100%; padding-bottom: 56.25%; height: 0;">
  <iframe
    src="https://layota.app/embed/PROJECT_ID"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allow="fullscreen"
  ></iframe>
</div>

Full-Page Embed

<iframe
  src="https://layota.app/embed/PROJECT_ID"
  style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; border: none;"
  allow="fullscreen"
></iframe>

JavaScript SDK

For full programmatic control — select areas, build routes, fetch project data.

Install

npm install @layota/map-sdk

Basic Usage

<div id="map" style="width: 100%; height: 600px;"></div>

<script type="module">
  import { LayotaMap } from '@layota/map-sdk'

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

  await map.ready()
</script>

With Options

const map = new LayotaMap({
  container: '#map',
  projectId: 'YOUR_PROJECT_ID',
  apiKey: 'sk_...',
  theme: 'dark',
  language: 'en',
  levelId: 'floor-2',
  areaId: 'cafe',
})

Interact with the Map

await map.ready()

// Select and zoom to an area
map.selectArea('coffee-shop').focusOn('coffee-shop')

// Listen to events
map.on('areaClick', (area) => {
  console.log('Clicked:', area.title)
})

// Build a route
map.buildRoute(
  { id: 'entrance', type: 'area', levelId: 'floor-1' },
  { id: 'cafe',     type: 'area', levelId: 'floor-2' }
)

// Clean up
map.destroy()

For the full API reference, see JavaScript SDK. For framework-specific examples, see React / Vue and iOS / Android.

Comparison

	Web Component	iframe	JavaScript SDK
Setup	Script tag + HTML tag	One HTML tag	npm install + code
Select entity on load	URL parameter	URL parameter	Option or method
Listen to events	addEventListener	Not possible	map.on(...)
Select entity at runtime	forward-query URL (no reload)	Change src (reloads)	Method call (no reload)
Build routes at runtime	Not possible	Not possible	map.buildRoute(...)
Fetch project data	Not possible	Not possible	map.getProject()
Works without build step	Yes	Yes	CDN or npm
Shadow DOM isolation	Yes	Yes (iframe)	No