SeatMaps can provide media assets (seat photos and 360° panoramas) together with the seat map layout. These assets are returned as part of the seat map initialization payload and are intended to be rendered by the parent application (web, iframe, or Red App layer).

Media availability

Media data is returned inside the onSeatMapInited event. If media is available for the given aircraft and cabin, it will be exposed via the media object.

onSeatMapInited = (data) => {
  const media = data.media;

  // media.photoData   → seat / cabin photos
  // media.panoData    → 360° panoramas

  console.log(media);
};

Media data structure

Photos and panoramas are returned as arrays with URLs and metadata.

interface IMediaData {
  photoData: IPhotoData[];
  panoData: IPanoData[];
}

interface IPhotoData {
  file: string;
  thumb: string;
  size: { w: number; h: number };
  description: string;
}

interface IPanoData {
  file: string;
  rawFile: string;
  thumb: string;
  description: string;
}

Rendering media in the parent layer

SeatMaps does not render media automatically. The parent layer is responsible for displaying photos or panoramas (for example, in a modal or side panel).

• Wait for the seat map to be initialized
• Read media metadata from onSeatMapInited
• Render media inside your own UI (modal, drawer, iframe overlay)
• Control visibility and lifecycle from the parent layer

Example: render photos in a modal

function onSeatMapInited(data) {
  const photos = data.media?.photoData || [];

  if (!photos.length) return;

  openMediaModal({
    images: photos.map(p => ({
      src: p.file,
      thumb: p.thumb,
      description: p.description
    }))
  });
}

Example screenshots (Sabre / Red App)

Below are real screenshots from a Sabre Red App integration. Click any image to open it in full size.

Example: rendering panoramas via iframe

function openPanorama(pano) {
  const iframe = document.createElement("iframe");

  iframe.src = pano.file;
  iframe.width = "100%";
  iframe.height = "100%";
  iframe.allowFullscreen = true;

  document.getElementById("pano-container").appendChild(iframe);
}

Common integration pitfalls

• Media appears briefly and disappears — usually caused by re-rendering or unmounting the container component.
• Media tied to seatmap lifecycle — media UI should live outside the seatmap component.
• Missing media — not all aircraft or cabins have media available.
• CSP / iframe restrictions — especially relevant in Red App or embedded environments.

Red App (Sabre) integration notes

In Red App environments, media iframes must comply with Sabre CSP and iframe policies.

Recommendation: Treat media as a sibling UI layer to the seat map, not a child of it.