ExpoFP JavaScript SDK

Appearance

Zoom to Booth ​

Bring a booth into focus after the map loads (for example inside onInit). selectBooth and zoomTo are not interchangeable:

  • selectBooth(nameOrExternalId) (FloorPlan) — behaves like the user tapped the booth: updates selection / details state and moves the viewer to it. Runnable sample: Zoom.
  • zoomTo({ booths: [...], exhibitors: [...] }, options?) (FloorPlan) — adjusts only the camera so those POIs fit in view (optional padding). Use when you want a viewport jump without the full booth-selection flow. Runnable sample: Zoom To.

💡 See the JavaScript API Reference for all available methods

Example: zoomTo ​

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'),
          noOverlay: true,
          onInit: (fp) => {
            fp.setVisibility({
              controls: false,
              levels: false,
              header: false,
              overlay: false,
            });
            fp.zoomTo({ booths: [{ name: '1' }] });
          },
        },
      );
    </script>
  </body>
</html>

Open live example

Query parameters — set initial zoom level via URL
JavaScript API Reference — full method documentation.