ExpoFP JavaScript SDK

Appearance

Map Integration ​

Two ways to integrate a floor plan into your page.

Method 1: load() ​

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <div id="floorplan" style="width: 100%; height: 100dvh"></div>
    <script type="module">
      import { load } from 'https://unpkg.com/@expofp/floorplan';
      load(
        { $ref: 'https://demo.expofp.com/manifest.json' },
        { element: document.querySelector('#floorplan') },
      );
    </script>
  </body>
</html>

Open live example

Method 2: Iframe ​

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
  </head>
  <body
    style="margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center"
  >
    <iframe
      style="width: 90%; height: 90%; border: 0"
      src="https://demo.expofp.com?allowConsent=false"
      allow="clipboard-read; clipboard-write"
    ></iframe>
  </body>
</html>

Open live example